MediaDevices

L'interface MediaDevices permet d'accéder aux périphériques média d'entrée tels que les caméras, micros, mais aussi le partage d'écran. Autrement dit, elle fournit un accès à toute source matérielle de données média.

Propriétés des instances

Hérite des propriétés de son interface parente, EventTarget.

Méthodes des instances

Hérite des méthodes de son interface parente, EventTarget.

enumerateDevices() (en-US): Fournit un tableau d'informations sur les appareils média (en entrée et en sortie) disponibles sur le système.
getSupportedConstraints() (en-US): Renvoie un objet dont le format respecte MediaTrackSupportedConstraints (en-US) et qui indique les propriétés contraintes qui sont prises en charge par l'interface MediaStreamTrack (en-US). Voir l'API Media Streams pour en savoir plus à propos des contraintes et leur utilisation.
getDisplayMedia() (en-US): Demande à la personne de sélectionner un affichage ou une portion d'un affichage (par exemple une fenêtre) pour le/la capturer comme MediaStream à des fins de partage ou d'enregistrement. Cette méthode renvoie une promesse qui se résout en MediaStream.
getUserMedia(): Après avoir demandé la permission à la personne, active la caméra ou le micro du système et fournit un flux MediaStream contenant une piste vidéo et/ou audio correspondante.
selectedAudioOutput() (en-US) Expérimental: Demande à la personne de sélectionner un appareil de sortie audio en particulier.

Évènements

devicechange (en-US): Déclenché lorsqu'un média d'entrée ou de sortie de l'appareil est connecté ou débranché de l'ordinateur de la personne.

Exemple

// On place ces variables dans la portée globale afin d'y avoir
// accès dans la console du navigateur.
const video = document.querySelector('video');
const constraints = {
  audio: false,
  video: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log('Flux obtenu avec des contraintes :', constraints);
    console.log(`Utilisation de l'appareil vidéo : ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log('Flux terminé');
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === 'ConstraintNotSatisfiedError') {
      console.error(
        `La résolution ${constraints.video.width.exact}x${constraints.video.height.exact} px n'est pas prise en charge par votre appareil.`
      );
    } else if (error.name === 'PermissionDeniedError') {
      console.error(
        "Les permissions nécessaires pour utiliser votre caméra ou votre micro " +
        "n'ont pas été fournies. Vous devez autoriser l'accès à vos appareils " +
        "depuis cette page afin que la démonstration fonctionne."
      );
    } else {
      console.error(`Erreur getUserMedia : ${error.name}`, error);
    }
  });

Spécifications

Specification
Media Capture and Streams # mediadevices

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

L'API de capture et des flux multimédia : l'API à laquelle appartient cette interface.
L'API de capture d'écran : l'API qui définit la méthode getDisplayMedia() (en-US).
L'API WebRTC
Navigator.mediaDevices (en-US) qui fournit une référence à un objet MediaDevices permettant d'accéder aux appareils.