在此页

• 特性
• 事件
• 方法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

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 .

事件

devicechange

Fired when a media input or output device is attached to or removed from the user's computer.
也可用凭借 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);
  }
}
					

规范

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

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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 而不是 MediaDevices in Chrome 70 and 71. Disabled ). To change preferences in Chrome, visit	Edge 79 79 17 注意事项 Available as a member of Navigator 而不是 MediaDevices .	Firefox 66 66 33 — 66 注意事项 Since Firefox 33 you can capture screen data using getUserMedia() ，采用 视频 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 而不是 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 启用 ).	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 ). To change preferences in Chrome, visit	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 视频 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 启用 ).	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 ). To change preferences in Chrome, visit	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 视频 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 启用 ).	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 ). 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 ?

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• Media Capture and Streams API : The API this interface is part of.
• Screen Capture API : The API defining the getDisplayMedia() 方法。
• WebRTC API
• Navigator.mediaDevices : Returns a reference to a MediaDevices object that can be used to access devices.
• CameraCaptureJS: HTML5 video capture and playback using MediaDevices and the MediaStream Recording API ( source on GitHub )
• OpenLang : HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording ( source on GitHub )

元数据

• 最后修改： Apr 3, 2020

相关话题

1. Media Streams API
2. MediaDevices
3. 特性

   1. ondevicechange
4. 方法

   1. enumerateDevices()
   2. getDisplayMedia()
   3. getSupportedConstraints()
   4. getUserMedia()
5. 继承：

   1. EventTarget
6. Related pages for Media Capture and Streams

   1. AudioStreamTrack
   2. BlobEvent
   3. CanvasCaptureMediaStream
   4. ConstrainBoolean
   5. ConstrainDOMString
   6. ConstrainDouble
   7. ConstrainLong
   8. DoubleRange
   9. HTMLCanvasElement.captureStream()
   10. LongRange
   11. MediaStream
   12. MediaStreamTrack
   13. MediaStreamTrackEvent
   14. MediaTrackCapabilities
   15. MediaTrackConstraints
   16. MediaTrackSettings
   17. MediaTrackSupportedConstraints
   18. Navigator.mediaDevices
   19. NavigatorUserMedia
   20. NavigatorUserMediaError
   21. VideoStreamTrack
   22. navigator.mediaDevices.getUserMedia()