Cómo utilizar getUserMedia()

Descubra cómo utilizar getUserMedia() para obtener acceso a la entrada de audio y vídeo del usuario.

El MediaDevicesobjeto expuesto por navigator.mediaDevicesnosotros del getUserMediamétodo.

Advertencia: el objeto también navigatorexpone un método que podría seguir funcionando, pero está obsoleto . La API se ha movido dentro del objeto por motivos de coherencia.getUserMedia()mediaDevices

Así es como podemos utilizar este método.

Digamos que tenemos un botón:

buttonStart streaming/button

Esperamos hasta que el usuario haga clic en este botón y llamamos al navigator.mediaDevices.getUserMedia()método.

Pasamos un objeto que describe las restricciones de medios que queremos. Si queremos una entrada de video, llamaremos

navigator.mediaDevices.getUserMedia({  video: true,})

Podemos ser muy específicos con esas restricciones:

navigator.mediaDevices.getUserMedia({  video: {    minAspectRatio: 1.333,    minFrameRate: 60,    width: 640,    heigth: 480,  },})

Puede obtener una lista de todas las restricciones admitidas por el dispositivo llamando al navigator.mediaDevices.getSupportedConstraints().

Si solo queremos el audio podemos pasar audio: true:

navigator.mediaDevices.getUserMedia({  audio: true,})

y si queremos ambos:

navigator.mediaDevices.getUserMedia({  video: true,  audio: true,})

Este método devuelve una promesa, por lo que usaremos async/await para obtener el resultado en una streamvariable:

document.querySelector('button').addEventListener('click', async (e) = {  const stream = await navigator.mediaDevices.getUserMedia({    video: true,  })})

Al hacer clic en el botón, se activará un panel en el navegador para otorgar permiso para usar los dispositivos multimedia:

Ver en Codepen: https://codepen.io/flaviocopes/pen/WWyGmr

Una vez que hayamos terminado, el streamobjeto que obtuvimos getUserMedia()se puede utilizar para varias cosas. La más inmediata es mostrar la secuencia de vídeo en un videoelemento de la página:

buttonStart streaming/button video autoplayStart streaming/video

document.querySelector('button').addEventListener('click', async (e) = {  const stream = await navigator.mediaDevices.getUserMedia({    video: true,  })  document.querySelector('video').srcObject = stream})

Ver en Codepen: https://codepen.io/flaviocopes/pen/wZXzbB

Aquí hay un ejemplo de Codepen que le pide acceder a la cámara de video y reproducir el video en la página:

Agregamos un botón para acceder a la cámara, luego agregamos un videoelemento, con el autoplayatributo.

buttonGet access to camera/button video autoplay/video

El JS escucha si se hace clic en el botón y luego realiza una llamada navigator.mediaDevices.getUserMedia()para solicitar el video. Luego, accedemos al nombre de la cámara utilizada llamando stream.getVideoTracks()al resultado de la llamada a getUserMedia().

La transmisión está configurada para ser el objeto de origen de la videoetiqueta, de modo que la reproducción pueda realizarse:

document  .querySelector('#get-access')  .addEventListener('click', async function init(e) {    try {      const stream = await navigator.mediaDevices.getUserMedia({        video: true,      })      document.querySelector('video').srcObject = stream      document.querySelector('#get-access').setAttribute('hidden', true)      setTimeout(() = {        track.stop()      }, 3 * 1000)    } catch (error) {      alert(`${error.name}`)      console.error(error)    }  })

Los argumentos de getUserMedia() pueden especificar requisitos adicionales para la transmisión de vídeo:

navigator.mediaDevices.getUserMedia(  {    video: {      mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },      optional: [{ minFrameRate: 60 }, { maxWidth: 640 }, { maxHeigth: 480 }],    },  },  successCallback,  errorCallback,)

Para obtener una transmisión de audio, también solicitaría el objeto multimedia de audio y llamaría a stream.getAudioTracks()en lugar de stream.getVideoTracks().

Después de 3 segundos de reproducción, detenemos la transmisión del vídeo llamando al track.stop().

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase