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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 47Edge Full support YesFirefox Full support 36IE No support NoOpera Full support 30Safari No support NoWebView Android Full support 47Chrome Android Full support 47Edge Mobile Full support YesFirefox Android Full support 36Opera Android Full support 30Safari iOS No support NoSamsung Internet Android ?
ondevicechangeChrome Full support 57Edge ? Firefox Full support 52
Full support 52
No support 51 — 52
Notes Disabled
Notes MediaDevices.ondevicechange is supported only on macOS.
Disabled 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 ? Opera Full support 34Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android Full support 34Safari iOS ? Samsung Internet Android ?
enumerateDevicesChrome Full support 47Edge Full support YesFirefox Full support 63
Notes
Full support 63
Notes
Notes Prior to Firefox 63, enumerateDevices() only returned input devices. Starting with Firefox 63, output devices are also included.
Full support 39
IE No support NoOpera Full support 34Safari No support NoWebView Android Full support 47Chrome Android Full support 47Edge Mobile Full support YesFirefox Android Full support 39Opera Android Full support 34Safari iOS No support NoSamsung Internet Android ?
getSupportedConstraintsChrome Full support 53Edge ? Firefox Full support 44IE ? Opera Full support 40Safari Full support 11WebView Android Full support 53Chrome Android Full support 52Edge Mobile ? Firefox Android Full support 50Opera Android Full support 40Safari iOS Full support 11Samsung Internet Android ?
getUserMediaChrome Full support 52
Full support 52
No support 47 — 52
Notes Disabled
Notes Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Disabled 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 Full support YesFirefox Full support 36
Notes
Full support 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.
IE No support NoOpera Full support 40
Full support 40
No support 34 — 40
Notes Disabled
Notes Older versions of Opera implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Disabled From version 34 until version 40 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Safari Full support 11WebView Android Full support 53Chrome Android Full support 52
Full support 52
No support 47 — 52
Notes Disabled
Notes Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Disabled 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 Mobile Full support YesFirefox Android Full support 36
Notes
Full support 36
Notes
Notes Older versions of Firefox implement navigator.mozGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Opera Android Full support 40
Full support 40
No support 34 — 40
Notes Disabled
Notes Older versions of Opera implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
Disabled From version 34 until version 40 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Safari iOS Full support 11Samsung Internet Android ?
Stereo audio captureChrome ? Edge ? Firefox Full support 55IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

문서 태그 및 공헌자

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