MediaDevices

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

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.

EventTarget MediaDevices

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()

Fournit un tableau d'informations sur les appareils média (en entrée et en sortie) disponibles sur le système.

getSupportedConstraints()

Renvoie un objet dont le format respecte MediaTrackSupportedConstraints et qui indique les propriétés contraintes qui sont prises en charge par l'interface MediaStreamTrack. Voir l'API Media Streams pour en savoir plus à propos des contraintes et leur utilisation.

getDisplayMedia()

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()

Demande à la personne de sélectionner un appareil de sortie audio en particulier.

Évènements

devicechange

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

js
// 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