MediaDevices - Web API 接口参考编辑

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

事件

devicechange: 返回 devicechange 事件类型的事件处理程序。
也可通过 ondevicechange 访问

方法

从其父项继承方法 EventTarget.

MediaDevices.enumerateDevices(): 获取有关系统中可用的媒体输入和输出设备的一系列信息。
getSupportedConstraints(): 返回一个符合 MediaTrackSupportedConstraints 的对象。该对象指明了 MediaStreamTrack 接口支持的可约束的属性。查看 Capabilities and constraints in Media Capture and Streams API (Media Stream) 去了解更多相关信息。
getDisplayMedia(): 提示用户选择显示器或显示器的一部分（例如窗口）以捕获为MediaStream 以便共享或记录。返回解析为MediaStream的Promise。
MediaDevices.getUserMedia(): 在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

示例

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

规范

规范	状态	评论
Media Capture and Streams MediaDevices	Candidate Recommendation	初始定义

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.

参见

Media Capture and Streams API: The API this interface is part of.
Screen Capture API: The API defining the getDisplayMedia() method.
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)