前端多媒體（1）——獲取攝像頭&麥克風

時間 2019-11-20

標籤前端多媒體獲取攝像頭麥克風简体版

原文原文鏈接

捕獲視頻/音頻

長久以來，音頻/視頻捕獲都是網絡開發中的「聖盃」。多年來，咱們老是依賴於瀏覽器插件（Flash 或 Silverlight）實現這一點。css

依靠 WebRTC（網絡即時通訊）的大力協助，尋找合適捕獲 API 的步伐加快了不少。該規範由 W3C WebRTC 工做組負責監管。Google、Opera、Mozilla 和其餘一些公司目前正致力於在本身的瀏覽器中實施該 API。html

MediaDevices.getUserMedia() 與 WebRTC 相關，由於它是通向這組 API 的門戶。它提供了訪問用戶本地相機/麥克風媒體流的手段。html5

MediaDevices.getUserMedia()

**MediaDevices.getUserMedia()**方法提示用戶容許使用一個視頻和/或一個音頻輸入設備，例如相機或屏幕共享和/或麥克風。若是用戶給予許可，就返回一個Promise 對象java

注意，因爲用戶不會被要求必須做出容許或者拒絕的選擇，因此返回的Promise對象可能既不會觸發resolve 也不會觸發 reject。git

這裏有一個 Demo【capturing_audio_video】。github

【注意】新版本的視頻獲取接口要用HTTPS協議，不然會拋出錯誤，固然如今在本地訪問經過 localhost, 127.0.0.1 或者文件協議，均可以正常使用web

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.

定義輸出媒體

使用video組件輸出產生的視頻shell

<style type="text/css">
  #video{
    width: 320px;
    height: 180px;
    background-color: #000000;
  }
</style>
<video id="video" autoplay="autoplay" controls="controls"></video>

指定請求的媒體類型和相對應的參數

var constraints = {
  audio: true,
  video: true
};

固然能夠指定視頻源的一些信息，好比攝像頭分辨率，最高、最低、理想的攝像頭分辨率，強制使用後置攝像頭，採樣率。固然你可使用 getSupportedConstraints 方法獲取，瀏覽器支持哪些配置。json

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 ，若是枚舉成功that will be fulfilled with 一個包含MediaDeviceInfo 實例的數組, 它包含了可用的多媒體輸入輸出設備的信息.

navigator
  .mediaDevices
  .enumerateDevices()
  .then(function(MediaDeviceInfo) {
    console.log(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屬性是瀏覽器支持的。

navigator
  .mediaDevices
  .getSupportedConstraints()

{
  "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
}