此次demo使用chrome49調(diào)試測(cè)試

前端在操作視頻輸入，音頻輸入，輸出上一直是比較弱的，或者說(shuō)很難進(jìn)行相關(guān)的操作，經(jīng)過(guò)我最近的一些研究發(fā)現(xiàn)，在PC上實(shí)際上是可以實(shí)現(xiàn)這一系列的功能的，其實(shí)現(xiàn)原理主要是得益于google的webRTC技術(shù)。

什么是webRTC

WebRTC，名稱源自網(wǎng)頁(yè)即時(shí)通訊(英語(yǔ)：Web Real-Time Communication)的縮寫(xiě)，是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話或視頻對(duì)話的API。它于2011年6月1日開(kāi)源并在Google、Mozilla、Opera支持下被納入萬(wàn)維網(wǎng)聯(lián)盟的W3C推薦標(biāo)準(zhǔn)[1][2][3]。(來(lái)自維基百科)

也就是說(shuō)webRTC是讓網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話或者視頻對(duì)話的一系列的解決方案。官方demo：https://github.com/webrtc/samples

這個(gè)demo里面實(shí)際上功能非常多，關(guān)于調(diào)用攝像頭我們主要關(guān)心的是這個(gè)demo，可是當(dāng)大家把代碼拉下來(lái)之后發(fā)現(xiàn)非常多東西，我在這里給大家簡(jiǎn)單的總結(jié)一下，并自己寫(xiě)上幾個(gè)簡(jiǎn)單的demo，當(dāng)然想要關(guān)心具體實(shí)現(xiàn)功能，或者代碼的也可以看源碼。

如何在網(wǎng)頁(yè)中調(diào)用攝像頭

首先我們需要實(shí)現(xiàn)的就是在網(wǎng)頁(yè)中調(diào)用到攝像頭進(jìn)行錄制，假如沒(méi)有攝像頭的同學(xué)也可以去下載一個(gè)繁星伴奏，進(jìn)行模擬，下載地址：http://fanxing.kugou.com/ac/accompany

我們這里需要用到navigator.getUserMedia這個(gè)API，當(dāng)然在chrome下需要使用兼容前綴即navigator.webkitGetUserMedia

代碼如下：

當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻：下載視頻

varconstraints={video:true};//設(shè)置參數(shù)LocalMediaStream

varvideo_element=document.getElementById("video");// if(navigator.getUserMedia){//默認(rèn)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){//成功獲取后回調(diào)

console.info(stream);

window.stream=stream;

video_element.srcObject=stream;

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

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

console.info(data)

});

}

我們可以看下代碼，HTML部分很簡(jiǎn)單 就是一個(gè)video標(biāo)簽，主要功能的實(shí)現(xiàn)在js中可以找到navigator.getUserMedia這個(gè)API，通過(guò)這個(gè)就可以調(diào)用當(dāng)前攝像頭，并且返回流信息。

關(guān)于navigator.getUserMedia

提示用戶需要權(quán)限去使用像攝像頭或麥克風(fēng)之類的媒體設(shè)備，如果用戶提供了這個(gè)權(quán)限。

語(yǔ)法

navigator.getUserMedia ( constraints, successCallback, errorCallback );

參數(shù)

constraints?:

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

successCallback:

當(dāng)應(yīng)用中傳遞LocalMediaStream對(duì)象時(shí)觸發(fā)的函數(shù)。

errorCallback:

當(dāng)調(diào)用媒體設(shè)備失敗時(shí)觸發(fā)的函數(shù).

其中第一個(gè)和第二是都是必須的.

第一個(gè)需要傳入想要調(diào)用哪種媒體類型，具體就像代碼中定義:

var constraints={video:true};

當(dāng)然也可以寫(xiě)多個(gè)類型，例如

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

第二個(gè)參數(shù)則是調(diào)用成功后的回調(diào)函數(shù)，回調(diào)函數(shù)本身也有一個(gè)參數(shù)data返回的則是相關(guān)的音頻視頻信息。

通過(guò)這個(gè)對(duì)整個(gè)API的使用，把獲取到的流信息stream傳給video標(biāo)簽的src中即可將視頻信息在網(wǎng)頁(yè)中顯示出來(lái)。

多個(gè)設(shè)備的處理

假設(shè)現(xiàn)在用戶有多個(gè)攝像設(shè)備，那我們需要讓用戶進(jìn)行選擇，又應(yīng)該如何做呢？

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

顯示設(shè)備信息

視頻輸入設(shè)備

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。