Представляем HTML-элемент

Mari Viana

Minh Le

Опубликовано: 29 июня 2026 г.

После появления элемента <geolocation> в Chrome 144, следующим функциональным элементом в наборе Capability Elements стал HTML-элемент <usermedia> . Доступный начиная с Chrome 151, этот элемент знаменует собой следующий этап перехода от общих запросов на разрешение к целевым и функциональным элементам управления доступом к потокам с камеры и микрофона. Отказываясь от запросов, запускаемых скриптами, в пользу декларативного и активируемого пользователем интерфейса, <usermedia> сокращает объем шаблонного кода, повышает безопасность и обеспечивает беспрепятственный путь восстановления для пользователей, которым ранее был отказано в доступе, эффективно решая давнюю проблему с правами доступа.

От управления разрешениями до контроля возможностей

Элемент <usermedia> — это следующий специализированный элемент управления, который появится в наборе Capability Elements после успешного внедрения <geolocation> . Этот переход от первоначального и общего предложения <permission> — части инициативы PEPC — позволяет браузеру более эффективно обрабатывать уникальные сложности и особенности поведения различных аппаратных возможностей. В то время как раннее предложение было сосредоточено в основном на управлении состояниями разрешений, такими как «разрешить» или «запретить», элементы Capability Elements функционируют как посредники данных.

Элемент <geolocation> предоставляет вашему сайту объект местоположения, а <usermedia> управляет всем процессом доступа к камере и микрофону. Он отслеживает намерения пользователя, управляет запросом браузера и передает объект MediaStream приложению. Такое изменение устраняет необходимость в отдельных вызовах getUserMedia() , упрощает реализацию и гарантирует, что браузер получает достоверный сигнал о намерениях пользователя.

Проверка концепции

Данные, полученные в ходе первоначального испытания Origin Trial, продемонстрировали, что контекстно-зависимый и инициируемый пользователем контроль разрешений значительно повышает показатели успешности использования.

• Компания Cisco отметила, что пользователи, которые изначально отказывали в предоставлении разрешений, с вероятностью около 10% успешно предоставляли их, используя старые формы запроса, но с появлением нового элемента этот показатель вырос до более чем 65% .
• Компания Zoom сообщила о снижении количества ошибок захвата изображения с камеры или микрофона на 46,9% , таких как системные блокировщики, благодаря использованию этого элемента для помощи пользователям в восстановлении работы системы.
• В Google Meet зафиксировано снижение количества отзывов о «неработа микрофона» на 17% и увеличение на 131% числа успешных случаев восстановления доступа для пользователей, которым изначально был отказано в доступе.

Зачем использовать элемент <usermedia> ?

Основываясь на шаблонах, заданных элементом <geolocation> , элемент <usermedia> решает основные проблемы запроса мощных возможностей. Запросы медиафайлов основаны на императивных вызовах JavaScript, которые часто приводят к запросам, вырванным из контекста. Если вы случайно заблокируете свой сайт, для отмены этого решения потребуется углубиться в настройки браузера, что представляет собой «дыру в правах доступа», которая часто приводит к отказу от некоторых функций.

Элемент <usermedia> решает эти проблемы, предоставляя следующее:

• Четкое указание намерения и времени: поскольку запрос появляется только после физического касания элемента, управляемого браузером, он служит надежным сигналом о намерении. Это позволяет браузеру обходить автоматические блокировки, которые часто приводят к сбоям обычных запросов, запускаемых скриптами.
• Упрощенное восстановление: если доступ ранее был запрещен, нажатие на элемент запускает специальный процесс восстановления, который позволяет мгновенно включить камеру или микрофон прямо на странице, без необходимости переходить к сложным настройкам браузера.
• Прямой доступ к потоку данных: выступая в роли посредника данных, элемент напрямую предоставляет доступ к медиапотоку. Это сокращает количество шаблонного кода, необходимого для управления обратными вызовами и состояниями ошибок в вашем приложении.

Выполнение

Интеграция этого элемента требует значительно меньше шаблонного кода, чем использование устаревшего JavaScript API. Следуя декларативному шаблону, установленному элементом <geolocation> , вы можете добавить тег <usermedia> в свой HTML-код и настроить требования к оборудованию с помощью метода setConstraints() .

<usermedia id="media-ctrl">
  <button>Enable camera and microphone</button>
</usermedia>

const el = document.getElementById('media-ctrl');

