Web技术之-调用相机和麦克风（Navigator.mediaDevices）

介绍：

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

语法：

var mediaDevices = navigator.mediaDevices;

MediaDevices 是一个单例对象。通常，您只需直接使用此对象的成员，例如通过调用navigator.mediaDevices.getUserMedia()。

MediaDevices.getUserMedia()介绍：

api文档地址

navigator.mediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

MediaDevices.getUserMedia()的基本语法：

navigator.mediaDevices.getUserMedia(constraints)
//constraints配置信息，见下文
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

constraints参数：

作为一个MediaStreamConstraints 对象，指定了请求的媒体类型和相对应的参数。

constraints 参数是一个包含video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。

以下同请求音频和视频：

{ audio: true, video: true }

如果为某种媒体类型设置了 true ，得到的结果的流中就需要有此种类型的轨道。如果其中一个由于某种原因无法获得，getUserMedia() 将会产生一个错误。

下面演示了应用想要使用1280x720的摄像头分辨率：

{
  audio: true,
  video: { width: 1280, height: 720 }
}

并不是所有的constraints 都是数字 。例如, 在移动设备上面，如下的例子表示优先使用前置摄像头（如果有的话）：

{ audio: true, video: { facingMode: "user" } }

强制使用后置摄像头，请用：

{ audio: true, video: { facingMode: { exact: "environment" } } }

帧率
在某些情况下，比如WebRTC上使用受限带宽传输时，低帧率可能更适宜。

{ video: { frameRate: { ideal: 10, max: 15 } } };

返回值:

返回一个 Promise ， 这个Promise成功后的回调函数带一个 MediaStream 对象作为其参数。

完整示例代码：

这个例子设置了摄像头分辨率，并把结果的 MediaStream 分配给了一个video元素。

// 想要获取一个最接近 1280x720 的相机分辨率
var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误

检查浏览器是否支持getUserMedia方法：

navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;
 
if (navigator.getUserMedia) {
    // 支持
} else {
    // 不支持
}