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

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 配置

// 指定请求的媒体类型和相对应的参数.能够指定视频源的一些信息，好比摄像头分辨率，最高、最低、理想的摄像头分辨率，强制使用后置摄像头，采样率。
你可使用  方法获取，浏览器支持哪些配置。
var constraints = {
  audio: false, 
 video: { 
　　　　width: 160, 
　　　　height: 90, 
　　　　facingMode: { exact: "environment" }, frameRate: { ideal: 10, max: 15 }
};

 获取视频资源getSupportedConstraints

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
}