Acceso a la cámara del navegador mediante getUserMedia

Concepto fundamental

La interfaz navigator.mediaDevices.getUserMedia proporciona acceso a la cámara y micrófono del usuario desde una aplicación web. Este método solicita permisos al usuario y, si se conceden, devuelve una promesa que resuelve con un objeto MediaStream que contiene las pistas de audio y/o video solicitadas.

Si el usuario deniega el permiso o el dispositivo solicitado no está disponible, la promesa es rechazada con un error específico como NotAllowedError o NotFoundError. Es importante notar que la promesa puede permanecer en estado pendiente si el usuario no responde al diálogo de permisos.

Sintaxis y uso básico

const configuracion = { video: true };
navigator.mediaDevices.getUserMedia(configuracion)
  .then(streamMedia => {
    // Utilizar el streamMedia
  })
  .catch(errorAcceso => {
    // Manejar el error
  });

Parámetros de configuración

El parámetro configuracion es un objeto que especifica los requisitos de los medios mediante las propiedades video y audio. Al menos una de ellas debe estar presente.

Solicitud básica

const configuracionSimple = {
  video: true,
  audio: true
};

Especificación de resolución

const configuracionHD = {
  video: { 
    ancho: 1280, 
    alto: 720 
  }
};

Para imponer restricciones más estrictas, se pueden utilizar las propiedades min, max e exact:

const configuracionMinima = {
  video: {
    ancho: { minimo: 1024, ideal: 1920 },
    alto: { minimo: 768, ideal: 1080 }
  }
};

Selección de cámara

En dispositivos con múltiples cámaras, se puede indicar la preferencia:

const usarCamaraFrontal = {
  video: { modoOrientacion: "user" }
};

const usarCamaraTrasera = {
  video: { modoOrientacion: { exacto: "environment" } }
};

Valor de retorno

La función devuelve una promesa que, al resolverse, proporciona un objeto MediaStream con los medios capturados. Este stream puede asignarse directamente a elementos multimedia en el DOM.

Ejemplo completo de implementación


<html lang="es">
<head>
    <title>Captura de video en vivo</title>
</head>
<body>
    <video id="visorVideo" autoplay playsinline></video>
    <button id="btnIniciar">Iniciar captura</button>
    <script>
        const videoElemento = document.getElementById('visorVideo');
        const botonIniciar = document.getElementById('btnIniciar');
        
        async function activarCaptura() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: true
                });
                videoElemento.srcObject = stream;
            } catch (error) {
                console.error('Error al acceder al dispositivo:', error);
            }
        }
        
        botonIniciar.addEventListener('click', activarCaptura);
    </script>
</body>
</html>

Nota importante: Incluir el atrbiuto muted en el elemento <video> evita el eco del audio del usuario, aunque el stream sí contiene la pista de audio.

Referencai: Documentación MDN sobre getUserMedia

Etiquetas: getUserMedia MediaDevices MediaStream WebRTC JavaScript

Publicado el 6-11 02:36

Friki Work