이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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 Yes39 No34 No
getSupportedConstraints53 ?44 ?4011
getUserMedia

52

47 — 523 4

Yes365 6 No

40

34 — 407 8

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 — 523 4

Yes365

40

34 — 407 8

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. Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.

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

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

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

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

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

문서 태그 및 공헌자

이 페이지의 공헌자: fscholz
최종 변경자: fscholz,