Breaking

Post Top Ad

Your Ad Spot

martes, 14 de enero de 2020

Cómo usar getUserMedia ()

El MediaDevicesobjeto expuesto por navigator.mediaDevicesnos da el getUserMediamétodo.
Advertencia: el navigatorobjeto también expone un getUserMedia()método, que aún podría funcionar pero está en desuso . La API se ha movido dentro del mediaDevicesobjeto con fines de coherencia.
Así es como podemos usar este método.
Digamos que tenemos un botón:
<button>Start 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 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 permitir el permiso para usar los dispositivos multimedia:
La pantalla de permisos
Una vez que hayamos terminado, el streamobjeto que obtuvimos getUserMedia()ahora se puede usar para varias cosas. Lo más inmediato es mostrar la transmisión de video en un videoelemento de la página:
<button>Start streaming</button>
<video autoplay>Start streaming</button>
document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
  document.querySelector('video').srcObject = stream
})

Un ejemplo

Aquí hay un ejemplo de Codepen que le pide que acceda a la cámara de video y reproduzca el video en la página:
Agregamos un botón para acceder a la cámara, luego agregamos un videoelemento con el autoplayatributo.
<button id="get-access">Get access to camera</button>
<video autoplay></video>
El JS escucha un clic en el botón, luego llama navigator.mediaDevices.getUserMedia()pidiendo el video. Luego accedemos al nombre de la cámara utilizada llamando stream.getVideoTracks()al resultado de la llamada a getUserMedia().
La secuencia está configurada para ser el objeto fuente de la videoetiqueta, de modo que la reproducción pueda ocurrir:
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 video:
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 debe solicitar el objeto de medios de audio y llamar en stream.getAudioTracks()lugar de stream.getVideoTracks().
Después de 3 segundos de reproducción, detenemos la transmisión de video llamando track.stop().

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas