前端：獲取攝像頭&麥克風

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
}