MediaDevices

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.

特性

继承特性来自其父级接口 EventTarget .

Events

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

方法

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.

范例

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

规范

规范 状态 Comment
媒体捕获和流
The definition of 'MediaDevices' in that specification.
候选推荐 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
MediaDevices Chrome 47 Edge ≤18 Firefox 33 IE 不支持 No Opera 30 Safari 11 WebView Android 47 Chrome Android 47 Firefox Android 36 Opera Android 30 Safari iOS 11 Samsung Internet Android 5.0
devicechange event Chrome 57 Edge 12 Firefox 52 IE 不支持 No Opera 34 Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android ? Opera Android 43 Safari iOS 不支持 No Samsung Internet Android 不支持 No
enumerateDevices Chrome 47 Edge 12 Firefox 63
注意事项 Disabled
63
注意事项 Disabled
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.
Disabled 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.
39
IE 不支持 No Opera 34 Safari 11 WebView Android 47 Chrome Android 47 Firefox Android 63
注意事项 Disabled
63
注意事项 Disabled
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.
Disabled 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.
39
Opera Android 34 Safari iOS 11 Samsung Internet Android 5.0
getDisplayMedia() Chrome 72
72
70 — 72
注意事项 Disabled
Available as a member of Navigator instead of MediaDevices in Chrome 70 and 71.
Disabled 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 79
79
17
注意事项
Available as a member of Navigator instead of MediaDevices .
Firefox 66
66
33 — 66
注意事项
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 不支持 No Opera 60
60
57 — 60
注意事项 Disabled
Available as a member of Navigator instead of MediaDevices in Opera 57 and 58.
Disabled From version 57 until version 60 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled ).
Safari 13 WebView Android 不支持 No
注意事项
No
注意事项
API is available, but will always fail with NotAllowedError .
Chrome Android 不支持 No Firefox Android 不支持 No
注意事项
No
注意事项
API is available, but will always fail with NotAllowedError .
Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
getSupportedConstraints Chrome 53 Edge 12 Firefox 44 IE 不支持 No Opera 40 Safari 11 WebView Android 53 Chrome Android 52 Firefox Android 50 Opera Android 41 Safari iOS 11 Samsung Internet Android 6.0
getUserMedia Chrome 52
52
47 — 52
注意事项 Disabled
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 12 Firefox 36
注意事项
36
注意事项
Older versions of Firefox implement navigator.mozGetUserMedia , a prefixed form of the legacy navigator.getUserMedia API.
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 .
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.
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 不支持 No Opera 40
40
34 — 40
注意事项 Disabled
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 11 WebView Android 53 Chrome Android 52
52
47 — 52
注意事项 Disabled
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.
Firefox Android 36
注意事项
36
注意事项
Older versions of Firefox implement navigator.mozGetUserMedia , a prefixed form of the legacy navigator.getUserMedia API.
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 .
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.
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 41
41
34 — 41
注意事项 Disabled
Older versions of Opera implement navigator.webkitGetUserMedia , a prefixed form of the legacy navigator.getUserMedia API.
Disabled 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 11 Samsung Internet Android 6.0
ondevicechange Chrome 57 Edge 12 Firefox 52
52
51 — 52
注意事项 Disabled
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 不支持 No Opera 34 Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android Yes Opera Android 34 Safari iOS 不支持 No Samsung Internet Android 不支持 No
Stereo audio capture Chrome ? Edge ? Firefox 55 IE 不支持 No Opera ? Safari 不支持 No WebView Android ? Chrome Android ? Firefox Android 不支持 No Opera Android ? Safari iOS 不支持 No Samsung Internet Android ?

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