1 简介
依靠WebRTC(网络即时通信)的大力协助，寻找合适捕获API的步伐加快了很多。该规范由 W3C WebRTC 工作组负责监管。Google、Opera、Mozilla 和其他一些公司目前正致力于在自己的浏览器中实施该 API。
Media.getUserMedia()与WebRTC相关，因为它是通向这组API的门户。它提供了访问用户本地相机/麦克风媒体流的手段。
Media.getUserMedia()提示用户允许使用视频或者音频输入设备。例如相机或者屏幕共享和麦克风。如果用户给予许可，就返回一个Promise对象。由于用户没有被强行要求必须做出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve也不会触发reject。
【注意】新版本的视频获取接口要用HTTPS协议，否则会抛出如下错误，当然现在在本地访问通过 localhost, 127.0.0.1 或者文件协议，都可以正常使用。
capturing_audio_video.html:28 getUserMedia() no longer works on insecure origins. To use this feature,
you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
2 使用（以video为例）
2.1 创建视频组件
<style type="text/css"> #video{ width: 320px; height: 180px; background-color: #000000; } </style> <video id="video" autoplay="autoplay" controls="controls"></video>
2.2 配置
// 指定请求的媒体类型和相对应的参数.可以指定视频源的一些信息，比如摄像头分辨率，最高、最低、理想的摄像头分辨率，强制使用后置摄像头，采样率。
你可以使用 getSupportedConstraints 方法获取，浏览器支持哪些配置。
var constraints = {
audio: false,
video: {
width: 160,
height: 90,
facingMode: { exact: "environment" }, frameRate: { ideal: 10, max: 15 }
};
// 获取视频资源
navigator
.mediaDevices
.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector(‘video‘);
video.srcObject = mediaStream
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(error) {
console.log(error);
});
