MediaDevices

Cette traduction est incomplète. Aidez-nous à traduire cet article depuis l’anglais

The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data.

Propriétés

Inherits properties from its parent interface, EventTarget.

Événéments

devicechange
Fired when a media input or output device is attached to or removed from the user's computer.
Also available via the ondevicechange property.

Méthodes

Inherits methods from its parent interface, EventTarget.

enumerateDevices()
Obtains an array of information about the media input and output devices available on the system.
getSupportedConstraints()
Returns an object conforming to MediaTrackSupportedConstraints indicating which constrainable properties are supported on the MediaStreamTrack interface. See Capabilities and constraints in Media Capture and Streams API (Media Stream) to learn more about constraints and how to use them.
getDisplayMedia()
Prompts the user to select a display or portion of a display (such as a window) to capture as a MediaStream for sharing or recording purposes. Returns a promise that resolves to a MediaStream.
getUserMedia()
With the user's permission through a prompt, turns on a camera and/or a microphone on the system and provides a MediaStream containing a video track and/or an audio track with the input.

Exemple

'use strict';

// Put variables in global scope to make them available to the browser console.
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; // make variable available to browser console
  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 ≤18Firefox 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 52
Support complet 52
Aucun support 47 — 52
Notes Désactivée
Notes Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Désactivée From version 47 until version 52 (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 12Firefox Support complet 36
Notes
Support complet 36
Notes
Notes Older versions of Firefox implement navigator.mozGetUserMedia, a prefixed form of the legacy 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
Support complet 40
Aucun support 34 — 40
Notes Désactivée
Notes Older versions of Opera implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Désactivée From version 34 until version 40 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Safari Support complet 11WebView Android Support complet 53Chrome Android Support complet 52
Support complet 52
Aucun support 47 — 52
Notes Désactivée
Notes Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Désactivée From version 47 until version 52 (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.
Firefox Android Support complet 36
Notes
Support complet 36
Notes
Notes Older versions of Firefox implement navigator.mozGetUserMedia, a prefixed form of the legacy 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
Support complet 41
Aucun support 34 — 41
Notes Désactivée
Notes Older versions of Opera implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Désactivée From version 34 until version 41 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
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 Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet OuiOpera Android Support complet 34Safari iOS Aucun support NonSamsung 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