使用媒體捕獲API

>本文探討了媒體捕獲和流媒體API（getusermedia），使網頁能夠訪問沒有插件的網絡攝像頭和麥克風。 得到包括Chrome，Opera，Firefox和Edge在內的主要瀏覽器的支持。

>

> API提供視頻，音頻和圖像捕獲；控制相機設置（分辨率，幀速率，焦點）；多相機支持；並與其他API集成。 應用程序範圍從視頻聊天到社交媒體內容創建。需要使用用戶權限，並且功能可用性在設備和瀏覽器之間各不相同。

>

關鍵功能：

> API的中心

getUserMedia()方法使用MediaStreamConstraints。 enumerateDevices()>幫助通過其deviceId選擇特定的設備。 成功的呼叫返回MediaStream對象。

>瀏覽器兼容性：

API

擁有廣泛的支持，可以追溯到Chrome 21，Opera 18和Firefox 17，最近還增加了Edge。 ModernIzr簡化了瀏覽器兼容性檢查。 沒有現代化，需要進行手動檢查以處理瀏覽器不一致。

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

>或者，沒有現代化：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

>視頻播放：

html包含a

標籤（設置為

和<video>）以顯示捕獲的流。 JavaScript動態設置視頻元素的autoplay（或muted作為後備）。 srcObject src

<video id="videoTag" src="" autoplay muted class="view--video__video"></video>

相機訪問和權限：

> API優先級用戶安全。 啟動後，該應用程序請求使用網絡攝像頭（如果指定）使用網絡攝像頭（或網絡攝像頭和麥克風）。

接受一個指定媒體訪問要求的對象（

網絡攝像頭，getUserMedia()均為{video: true}）。 {video: true, audio: true}

多個網絡攝像頭支持：

>檢索有關可用媒體輸入/輸出設備（麥克風，相機，揚聲器）的信息。 它返回了一個諾言，可以解決一個設備對象的數組，每個對像都具有MediaDevices.enumerateDevices()，kind和>的屬性。 此功能仍然是實驗性的。 deviceId label

設置視頻源：

>

函數將視頻標籤的源設置為接收到的

。 它使用initializeVideoStream()如果受到支持，則掉回MediaStream srcObject URL.createObjectURL()

>

var initializeVideoStream = function(stream) {
    // ... (code to set video source) ...
};

CSS過濾器：>該應用程序將實時CSS過濾器應用於視頻和圖像。 JavaScript函數通過預定義的過濾器（灰度，棕褐色，模糊等）循環，將相應的CSS類添加到視頻元素中。

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

圖像保存：

（IE10）或使用navigator.msSaveBlob的後備和toDataURL>元素保存捕獲的圖像。 <a>

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

進一步的開發：

未來的可能性包括用於高級過濾和交互式環境的WebGL集成，以及用於音頻操作的Web音頻API集成。 移動瀏覽器支持也正在擴展。

（省略原始輸入（包括常見問題解答和Microsoft Learning Resources）的其餘部分被省略了，因為它在很大程度上是描述性的，並且與代碼中所示的媒體捕獲API的核心功能不直接相關。摘要。）

以上是使用媒體捕獲API的詳細內容。更多資訊請關注PHP中文網其他相關文章！