Chrome 151 получил новый элемент <usermedia> для доступа к камере и микрофону

Google Chrome представил новый HTML-элемент , доступный начиная с версии 151. Это часть более широкой инициативы Capability Elements, следующая после элемента в Chrome 144.

Элемент решает давнюю проблему веб-разработки: асинхронные JavaScript-вызовы getUserMedia() часто срабатывают без контекста, приводя к отказам и низким показателям одобрения разрешений. Если пользователь однажды заблокирует доступ, реверс требует навигации по глубоким настройкам браузера, этот дефект называют «permission hole».

работает декларативно: элемент отображается прямо в HTML, а разрешение запрашивается только после физического клика на управляемую кнопку. Браузер обрабатывает весь процесс: показывает надёжный сигнал намерения, доставляет объект MediaStream напрямую в приложение, предоставляет специальный путь восстановления для пользователей, ранее отказавших доступ.

Данные из Origin Trial показали значительный рост успеха:

Cisco: вероятность успешного повторного одобрения разрешения выросла со 100% на 10% при старых prompt'ах до 65%+
Zoom: сократил ошибки захвата камеры/микрофона на 46,9% за счёт направления пользователей через процесс восстановления
Google Meet: снизил жалобы на неработающий микрофон на 17% и увеличил успешное восстановление разрешения на 131% для пользователей, которые ранее отказали

Элемент имеет читаемый API: свойство stream, метод setConstraints(), свойства error, обработчики onstream, onerror, oncancel. Браузер строго контролирует оформление для предотвращения обманных паттернов: контраст текста минимум 3:1, заранее установленные границы ширины/высоты/размера шрифта, отключены трансформы кроме 2D-переводов и масштабирования.

Для будущих версий планируются узкоспециализированные элементы для видео и только для аудио. Элемент деградирует gracefully, браузеры без поддержки рендерят его как HTMLUnknownElement с fallback'ами внутри.

Ключевые факты

Chrome 151 выпустил встроенный элемент , заменяющий асинхронные JavaScript-вызовы getUserMedia()
Решает проблему «permission hole», пользователи, отказавшие доступ, могут теперь переоформить разрешение прямо на странице без погружения в настройки
Испытания на реальных продуктах: Cisco повысил успех переодобрения с 10% до 65%, Zoom снизил ошибки на 46,9%, Google Meet сократил жалобы на микрофон на 17%
Декларативный API (вместо imperative): браузер управляет промптом, приложение получает MediaStream напрямую через событие 'stream'
Браузер строго контролирует стили для предотвращения обманных паттернов (контраст 3:1, размеры, отключены трансформы)

Почему это важно

Веб-приложениям часто нужен доступ к камере и микрофону, но скрипт-запросы срабатывают без явного намерения пользователя, что приводит к отказам. Ещё хуже: если пользователь однажды заблокировал доступ, обратный процесс требует погружения в настройки браузера. решает обе проблемы: физический клик дает браузеру надёжный сигнал намерения, а встроенное восстановление позволяет реактивировать доступ в две клика прямо на сайте. Доказано на примерах Cisco (рост с 10% до 65%), Zoom (46,9% меньше ошибок) и Google Meet (17% меньше жалоб).

Кому это важно

Веб-разработчикам, строящим приложения видеоконференций, трансляций, мессенджеров, социальных платформ или любых других сервисов с медиа-захватом. Также пользователям этих приложений, они получают более интуитивный интерфейс управления разрешениями, без лишних кликов и потерянного контекста.

Как это применить

Вместо el.addEventListener('click', () => navigator.mediaDevices.getUserMedia(...)) просто добавьте в HTML: . В JavaScript вызовите el.setConstraints({video: {width: 1280, height: 720}, audio: {echoCancellation: true}}) и слушайте события 'stream', 'error' и 'cancel'. Для старых браузеров используйте feature detection (if ('HTMLUserMediaElement' in window)) и fallback на старый API внутри элемента.

Можно ли доверять

Элемент разработан Google как часть инициативы Capability Elements и имеет строгие ограничения на стили (контраст 3:1, запрет на трансформы и полупрозрачность), чтобы предотвратить обманные паттерны. Данные об улучшениях взяты из Origin Trial с реальными крупными сервисами (Cisco, Zoom, Google). Это официальная хром-фича, уже доступная в Chrome 151.

Риски и подводные камни

API новый, поддерживается только Chrome 151+. Миграция с element требует обновления feature detection. Важно помнить, что браузер строго контролирует оформление элемента, неправильный контраст или спрятанный размер приведет к блокировке разрешения браузером. Для комбинированного видео+аудио нужен ; узкоспециализированные элементы и обещаны в планах, но пока не готовы.

«Cisco обнаружил, что пользователи, изначально отказавшие в разрешении, имели только около 10% вероятность успешно получить разрешение, используя старые промпты, но эта ставка подскочила выше 65% с новым элементом.»

— Chrome Developer Blog