MediaDevices - 提供对连接媒体输入设备以及屏幕共享的访问

MediaDevices 接口提供对连接媒体输入设备（如摄像头和麦克风）以及屏幕共享的访问。实质上，它允许您访问任何媒体数据的硬件源。

属性

从其父接口 EventTarget 继承了属性。

事件

devicechange

将媒体输入或输出设备连接到用户的计算机或从用户的计算机上卸下时触发。
也可以通过 ondevicechange 属性绑定。

方法

从其父接口 EventTarget 继承了方法。

enumerateDevices()

获取有关系统上可用的媒体输入和输出设备的一系列信息。

getSupportedConstraints()

返回符合 MediaTrackSupportedConstraints 的对象，指示 MediaStreamTrack 接口支持哪些可约束属性。请参阅"功能和约束" in undefined以了解有关约束以及如何使用它们的更多信息。

getDisplayMedia()

返回一个解析为 MediaStream 的 promise。提示用户选择显示器或显示器的一部分（例如窗口）以捕获为 MediaStream 以用于共享或记录目的。

getUserMedia()

在用户通过提示的许可下，打开系统上的摄像头和/或麦克风，并提供包含视频轨道和/或音频轨道的 MediaStream。

实例

'use strict';

// 将变量放在全局范围内，以使其可供浏览器控制台使用。
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('获得符合约束条件的流：', constraints);
  console.log('使用视频设备：' + videoTracks[0].label);
  stream.onremovetrack = function() {
    console.log('视频流结束了');
  };
  window.stream = stream; // 使变量可用于浏览器控制台
  video.srcObject = stream;
})
.catch(function(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    errorMsg('您的设备不支持 ' + constraints.video.width.exact + 'x' +
        constraints.video.width.exact + ' 分辨率');
  } else if (error.name === 'PermissionDeniedError') {
    errorMsg('未授予使用相机和麦克风的权限，您需要允许页面访问您的设备才能使该演示工作。');
  }
  errorMsg('getUserMedia 错误：' + error.name, error);
});

function errorMsg(msg, error) {
  errorElement.innerHTML += '<p>' + msg + '</p>';
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

规范

规范	状态	备注
Media Capture and Streams MediaDevices 的定义	编者的草案	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• Media Capture and Streams API：这个接口是 API 的一部分。
• Screen Capture API：该 API 定义了 getDisplayMedia() 方法。
• WebRTC API
• Navigator.mediaDevices：返回对可用于访问设备的 MediaDevices 对象的引用。
• CameraCaptureJS：使用 MediaDevices 和 MediaStream Recording API 进行 HTML5 视频捕获和回放(GitHub 上的源码)
• OpenLang：使用 MediaDevices 和 MediaStream Recording API 进行视频录制的 HTML5 视频语言实验室 Web 应用程序(GitHub 上的源码)