前端：获取摄像头&麦克风

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);
  });

 

 收集系统上可用的多媒体输入和输出设备信息

 enumerateDevices用于收集系统上可用的多媒体输入和输出设备的信息。该方法返回一个Promise对象，如果枚举成功，成功的then 回调函数带有一个MediaDeviceInfo的参数。

navigator
  .mediaDevices
  .enumerateDevices()
  .then(function(MediaDeviceInfo) {
    console.log(MediaDeviceInfo);
  })
// 输出MediaDeviceInfo为：
[
  {
    "deviceId": "default",
    "kind": "audioinput",
    "label": "Default",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  },
  {
    "deviceId": "e38a9b92758f008e71510a95aa36957553e2a5ce7febc6e4bcd57798807c1519",
    "kind": "audioinput",
    "label": "Built-in Microphone",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  },
  {
    "deviceId": "5013c01eb0a704c09d15aa668601f8dfb80f1a33d179b2adcbb64a8fbad5fc62",
    "kind": "videoinput",
    "label": "FaceTime HD Camera",
    "groupId": ""
  },
  {
    "deviceId": "default",
    "kind": "audiooutput",
    "label": "Default",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  },
  {
    "deviceId": "ba0bb7502f314e3ad61511aa6468c6a48ec679e34e5ebd975852db1d8d3ab3e7",
    "kind": "audiooutput",
    "label": "Built-in Output",
    "groupId": "50ec3ed5a0cff9ab1c4c5ee9aa81db10c37162fca33c03dc9b5a191dedb2e8e4"
  }
]

　　

获取用户支持的Constraints

 通过 MediaDevices.getSupportedConstraints() 方法可以返回一个基于 MediaTrackSupportedConstraints 的对象，它包含哪些Constraints属性是浏览器支持的， 例如帧率、窗口大小等。

var supportedConstraints = navigator.mediaDevices.getSupportedConstraints()
// 输出supportedConstraints
{
  "aspectRatio": true, //采集比例
  "channelCount": true,
  "deviceId": true,
  "echoCancellation": true,
  "facingMode": true,
  "frameRate": true,
  "groupId": true,
  "height": true,
  "latency": true, //延迟
  "sampleRate": true,
  "sampleSize": true,
  "volume": true,
  "width": true
}