Comment utiliser getUserMedia ()

Découvrez comment utiliser getUserMedia () pour accéder aux entrées audio et vidéo de l'utilisateur

LeMediaDevicesobjet exposé parnavigator.mediaDevicesnous donne legetUserMediaméthode.

Attention: lenavigatorobjet expose ungetUserMedia()méthode également, qui peut toujours fonctionner mais qui estobsolète. L'API a été déplacée dans lemediaDevicesobjet à des fins de cohérence.

C'est ainsi que nous pouvons utiliser cette méthode.

Disons que nous avons un bouton:

<button>Start streaming</button>

Nous attendons que l'utilisateur clique sur ce bouton, et nous appelons lenavigator.mediaDevices.getUserMedia()méthode.

On passe un objet qui décrit les contraintes médiatiques que l'on souhaite Si nous voulons une entrée vidéo, nous appellerons

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

Nous pouvons être très précis avec ces contraintes:

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

Vous pouvez obtenir une liste de toutes les contraintes prises en charge par l'appareil en appelantnavigator.mediaDevices.getSupportedConstraints().

Si nous voulons juste l'audio, nous pouvons passeraudio: true:

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

et si nous voulons les deux:

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

Cette méthode renvoie une promesse, nous allons donc utiliser async / await pour obtenir le résultat dans unstreamvariable:

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

Cliquer sur le bouton déclenchera un panneau dans le navigateur pour autoriser l'autorisation d'utiliser les périphériques multimédias:

The permission screen

Voir sur Codepen:https://codepen.io/flaviocopes/pen/WWyGmr

Une fois que nous avons terminé, lestreamobjet que nous avons obtenugetUserMedia()peut maintenant être utilisé pour diverses choses. Le plus immédiat est d'afficher le flux vidéo dans unvideoélément de la page:

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

Voir sur Codepen:https://codepen.io/flaviocopes/pen/wZXzbB

Un exemple

Voici un exemple de Codepen qui vous demande d'accéder à la caméra vidéo et lit la vidéo dans la page:

Voir le styloExemple simple WebRTC MediaStreampar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!