I tried to capture system audio in the browser. Here’s what I learned.

від

у

Я намагався захопити системний аудіо через браузер. Ось що я дізнався.

Я створюю LiveSuggest, реальний AI-асистент, який слухає ваші зустрічі і дає пропозиції під час розмови. Просто ідея, правда?

Виявляється, захоплення аудіо з вкладки браузера — це… складно.

Хороші новини

Chrome і Edge підтримують це. Ви використовуєте getDisplayMedia, той самий API для спільного екрану, але з опцією аудіо:

const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: { systemAudio: ‘include’ }
});

Користувач обирає вкладку для спільного використання, ставить галочку “Поділитися звуком вкладки”, і бум — ви отримуєте аудіо потік. Чудово працює для Zoom, Teams, Meet, що завгодно, що працює у вкладці браузера.

Погані новини

Firefox? Реалізує getDisplayMedia, але повністю ігнорує аудіо частину. Ніякої помилки, ніякого попередження. Ви просто… не отримуєте аудіо.

Safari? Та ж історія. API існує, але аудіо немає.

Мобільні браузери? Жоден з них не підтримує це. iOS, Android — неважливо.

Отже, якщо ви створюєте щось, що потребує системного аудіо, ви дивитесь лише на Chrome/Edge десктоп. Це, можливо, 60-65% ваших потенційних користувачів.

Що я в підсумку зробив

Я заздалегідь визначаю браузер і показую чітке повідомлення:

“Firefox не підтримує захоплення системного аудіо для зустрічей. Використовуйте Chrome або Edge для цієї функції. Захоплення мікрофона все ще доступне.”

Жодних трюків, жодних обхідних шляхів. Тільки чесність. Користувачі цінують знання про те, чому щось не працює, замість того, щоб гадати, чи зробили вони щось не так.

Для користувачів Firefox/Safari програма переходить в режим тільки мікрофона. Це не ідеально для захоплення обох сторін розмови, але це краще, ніж нічого.

Дратівливі деталі

Кілька речей, які витратили мій час, щоб не витрачати ваш:

Вам потрібно запитувати відео. Навіть якщо ви хочете тільки аудіо. video: true є обов’язковим. Я відразу ж зупиняю відеотрек після отримання потоку, але ви не можете його пропустити.

Галочка “Поділитися звуком вкладки” легко пропустити. Chrome показує це у діалоговому вікні спільного використання, але вона не обрана за замовчуванням. Якщо ваш користувач її не обере, ви отримаєте потік з нулями аудіотреками. Ніякої помилки, просто тишу.

Потік може зникнути в будь-який момент. Користувач натискає “Зупинити спільний доступ” на панелі інструментів Chrome? Ваш потік закінчується. Вам потрібно слухати подію завершення і обробляти її належним чином.

Чи варто це?

Абсолютно. Для браузерів, які це підтримують, захоплення звуку вкладки — це зміна гри. Ви можете створити речі, які раніше були неможливі — асистенти для зустрічей, живі перекладачі, інструменти доступності.

Просто знайте, що ви витратите час на виявлення браузера і обхідні рішення. Це веб у 2025 році.

Якщо вас цікавить, що я створив, перегляньте LiveSuggest. І якщо ви знайшли кращі обхідні рішення для Firefox/Safari, я б хотів про це почути в коментарях.

January 12, 2026 at 05:21PM


Коментарі

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *