У матеріалі з changelog Cloudflare розбирається свіжий підхід: команда додає шумозаглушення поверх існуючих відеодзвінків на базі RealtimeKit, не змінюючи всю аудіосхему в застосунку. Це окремий пакет @cloudflare/realtimekit-noise-cancellation, який підхоплює вже ініціалізовану зустріч і вмикає обробку звуку на боці браузера.
1. Для кого взагалі має сенс це шумозаглушення
Функція орієнтована на вже існуючі або нові веб- та мобільні застосунки, що використовують RealtimeKit як SDK для реального часу (відеозустрічі, аудіодзвінки, онлайн-класи, консультації тощо). Ключова деталь підходу: шум фільтрується безпосередньо в браузері учасника до того, як аудіо полетить у вашу зустріч.
Це зручно, якщо:
- у вас є фронтенд на React, Angular або «чистому» JavaScript з RealtimeKit;
- користувачі часто говорять не з тихим бекграундом (офіс опенспейс, дім, коворкінг);
- ви не хочете самому збирати ланцюжок Web Audio / worklet-и / DSP для шумозаглушення;
- важливо, щоб підключення до дзвінка не затримувалося через додаткову обробку.
Разом із цим автори прямо зазначають обмеження: iOS та Android SDK RealtimeKit поки що не підтримують це шумозаглушення — воно працює лише в браузерах.
2. Встановлення пакета шумозаглушення
Cloudflare виніс функціональність у окремий npm-пакет @cloudflare/realtimekit-noise-cancellation. Його можна додати будь-яким популярним менеджером пакетів:
Через npm:
npm i @cloudflare/realtimekit-noise-cancellationЧерез yarn:
yarn add @cloudflare/realtimekit-noise-cancellationЧерез pnpm:
pnpm add @cloudflare/realtimekit-noise-cancellationЧерез bun:
bun add @cloudflare/realtimekit-noise-cancellationЗ точки зору архітектури це зручно: шумапкування не вшито всередину основного RealtimeKit SDK, а підключається за потреби. Тож якщо вам воно не потрібне для частини проєктів, ви просто не додаєте пакет у залежності.
3. Підключення після ініціалізації зустрічі
Ключовий момент у роботі пакета — він очікує, що ви вже ініціалізували зустріч RealtimeKit. У документації це описано як initialize the meeting. Після цього об'єкт meeting передається в RealtimeKitNoiseCancellation.init.
Базовий приклад з changelog виглядає так:
Кілька важливих деталей з цього прикладу:
init({ meeting })приймає саме посилання на вже готову зустріч, а не створює її самостійно — це додає шумозаглушення поверх вашої існуючої логіки;- ініціалізація повертає проміс, тож у прикладі використаний
void ...catch(console.warn)— ініціалізація не блокує приєднання до дзвінка, а помилки просто логуються як попередження; - коментар у коді явно фіксує поведінку: шумозаглушення вмикається автоматично, коли мікрофон стає доступним, без затримки самого join.
З погляду інтеграції у фреймворки це означає, що ви:
- у React викликаєте
initпісля того, як отримаєтеmeeting(наприклад, вuseEffect); - в Angular робите це в життєвому циклі компонента, де вже є посилання на зустріч;
- у «ванільному» JS викликаєте
initпісля успішного створенняmeetingчерез RealtimeKit SDK.
4. Як саме поводиться шумозаглушення в браузері
Окремий блок changelog описує поведінку модуля після виклику init(). Це важливо врахувати, щоб не будувати власну логіку всупереч цим гарантіям.
- Фільтрація на клієнті. Шумозаглушення обробляє аудіо у браузері учасника до надсилання в зустріч. Отже, інші учасники одразу чують «очищений» звук, а ваш бекенд отримує вже оброблений сигнал.
- Автовмикання після
init(). Після викликуinitсистема слідкує за станом мікрофона і вмикає шумозаглушення, як тільки мікрофон стає активним. Не потрібно окремо вішатися на подію «unmute» чи відкриття девайсу. - Переживає mute, unmute і reconnect. Логіка не обривається при тимчасовій втраті з'єднання або коли користувач вимикає / вмикає мікрофон. Це скорочує кількість місць, де вам довелося б повторно піднімати обробку звуку власноруч.
- Автоочищення при виході. Коли учасник залишає зустріч, ресурс шумозаглушення звільняється. Це зменшує шанси зловити витік ресурсів у браузері при довгих сесіях або частих reconnection.
- Ніколи не вмикає мікрофон самостійно. У матеріалі прямо вказано, що шумозаглушення ніколи не «розм'ючує» мікрофон. Це важливо з точки зору конфіденційності та UX: контроль мікрофона залишається в руках користувача та вашого основного UI.
Ці гарантії дозволяють вбудувати шумозаглушення в застосунок без додаткових перемикачів чи складної синхронізації зі стейт-менеджментом — достатньо один раз ініціалізувати його з актуальним meeting.
5. Підтримувані платформи та обмеження
У changelog окремо зазначена матриця підтримки:
- працює в React, Angular та JavaScript-застосунках;
- браузери: Chrome, Edge, Firefox, Safari, включно з мобільними версіями;
- не працює в нативних RealtimeKit SDK для iOS та Android (на момент публікації матеріалу).
Вам варто врахувати цей поділ при побудові кросплатформенних продуктів. Наприклад, якщо у вас є один і той самий сервіс з веб-версією та нативними мобільними додатками на RealtimeKit, шумозаглушення через цей пакет отримає лише веб-користувач. В мобільних додатках доведеться або жити без цієї функції, або шукати окреме нативне рішення.
6. Де подивитися повний API та приклади
Окремі деталі налаштувань, додаткові параметри init() та розширені сценарії не розкриваються в changelog, але винесені в основну документацію та репозиторій з демо-прикладами:
- Noise Cancellation — офіційний гайд по налаштуванню для React, Angular і JavaScript плюс повний API;
- Noise cancellation example ↗︎ — приклад з типовим UI зустрічі RealtimeKit і увімкненим шумозаглушенням; у тому ж репозиторії є варіанти для Angular та HTML;
- RealtimeKit release notes — щоб відстежувати подальші зміни цієї функції;
- RealtimeKit quickstart — базовий старт, якщо ви ще не інтегрували сам RealtimeKit і у вас немає
meetingдляinit().
Практичний сценарій виглядає так: спочатку налаштувати базовий RealtimeKit за quickstart-гайдом, потім підключити приклад із шумозаглушенням з репозиторію GitHub, і вже після цього адаптувати його під свій UI й поточну логіку керування зустрічами.
Джерело: Cloudflare Changelog