// Specify hardware preferences before user interaction:
el.setConstraints({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
});

// Handle successful stream acquisition:
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// Handle stream acquisition failure:
el.addEventListener('error', () => {
  console.error(`Access failed: ${el.error?.name}`);
});

// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
  console.log('Permission prompt was dismissed by the user.');
});

Ключевые атрибуты и свойства

• stream : Свойство только для чтения, предоставляющее объект MediaStream после того, как пользователь успешно предоставит доступ.
• setConstraints() : Метод, позволяющий разработчикам обновлять аппаратные настройки, такие как deviceId или разрешение, до взаимодействия с пользователем.
• error : Свойство только для чтения, которое возвращает исключение DOMException (например, NotAllowedError ), если запрос не удается или он отклоняется.
• onstream : Обработчик событий, который срабатывает немедленно после получения медиафайлов.
• onerror : Обработчик событий, который срабатывает при неудачной попытке получения потока данных.
• oncancel : Обработчик событий, который срабатывает, когда пользователь отменяет или закрывает запрос на предоставление разрешения во время получения данных.

Ограничения стиля

Для обеспечения доверия пользователей и предотвращения обманчивых дизайнерских решений элемент <usermedia> применяет те же строгие ограничения по стилю, что и другие элементы Capability Elements:

• Читаемость: Браузер проверяет цвет текста и фона на наличие достаточного контраста (не менее 3:1), чтобы гарантировать постоянную читаемость запроса. Необходимо установить альфа-канал ( opacity ) равным 1 , чтобы предотвратить обманчивую прозрачность элемента.
• Размеры и отступы: Браузер устанавливает минимальные и максимальные значения width , height и font-size . Он отключает отрицательные поля или смещения контура, чтобы предотвратить визуальное перекрытие элемента.
• Визуальная целостность: браузер ограничивает эффекты искажения. Например, transform поддерживает только 2D-сдвиги и пропорциональное масштабирование.
• Псевдоклассы CSS: Элемент поддерживает стилизацию на основе состояния, например , `:granted` (который активируется после получения разрешения и потока данных), а также стандартные состояния взаимодействия, такие как `:hover` и `:active` .

Постепенная стратегия улучшения и миграции

Следуя шаблону проектирования, установленному для <geolocation> , элемент <usermedia> создан таким образом, чтобы корректно обрабатывать некорректную работу браузеров. Браузеры, не поддерживающие этот элемент, будут рассматривать его как HTMLUnknownElement и отображать его дочерние элементы. Это позволяет обеспечить резервный вариант работы для всех пользователей.

Пользовательский резервный шаблон

Программное определение поддержки элемента <usermedia> в JavaScript:

if ('HTMLUserMediaElement' in window) {
  // Use modern <usermedia> element logic
} else {
  // Fallback to legacy getUserMedia() API
}

Используйте эту логику обнаружения, чтобы добавить стандартную кнопку внутри элемента <usermedia> для запуска устаревшего API getUserMedia() :

<usermedia id="stream-handler">
    <button id="fallback-stream-handler">
        Enable Camera and Mic
    </button>
</usermedia>

// Function for handling video/audio streams:
function handleStream (event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // In this case, we have <usermedia> element support:
  const streamHandler = document.getElementById('stream-handler');

  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> element support is missing, so fall back instead:
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');

  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
  });
}

Участники исследования миграции по происхождению

Для разработчиков, которые интегрировали экспериментальный и общий элемент <permission> во время пробного периода Origin, переход к <usermedia> разработан таким образом, чтобы быть минимальным.

1. Обновление тега: Замените <permission type="camera microphone"> на <usermedia> , чтобы гарантировать, что все селекторы, нацеленные на предыдущие элементы <permission> , будут обновлены и будут использовать элемент <usermedia> вместо них.
2. Обнаружение функций: Обновление проверок с HTMLPermissionElement на HTMLUserMediaElement

План дальнейших действий

В то время как элемент <usermedia> обрабатывает комбинированные аудио- и видеозапросы, в планах развития будущих элементов возможностей предусмотрено следующее:

• <camera> : Ориентирована исключительно на сценарии с видеосъемкой.
• <microphone> : Предназначен специально для сценариев, включающих только аудиосвязь.

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

Ссылки по теме

• Элементы возможностей: пояснение элемента <usermedia>
• Спецификация
• Представляем HTML-элемент <geolocation>