HTML <usermedia>: декларативный доступ к камере и микрофону без JavaScript

Доступ к камере и микрофону в вебе всегда был связан с JavaScript: вызовы getUserMedia, обработка ошибок, управление разрешениями. Новый HTML-элемент предлагает кардинально иной подход — декларативный. Вместо кода вы просто описываете в разметке, какие устройства нужны, а браузер сам управляет запросом разрешения и жизненным циклом потока. Это сокращает объем кода, повышает безопасность и делает взаимодействие с пользователем более естественным. В этой статье разберем, что такое , как он работает, чем отличается от существующих решений и когда его можно будет использовать в реальных проектах.

Что такое и как он работает

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

Например, чтобы получить доступ к камере, достаточно написать: . Браузер при активации элемента (например, по клику) запросит разрешение и предоставит доступ к видеопотоку. Это похоже на существующий элемент , но для мультимедийных потоков.

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

Предыстория и контекст

Идея декларативного доступа к устройствам не нова. Уже существуют такие API, как getUserMedia, но они требуют JavaScript и не всегда удобны. Проблема повторных запросов: если пользователь один раз запретил доступ, браузер часто блокирует повторные запросы без явного действия. решает это, позволяя пользователю легко изменить решение.

Элемент разрабатывается в рамках инициативы Web Incubator CG (WICG) и находится на стадии предложения. Он обсуждается в сообществе веб-разработчиков и может быть включён в стандарт HTML в будущем. Подобные декларативные элементы уже существуют, например, для модальных окон, который упростил работу с диалогами.

Как отличается от getUserMedia?

Главное отличие — декларативность. Вместо написания кода на JavaScript с обработкой промисов и ошибок, разработчик просто объявляет элемент. Это снижает порог входа и уменьшает количество ошибок. Кроме того, автоматически управляет жизненным циклом потока: при удалении элемента поток останавливается, что снижает нагрузку на ресурсы.

Ещё одно преимущество — безопасность. Браузер может более строго контролировать доступ, поскольку он знает о намерении разработчика из разметки. Это уменьшает риск злоупотреблений, например, когда сайт тайно включает камеру.

Технические подробности

На данный момент спецификация находится в ранней стадии. Предполагается, что элемент будет поддерживать атрибуты: devices (камера, микрофон, оба), facingmode (front/back), а также события, такие как 'change', для отслеживания изменений статуса разрешения. Поток будет доступен через свойство элемента, например, element.stream.

Браузеры, скорее всего, будут реализовывать этот элемент на основе существующих API, таких как getUserMedia и Permissions API. Это обеспечит обратную совместимость и упростит внедрение.

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

Кого затронет и как

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

Пользователи выиграют от более прозрачного контроля над своими устройствами: они будут видеть, когда и зачем запрашивается доступ, и смогут легко отозвать его. Это повышает доверие к веб-приложениям.

Для бизнеса это означает снижение затрат на разработку и поддержку, а также улучшение пользовательского опыта. В России и СНГ, где популярны видеосервисы и онлайн-образование, этот элемент может ускорить создание новых продуктов.

Что будет дальше

Сейчас — это всего лишь предложение. Необходимо пройти этапы обсуждения в WICG, затем в WHATWG и получить поддержку браузеров. Ожидается, что в течение ближайших лет появится прототип в одном из браузеров, скорее всего, в Chrome.

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

Итог

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