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.

Properties

Inherits properties from its parent EventTarget.

Event handlers

MediaDevices.ondevicechange
The event handler for the devicechange event. This event is delivered to the MediaDevices object when a media input or output device is attached to or removed from the user's computer.

Methods

Inherits methods from its parent EventTarget.

EventTarget.addEventListener()
Registers an event handler to a specific event type.
MediaDevices.enumerateDevices()
Obtains an array of information about the media input and output devices available on the system.
MediaDevices.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 Streams) to learn more about constraints and how to use them.
MediaDevices.getUserMedia()
With the user's permission through a prompt, turns on a camera or screensharing and/or a microphone on the system and provides a MediaStream containing a video track and/or an audio track with the input.
EventTarget.removeEventListener()
Removes an event listener.

Example

'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.width.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);
  }
}

Specifications

Specification Status Comment
Media Capture and Streams
The definition of 'MediaDevices' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support47 Yes36 No30 No
ondevicechange57 ?

52

51 — 521 2

?34 ?
enumerateDevices47 Yes

633

39

No34 No
getSupportedConstraints53 ?44 ?4011
getUserMedia

52

47 — 524 5

Yes366 7 No

40

34 — 408 9

11
Stereo audio capture ? ?55 No ? No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support4747 Yes3630 No ?
ondevicechange No No ? ?34 ? ?
enumerateDevices4747 Yes3934 No ?
getSupportedConstraints5352 ?504011 ?
getUserMedia53

52

47 — 524 5

Yes366

40

34 — 408 9

11 ?
Stereo audio capture ? ? ? No ? No ?

1. MediaDevices.ondevicechange is supported only on macOS.

2. 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.

3. Prior to Firefox 63, enumerateDevices() only returned input devices. Starting with Firefox 63, output devices are also included.

4. Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.

5. 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.

6. Older versions of Firefox implement navigator.mozGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.

7. 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.

8. Older versions of Opera implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.

9. From version 34 until version 40 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).

See also

Document Tags and Contributors

Last updated by: fscholz,