The <Usermedia> HTML Element

# Presentamos el elemento HTML <usermedia> | Blog | Chrome for Developers Source: [https://developer.chrome.com/blog/usermedia-html-element?hl=es-419](https://developer.chrome.com/blog/usermedia-html-element?hl=es-419)   Publicado el 29 de junio de 2026 Después del lanzamiento del[elemento`<geolocation\>`](https://developer.chrome.com/blog/geolocation-html-element?hl=es-419)en Chrome 144, el siguiente control funcional en el conjunto de elementos de capacidad es el elemento HTML`<usermedia\>`\. Disponible a partir de Chrome 151, este elemento marca la siguiente fase de la transición de solicitudes de permisos genéricas a controles específicos y funcionales para acceder a transmisiones de cámara y micrófono\. Al alejarse de las indicaciones activadas por secuencias de comandos y acercarse a una experiencia declarativa y activada por el usuario,`<usermedia\>`reduce el código estándar, mejora la seguridad y proporciona una ruta de recuperación fluida para los usuarios que anteriormente denegaron el acceso, lo que resuelve de manera eficaz el problema de permisos que existía desde hace mucho tiempo\. ## Desde la administración de permisos hasta el control de capacidades El elemento`<usermedia\>`es el siguiente control especializado que se lanzará en el conjunto de elementos de capacidad, tras la exitosa introducción de`<geolocation\>`\. Esta transición de la propuesta original y genérica`<permission\>`, que forma parte de la iniciativa PEPC, permite que el navegador controle las complejidades y los comportamientos únicos de las diferentes capacidades de hardware de manera más eficaz\. Si bien la propuesta inicial se centró principalmente en la administración de estados de permisos, como permitir o rechazar, los elementos de capacidad funcionan como mediadores de datos\. El elemento`<geolocation\>`proporciona un objeto de ubicación a tu sitio, y`<usermedia\>`administra todo el flujo para el acceso a la cámara y el micrófono\. Captura la intención del usuario, administra el mensaje del navegador y entrega el objeto`MediaStream`a la aplicación\. Este cambio elimina la necesidad de realizar llamadas`getUserMedia\(\)`separadas, simplifica la implementación y garantiza que el navegador tenga un indicador confiable de la intención del usuario\. ## Validación del concepto Los datos del mundo real de la prueba de origen inicial demostraron que los controles de permisos iniciados por el usuario y en contexto mejoran significativamente las tasas de éxito de los usuarios\. - Cisco observó que los usuarios que inicialmente rechazaron los permisos solo tenían un**10%**de probabilidades de otorgarlos correctamente con los mensajes heredados, pero ese porcentaje aumentó a más del**65%**con el nuevo elemento\. - **Zoom**informó una**disminución del 46\.9%**en los errores de captura de cámara o micrófono, como los bloqueadores a nivel del sistema, gracias al uso del elemento para guiar a los usuarios en la recuperación\. - **Google Meet**registró una**disminución del 17%**en los comentarios sobre el micrófono que no funciona y un**aumento del 131%**en la recuperación exitosa de permisos para los usuarios que inicialmente habían rechazado el acceso\. Basándose en los patrones establecidos por`<geolocation\>`, el elemento`<usermedia\>`aborda los desafíos principales de solicitar capacidades potentes\. Las solicitudes de medios se basan en llamadas imperativas de JavaScript que suelen activar mensajes fuera de contexto\. Si bloqueas tu sitio por accidente, revertir esa decisión requiere navegar profundamente en la configuración del navegador, un "agujero de permisos" que a menudo conduce a funciones abandonadas\. El elemento`<usermedia\>`resuelve estos problemas de la siguiente manera: - **Intención y sincronización claras:**Debido a que el mensaje solo aparece después de un toque físico en un elemento controlado por el navegador, proporciona un indicador de intención confiable\. Esto permite que el navegador omita los bloqueos silenciosos automatizados que suelen provocar que fallen las solicitudes típicas activadas por secuencias de comandos\. - **Recuperación simplificada:**Si se denegó el acceso anteriormente, presionar el elemento activa un flujo de recuperación especializado que te permite volver a habilitar la cámara o el micrófono al instante en la página, sin navegar por la compleja configuración del navegador\. - **Acceso directo al flujo:**Como mediador de datos, el elemento expone el flujo de medios directamente\. Esto reduce el código estándar necesario para administrar las devoluciones de llamada y los estados de error en tu aplicación\. ## Implementación Integrar el elemento requiere mucho menos código estándar que la API de JavaScript heredada\. Siguiendo el patrón declarativo establecido por el elemento`<geolocation\>`, puedes agregar la etiqueta`<usermedia\>`a tu HTML y configurar los requisitos de hardware con el método`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.'); }); ``` ### Atributos y propiedades clave - `stream`: Es una propiedad de solo lectura que proporciona el objeto`MediaStream`una vez que el usuario otorgó acceso correctamente\. - `setConstraints\(\)`: Es un método que permite a los desarrolladores actualizar las preferencias de hardware, como`deviceId`o la resolución, antes de la interacción del usuario\. - `error`: Es una propiedad de solo lectura que devuelve un`DOMException`\(por ejemplo, un`NotAllowedError`\) si la solicitud falla o se descarta\. - `onstream`: Es un controlador de eventos que se activa inmediatamente una vez que se adquieren los segmentos de medios\. - `onerror`: Es un controlador de eventos que se activa cuando falla un intento de adquisición de transmisión\. - `oncancel`: Es un controlador de eventos que se activa cuando el usuario cancela o descarta el mensaje de permiso durante la adquisición\. ### Restricciones de diseño Para garantizar la confianza del usuario y evitar patrones de diseño engañosos, el elemento`<usermedia\>`aplica las mismas restricciones de diseño estrictas que otros elementos de Capability: - **Legibilidad:**El navegador verifica que los colores del texto y del fondo tengan suficiente contraste \(al menos 3:1\) para garantizar que la solicitud siempre sea legible\. Debes establecer el canal alfa \(`opacity`\) en`1`para evitar que el elemento sea engañosamente transparente\. - **Tamaño y espaciado:**El navegador aplica límites mínimos y máximos para`width`,`height`y`font\-size`\. Inhabilita los márgenes negativos o los desplazamientos de contorno para evitar que el elemento se oculte visualmente\. - **Integridad visual:**El navegador limita los efectos de distorsión\. Por ejemplo,`transform`solo admite traducciones en 2D y ajuste de escala proporcional\. - **Seudoclases de CSS:**El elemento admite el diseño basado en estados, como**:granted**\(que se activa una vez que el permiso está activo y se adquiere la transmisión\), así como estados de interacción estándar, como**:hover**y**:active**\. ## Estrategia de mejora progresiva y migración Siguiendo el patrón de diseño establecido por`<geolocation\>`, el elemento`<usermedia\>`se compila para degradarse de forma elegante\. Los navegadores que no admiten el elemento lo tratarán como un`HTMLUnknownElement`y renderizarán sus elementos secundarios\. Esto te permite proporcionar una experiencia alternativa para todos los usuarios\. ### Patrón de resguardo personalizado Detecta de forma programática la compatibilidad con el elemento`<usermedia\>`en JavaScript: ``` if ('HTMLUserMediaElement' in window) { // Use modern <usermedia> element logic } else { // Fallback to legacy getUserMedia() API } ``` Usa esta lógica de detección para agregar un botón estándar dentro del elemento`<usermedia\>`para activar la API heredada de`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); }); } ``` ### Migración para los participantes de la prueba de origen Para los desarrolladores que integraron el elemento`<permission\>`experimental y genérico durante la prueba de origen, la transición a`<usermedia\>`está diseñada para ser mínima\. 1. **Actualización de la etiqueta:**Reemplaza`<permission type="camera microphone"\>`por`<usermedia\>`para asegurarte de que todos los selectores que segmentan los elementos`<permission\>`anteriores se actualicen para usar el elemento`<usermedia\>`en su lugar\. 2. **Detección de funciones:**Se actualizaron las verificaciones de`HTMLPermissionElement`a`HTMLUserMediaElement` ## La hoja de ruta para el futuro Si bien el elemento`<usermedia\>`controla las solicitudes combinadas de audio y video, la hoja de ruta para los futuros elementos de capacidad incluye lo siguiente: - `<camera\>`: Se enfoca específicamente en situaciones solo de video\. - `<microphone\>`: Se enfoca específicamente en situaciones de solo audio\. Puedes ver cómo estos elementos específicos de la capacidad ayudan a los desarrolladores a crear experiencias de medios más intuitivas y confiables\. Para obtener más información, consulta la[guía técnica de los elementos de capacidad](https://github.com/w3c/mediacapture-extensions/blob/main/media-capture-elements-explainer.md)\. - [Elementos de capacidad: Explicación del elemento`<usermedia\>`](https://github.com/w3c/mediacapture-extensions/blob/main/media-capture-elements-explainer.md) - [Especificación](https://w3c.github.io/mediacapture-extensions/#the-usermedia-html-element) - [Presentamos el elemento HTML`<geolocation\>`](https://developer.chrome.com/blog/geolocation-html-element?hl=es-419)