MediaDevices

L'interface MediaDevices permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.

Propriétés

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

Événéments

devicechange
Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.
Egalement disponible via la propriété ondevicechange.

Méthodes

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

enumerateDevices()
Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.
getSupportedConstraints()
Renvoie un objet conforme à MediaTrackSupportedConstraints indiquant quelles propriétés de contrainte sont prises en charge sur l'interface MediaStreamTrack. Consultez Capabilities and constraints in Media Capture and Streams API (Media Stream) pour en savoir plus sur les contraintes et comment les utiliser.
getDisplayMedia()
Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que MediaStream à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un MediaStream.
getUserMedia()
Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un MediaStream contenant une piste vidéo et / ou une piste audio avec l'entrée.

Exemple

'use strict';

// Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
var video = document.querySelector('video');
var constraints = window.constraints = {
  audio: false,
  video: true
};
var errorElement = document.querySelector('#errorMsg');

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  var videoTracks = stream.getVideoTracks();
  console.log('Got stream with constraints:', constraints);
  console.log('Using video device: ' + videoTracks[0].label);
  stream.onremovetrack = function() {
    console.log('Stream ended');
  };
  window.stream = stream; // rendre la variable disponible dans la console du navigateur
  video.srcObject = stream;
})
.catch(function(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
        constraints.video.height.exact + ' px is not supported by your device.');
  } else if (error.name === 'PermissionDeniedError') {
    errorMsg('Permissions have not been granted to use your camera and ' +
      'microphone, you need to allow the page access to your devices in ' +
      'order for the demo to work.');
  }
  errorMsg('getUserMedia error: ' + error.name, error);
});

function errorMsg(msg, error) {
  errorElement.innerHTML += '<p>' + msg + '</p>';
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

Spécifications

Spécification Statut Commentaire
Media Capture and Streams
La définition de 'MediaDevices' dans cette spécification.
Candidat au statut de recommandation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
MediaDevicesChrome Support complet 47Edge Support complet 12Firefox Support complet 33IE Aucun support NonOpera Support complet 30Safari Support complet 11WebView Android Support complet 47Chrome Android Support complet 47Firefox Android Support complet 36Opera Android Support complet 30Safari iOS Support complet 11Samsung Internet Android Support complet 5.0
devicechange eventChrome Support complet 57Edge Support complet 12Firefox Support complet 52IE Aucun support NonOpera Support complet 34Safari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android ? Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
enumerateDevicesChrome Support complet 47Edge Support complet 12Firefox Support complet 63
Notes Désactivée
Support complet 63
Notes Désactivée
Notes Prior to Firefox 63, enumerateDevices() only returned input devices. Starting with Firefox 63, output devices are also included if the media.setsinkid.enabled preference is enabled.
Désactivée From version 63: this feature is behind the media.setsinkid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 39
IE Aucun support NonOpera Support complet 34Safari Support complet 11WebView Android Support complet 47Chrome Android Support complet 47Firefox Android Support complet 63
Notes Désactivée
Support complet 63
Notes Désactivée
Notes Prior to Firefox 63, enumerateDevices() only returned input devices. Starting with Firefox 63, output devices are also included if the media.setsinkid.enabled preference is enabled.
Désactivée From version 63: this feature is behind the media.setsinkid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 39
Opera Android Support complet 34Safari iOS Support complet 11Samsung Internet Android Support complet 5.0
getDisplayMedia()Chrome Support complet 72
Support complet 72
Aucun support 70 — 72
Notes Désactivée
Notes Available as a member of Navigator instead of MediaDevices in Chrome 70 and 71.
Désactivée From version 70 until version 72 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Support complet 79
Support complet 79
Support complet 17
Notes
Notes Available as a member of Navigator instead of MediaDevices.
Firefox Support complet 66
Support complet 66
Aucun support 33 — 66
Notes
Notes Since Firefox 33 you can capture screen data using getUserMedia(), with a video constraint called mediaSource. Prior to 52 it relied on a client-configurable list of allowed sites.
IE Aucun support NonOpera Support complet 60
Support complet 60
Aucun support 57 — 60
Notes Désactivée
Notes Available as a member of Navigator instead of MediaDevices in Opera 57 and 58.
Désactivée From version 57 until version 60 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Safari Support complet 13WebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes API is available, but will always fail with NotAllowedError.
Chrome Android Aucun support NonFirefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes API is available, but will always fail with NotAllowedError.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
getSupportedConstraintsChrome Support complet 53Edge Support complet 12Firefox Support complet 44IE Aucun support NonOpera Support complet 40Safari Support complet 11WebView Android Support complet 53Chrome Android Support complet 52Firefox Android Support complet 50Opera Android Support complet 41Safari iOS Support complet 11Samsung Internet Android Support complet 6.0
getUserMediaChrome Support complet 53
Notes
Support complet 53
Notes
Notes If you need this capability before version 53, refer to navigator.webkitGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
Edge Support complet 12Firefox Support complet 36
Notes
Support complet 36
Notes
Notes If you need this capability before version 36, refer to navigator.mozGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
Notes Before Firefox 55, getUserMedia() incorrectly returns NotSupportedError when the list of constraints specified is empty, or has all constraints set to false. Starting in Firefox 55, this situation now correctly calls the failure handler with a TypeError.
Notes When using the Firefox-specific video constraint called mediaSource to request display capture, Firefox 66 and later consider values of screen and window to both cause a list of screens and windows to be shown.
Notes Starting in Firefox 66, getUserMedia() can no longer be used in sandboxed <iframe>s or data URLs entered in the address bar by the user.
IE Aucun support NonOpera Support complet 40
Notes
Support complet 40
Notes
Notes If you need this capability before version 40, refer to navigator.webkitGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
Safari Support complet 11WebView Android Support complet 53Chrome Android Support complet 53
Notes
Support complet 53
Notes
Notes If you need this capability before version 53, refer to navigator.webkitGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
Firefox Android Support complet 36
Notes
Support complet 36
Notes
Notes If you need this capability before version 36, refer to navigator.mozGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
Notes Before Firefox 55, getUserMedia() incorrectly returns NotSupportedError when the list of constraints specified is empty, or has all constraints set to false. Starting in Firefox 55, this situation now correctly calls the failure handler with a TypeError.
Notes When using the Firefox-specific video constraint called mediaSource to request display capture, Firefox 66 and later consider values of screen and window to both cause a list of screens and windows to be shown.
Notes Starting in Firefox 66, getUserMedia() can no longer be used in sandboxed <iframe>s or data URLs entered in the address bar by the user.
Opera Android Support complet 41
Notes
Support complet 41
Notes
Notes If you need this capability before version 41, refer to navigator.webkitGetUserMedia, a prefixed form of the deprecated navigator.getUserMedia API.
Safari iOS Support complet 11Samsung Internet Android Support complet 6.0
ondevicechangeChrome Support complet 57Edge Support complet 12Firefox Support complet 52
Support complet 52
Aucun support 51 — 52
Notes Désactivée
Notes MediaDevices.ondevicechange is supported only on macOS.
Désactivée From version 51 until version 52 (exclusive): this feature is behind the media.ondevicechange.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 34Safari Support complet 11WebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet OuiOpera Android Support complet 34Safari iOS Support complet 11Samsung Internet Android Aucun support Non
Stereo audio captureChrome ? Edge ? Firefox Support complet 55IE Aucun support NonOpera ? Safari Aucun support NonWebView Android ? Chrome Android ? Firefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi