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.

* Some parts of this feature may have varying levels of support.

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() Expérimental

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaDevices
devicechange event
enumerateDevices
getDisplayMedia()
Audio capture support
controller option
Experimental
monitorTypeSurfaces option
Experimental
preferCurrentTab option
ExperimentalNon-standard
selfBrowserSurface option
Experimental
surfaceSwitching option
Experimental
systemAudio option
Experimental
getSupportedConstraints
getUserMedia
Secure context required
selectAudioOutput
Experimental
setCaptureHandleConfig
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Voir aussi