此次demo使用chrome49調試測試

前端在操作視頻輸入，音頻輸入，輸出上一直是比較弱的，或者說很難進行相關的操作，經過我最近的一些研究發現，在PC上實際上是可以實現這一系列的功能的，其實現原理主要是得益于google的webRTC技術。

什么是webRTC

WebRTC，名稱源自網頁即時通訊(英語：Web Real-Time Communication)的縮寫，是一個支持網頁瀏覽器進行實時語音對話或視頻對話的API。它于2011年6月1日開源并在Google、Mozilla、Opera支持下被納入萬維網聯盟的W3C推薦標準[1][2][3]。(來自維基百科)

也就是說webRTC是讓網頁瀏覽器進行實時語音對話或者視頻對話的一系列的解決方案。官方demo：https://github.com/webrtc/samples

這個demo里面實際上功能非常多，關于調用攝像頭我們主要關心的是這個demo，可是當大家把代碼拉下來之后發現非常多東西，我在這里給大家簡單的總結一下，并自己寫上幾個簡單的demo，當然想要關心具體實現功能，或者代碼的也可以看源碼。

如何在網頁中調用攝像頭

首先我們需要實現的就是在網頁中調用到攝像頭進行錄制，假如沒有攝像頭的同學也可以去下載一個繁星伴奏，進行模擬，下載地址：http://fanxing.kugou.com/ac/accompany

我們這里需要用到navigator.getUserMedia這個API，當然在chrome下需要使用兼容前綴即navigator.webkitGetUserMedia

代碼如下：

當前瀏覽器不支持 video直接播放，點擊這里下載視頻：下載視頻

varconstraints={video:true};//設置參數LocalMediaStream

varvideo_element=document.getElementById("video");// if(navigator.getUserMedia){//默認API

navigator.getUserMedia(constraints)

.then(function(stream) {

console.info(stream);

window.stream=stream;

video_element.srcObject=stream;

video_element.src=URL.createObjectURL(stream);returnnavigator.mediaDevices.enumerateDevices();

})

.catch(errorCallback);

}else if(navigator.webkitGetUserMedia){//chrome兼容

navigator.webkitGetUserMedia(constraints,function(stream){//成功獲取后回調

console.info(stream);

window.stream=stream;

video_element.srcObject=stream;

video_element.src=URL.createObjectURL(stream);returnnavigator.mediaDevices.enumerateDevices();

},function(data){//失敗回調

console.info(data)

});

}

我們可以看下代碼，HTML部分很簡單 就是一個video標簽，主要功能的實現在js中可以找到navigator.getUserMedia這個API，通過這個就可以調用當前攝像頭，并且返回流信息。

關于navigator.getUserMedia

提示用戶需要權限去使用像攝像頭或麥克風之類的媒體設備，如果用戶提供了這個權限。

語法

navigator.getUserMedia ( constraints, successCallback, errorCallback );

參數

constraints?:

successCallback中傳入的 LocalMediaStream對象所支持的媒體類型。

successCallback:

當應用中傳遞LocalMediaStream對象時觸發的函數。

errorCallback:

當調用媒體設備失敗時觸發的函數.

其中第一個和第二是都是必須的.

第一個需要傳入想要調用哪種媒體類型，具體就像代碼中定義:

var constraints={video:true};

當然也可以寫多個類型，例如

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

第二個參數則是調用成功后的回調函數，回調函數本身也有一個參數data返回的則是相關的音頻視頻信息。

通過這個對整個API的使用，把獲取到的流信息stream傳給video標簽的src中即可將視頻信息在網頁中顯示出來。

多個設備的處理

假設現在用戶有多個攝像設備，那我們需要讓用戶進行選擇，又應該如何做呢？

首先我們需要給用戶提供他自己的設備名稱讓他進行選擇，在這里我們需要使用navigator.mediaDevices.enumerateDevices()這個API 因此我們可以這樣寫:

顯示設備信息

視頻輸入設備

總結

以上是生活随笔為你收集整理的webrtc不支持怎么调用设想吐_关于webRTC中video的使用实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。