柚子快報(bào)激活碼778899分享：音視頻 WebRTC簡(jiǎn)介及使用

http://yzkb.51969.com/

文章目錄

前言一、WebRTC 簡(jiǎn)介1、webrtc 是什么2、webrtc 可以做什么3、數(shù)據(jù)傳輸需要些什么4、SDP 協(xié)議5、STUN6、TURN7、ICE

二、WebRTC 整體框架三、WebRTC 功能模塊1、視頻相關(guān)①、視頻采集---video_capture②、視頻編解碼---video_coding③、視頻加密---video_engine_encryption④、視頻媒體文件---media_file⑤、視頻圖像處理---video_processing⑥、視頻顯示---video_render⑦、網(wǎng)絡(luò)傳輸與流控

2、音頻相關(guān)①、音頻設(shè)備---audio_device②、音頻編解碼---audio_coding③、聲音加密---voice_engine_encryption④、聲音文件⑤、聲音處理---audio_processing⑥、網(wǎng)絡(luò)傳輸與流控

四、WEBRTC 調(diào)用本地?cái)z像頭1、確認(rèn)本地設(shè)備2、WebRTC 所用 API①、getUserMedia②、展示攝像頭圖像

3、Html 與 js 代碼4、WEBRTC 調(diào)用本地?cái)z像頭

前言

WebRTC 只是一個(gè)媒體引擎，上面有一個(gè) JavaScript API，所以每個(gè)人都知道如何使用它（盡管瀏覽器實(shí)現(xiàn)仍然各不相同），本文對(duì) WebRTC（網(wǎng)頁(yè)實(shí)時(shí)通信）的相關(guān)內(nèi)容進(jìn)行簡(jiǎn)要介紹。

一、WebRTC 簡(jiǎn)介

WebRTC，名稱源自網(wǎng)頁(yè)實(shí)時(shí)通信（Web Real-Time Communication）的縮寫，是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音通話或視頻聊天的技術(shù)，是谷歌 2010 年以 6820 萬美元收購(gòu) Global IP Solutions 公司而獲得的一項(xiàng)技術(shù)。

WebRTC 提供了實(shí)時(shí)音視頻的核心技術(shù)，包括音視頻的采集、編解碼、網(wǎng)絡(luò)傳輸、顯示等功能，并且還支持跨平臺(tái)：windows，linux，mac，android。

雖然 WebRTC 的目標(biāo)是實(shí)現(xiàn)跨平臺(tái)的 Web 端實(shí)時(shí)音視頻通訊，但因?yàn)楹诵膶哟a的 Native、高品質(zhì)和內(nèi)聚性，開發(fā)者很容易進(jìn)行除 Web 平臺(tái)外的移殖和應(yīng)用。很長(zhǎng)一段時(shí)間內(nèi) WebRTC 是業(yè)界能免費(fèi)得到的唯一高品質(zhì)實(shí)時(shí)音視頻通訊技術(shù)。

1、webrtc 是什么

瀏覽器為音視頻獲取傳輸提供的接口

2、webrtc 可以做什么

瀏覽器端到端的進(jìn)行音視頻聊天、直播、內(nèi)容傳輸

3、數(shù)據(jù)傳輸需要些什么

IP、端口、協(xié)議客戶端、 服務(wù)端

4、SDP 協(xié)議

有關(guān) SDP 相關(guān)的內(nèi)容可以參考我之前的博文：RTSP協(xié)議抓包及講解 sdp 協(xié)議：SDP 信息相當(dāng)于 PC 的名片，主要是協(xié)商兩個(gè)端點(diǎn)在傳輸數(shù)據(jù)的時(shí)候一些配置 數(shù)據(jù)格式：key=value

SDP 協(xié)商利用的是請(qǐng)求和響應(yīng)這兩個(gè)模型（offer、answer），Offerer 發(fā)給 Answerer 的請(qǐng)求消息稱為請(qǐng)求 offer， 內(nèi)容包括媒體流類型、各個(gè)媒體流使用的編碼集，以及將要用于接收媒體流的 IP 和端口。Answerer 收到 offer 之后，回復(fù)給 Offerer 的消息稱為響應(yīng)，內(nèi)容包括要使用的媒體編碼，是否接收該媒體流以及告訴 Offerer 其用于接收媒體流的 IP 和端口。

在 WebRTC 連接流程中，在創(chuàng)建 PeerConnectionA 后，就會(huì)去創(chuàng)建一個(gè) offerSDP，并設(shè)置為 localSDP。通過 signaling 發(fā)送 PeerB。peerB 收到 peerA 的 SDP 后，把收到的 SDP 設(shè)置為 RemoteSDP。在設(shè)置完成后，PeerB 再生成 AnswerSDP，設(shè)置為 localSDP，通過 signaling 通道發(fā)送給 PeerA，PeerA 收到后 AnswerSDP 后，設(shè)置為 RemoteSDP，以上流程完成了 SDP 的交換。

5、STUN

允許應(yīng)用程序發(fā)現(xiàn)自己和公網(wǎng)之間的中間件類型，同時(shí)也能允許應(yīng)用程序發(fā)現(xiàn)自己被 NAT 分配的公網(wǎng) IP，從而替代位于應(yīng)用層中的私網(wǎng)地址，達(dá)到 NAT 穿透的目的

6、TURN

通過修改應(yīng)用層中的私網(wǎng)地址達(dá)到 NAT 穿透 也是解決內(nèi)網(wǎng)穿透的，這里是 stun 不能工作的時(shí)候采取的辦法 相當(dāng)于一個(gè)中轉(zhuǎn)器即 peerA->TURN-PeerB

7、ICE

交互式連接的建立 把 STUN 和 TURN 結(jié)合在一起的一個(gè)標(biāo)準(zhǔn)叫 ICE（不是協(xié)議， 是整合了 STUN，TURN 的框架）。利用 STUN 和 TURN 為連接提供正確的路由，然后尋找一系列雙方可用地址按順序測(cè)試地址，直到找到雙方都可用的組合。

二、WebRTC 整體框架

綠色部分是 WebRTC 核心部分（核心庫(kù)）

核心層，第一層 C++ API：提供給外面的接口，最主要的是（PeerConnedtion 對(duì)等連接）核心層，第二層 Session：上下文管理層（音視頻）核心層，第三層【最重要的部分】

音視頻引擎 ：編解碼；音頻緩沖 BUFFER 防止音頻網(wǎng)絡(luò)抖動(dòng) NetEQ；回音消除；降噪；靜音檢測(cè)；視頻引擎 ：編解碼；jitter buffer 防止視頻網(wǎng)絡(luò)抖動(dòng)；圖像處理增強(qiáng)；傳輸：SRTP 加密后的 RTP；多路復(fù)用；P2P（STUN+TURN+ICE) 核心層，第四層，硬件相關(guān)層：音視頻采集；網(wǎng)絡(luò) IO 紫色部分是 JS 提供的 API（應(yīng)用層）

整體是應(yīng)用層調(diào)用核心層

三、WebRTC 功能模塊

WebRTC 實(shí)現(xiàn)了基于網(wǎng)頁(yè)的視頻會(huì)議，標(biāo)準(zhǔn)是 WHATWG 協(xié)議，目的是通過瀏覽器提供簡(jiǎn)單的 javascript 就可以達(dá)到實(shí)時(shí)通訊（Real-Time Communications (RTC)）能力。

1、視頻相關(guān)

①、視頻采集—video_capture

源代碼在 webrtc\modules\video_capture\main 目錄下， 包含接口和各個(gè)平臺(tái)的源代碼。

在 windows 平臺(tái)上，WebRTC 采用的是 dshow 技術(shù)，來實(shí)現(xiàn)枚舉視頻的設(shè)備信息和視頻數(shù)據(jù)的采集，這意味著可以支持大多數(shù)的視頻采集設(shè)備；對(duì)那些需要單獨(dú)驅(qū)動(dòng)程序的視頻采集卡（比如?？蹈咔蹇ǎ┚蜔o能為力了。

視頻采集支持多種媒體類型，比如 I420、YUY2、RGB、UYUY 等，并可以進(jìn)行幀大小和幀率控制。

②、視頻編解碼—video_coding

源代碼在 webrtc\modules\video_coding 目錄下。

WebRTC 采用 I420/VP8 編解碼技術(shù)。VP8 是 google 收購(gòu) ON2 后的開源實(shí)現(xiàn)，并且也用在 WebM 項(xiàng)目中。VP8 能以更少的數(shù)據(jù)提供更高質(zhì)量的視頻，特別適合視頻會(huì)議這樣的需求。

③、視頻加密—video_engine_encryption

視頻加密是 WebRTC 的 video_engine 一部分，相當(dāng)于視頻應(yīng)用層面的功能，給點(diǎn)對(duì)點(diǎn)的視頻雙方提供了數(shù)據(jù)上的安全保證，可以防止在 Web 上視頻數(shù)據(jù)的泄漏。

視頻加密在發(fā)送端和接收端進(jìn)行加解密視頻數(shù)據(jù)，密鑰由視頻雙方協(xié)商，代價(jià)是會(huì)影響視頻數(shù)據(jù)處理的性能；也可以不使用視頻加密功能，這樣在性能上會(huì)好些。

④、視頻媒體文件—media_file

源代碼在 webrtc\modules\media_file 目錄下。

該功能是可以用本地文件作為視頻源，有點(diǎn)類似虛擬攝像頭的功能；支持的格式有 Avi，另外 WebRTC 還可以錄制音視頻到本地文件，比較實(shí)用的功能。

⑤、視頻圖像處理—video_processing

源代碼在 webrtc\modules\video_processing 目錄下。

視頻圖像處理針對(duì)每一幀的圖像進(jìn)行處理，包括明暗度檢測(cè)、顏色增強(qiáng)、降噪處理等功能，用來提升視頻質(zhì)量。

⑥、視頻顯示—video_render

源代碼在 webrtc\modules\video_render 目錄下。

在 windows 平臺(tái)，WebRTC 采用 direct3d9 和 directdraw 的方式來顯示視頻，只能這樣，必須這樣。

⑦、網(wǎng)絡(luò)傳輸與流控

對(duì)于網(wǎng)絡(luò)視頻來講，數(shù)據(jù)的傳輸與控制是核心價(jià)值。WebRTC 采用的是成熟的 RTP/RTCP 技術(shù)。

2、音頻相關(guān)

WebRTC 的音頻部分，包含設(shè)備、編解碼（iLIBC/iSAC/G722/PCM16/RED/AVT、 NetEQ）、加密、聲音文件、聲音處理、聲音輸出、音量控制、音視頻同步、網(wǎng)絡(luò)傳輸與流控（RTP/RTCP）等功能。

①、音頻設(shè)備—audio_device

源代碼在 webrtc\modules\audio_device\main 目錄下， 包含接口和各個(gè)平臺(tái)的源代碼。

在 windows 平臺(tái)上，WebRTC 采用的是 Windows Core Audio 和 Windows Wave 技術(shù)來管理音頻設(shè)備，還提供了一個(gè)混音管理器。

利用音頻設(shè)備，可以實(shí)現(xiàn)聲音輸出，音量控制等功能。

②、音頻編解碼—audio_coding

源代碼在 webrtc\modules\audio_coding 目錄下。

WebRTC 采用 iLIBC/iSAC/G722/PCM16/RED/AVT 編解碼技術(shù)。

WebRTC 還提供 NetEQ 功能—抖動(dòng)緩沖器及丟包補(bǔ)償模塊，能夠提高音質(zhì)，并把延遲減至最小。

另外一個(gè)核心功能是基于語(yǔ)音會(huì)議的混音處理。

③、聲音加密—voice_engine_encryption

和視頻一樣， WebRTC 也提供聲音加密功能。

④、聲音文件

該功能是可以用本地文件作為音頻源，支持的格式有 Pcm 和 Wav。

同樣，WebRTC 也可以錄制音頻到本地文件。

⑤、聲音處理—audio_processing

源代碼在 webrtc\modules\audio_processing 目錄下。

聲音處理針對(duì)音頻數(shù)據(jù)進(jìn)行處理，包括回聲消除（AEC）、AECM（AEC Mobile）、自動(dòng)增益（AGC）、降噪（NS）、靜音檢測(cè)（VAD）處理等功能， 用來提升聲音質(zhì)量。

⑥、網(wǎng)絡(luò)傳輸與流控

和視頻一樣，WebRTC 采用的是成熟的 RTP/RTCP 技術(shù)。

四、WEBRTC 調(diào)用本地?cái)z像頭

WebRTC 是“ 網(wǎng)絡(luò)實(shí)時(shí)通信” （ Web Real Time Communication）的縮寫，它主要用來讓瀏覽器實(shí)時(shí)獲取和交換視頻、音頻和數(shù)據(jù)。

1、確認(rèn)本地設(shè)備

列出 Windows 系統(tǒng)上可用的音視頻設(shè)備

ffmpeg -list_devices true -f dshow -i dummy

-list_devices true：這是一個(gè)選項(xiàng)參數(shù)，用于告訴 FFmpeg 列出可用的設(shè)備。-f dshow：這是另一個(gè)選項(xiàng)參數(shù)，用于指定使用 DirectShow 框架來訪問設(shè)備。-i dummy：這是輸入?yún)?shù)，dummy 是一個(gè)虛擬設(shè)備名稱，用于觸發(fā)設(shè)備列表的輸出。

可以看到筆記本電腦只有個(gè)前置攝像頭，未外接 USB 攝像頭

下面命令使用前置攝像頭進(jìn)行捕捉畫面：

ffplay -f dshow -i video="Integrated Camera"

2、WebRTC 所用 API

WebRTC 共分三個(gè) API：

MediaStream（又稱 getUserMedia）RTCPeerConnectionRTCDataChannel

getUserMedia 主要用于獲取視頻和音頻信息，后兩個(gè) API 用于瀏覽器之間的數(shù)據(jù)交換。

①、getUserMedia

首先，檢查瀏覽器是否支持 getUserMedia 方法。

navigator.getUserMedia ||

(navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia

|| navigator.msGetUserMedia);

if (navigator.getUserMedia) {

//do something

} else {

console.log('your browser not support getUserMedia');

}

Chrome21 、Opera 18 和 Firefox 17 支 持 該 方 法 ，目 前 IE 還 不 支 持 ，上 面 代 碼 中 的 msGetUserMedia 只是為了確保將來的兼容。

getUserMedia(streams, success, error); 含義如下：

streams：表示包括哪些多媒體設(shè)備的對(duì)象success：回調(diào)函數(shù)，獲取多媒體設(shè)備成功時(shí)調(diào)用error：回調(diào)函數(shù)，獲取多媒體設(shè)備失敗時(shí)調(diào)用

用法如下：

navigator.getUserMedia({

video: true,

audio: true

}, onSuccess, onError);

上面的代碼用來獲取攝像頭和麥克風(fēng)的實(shí)時(shí)信息。

如果網(wǎng)頁(yè)使用了 getUserMedia，瀏覽器就會(huì)詢問用戶，是否許可提供信息。如果用戶拒絕，就調(diào)用回調(diào)函數(shù) onError。

發(fā)生錯(cuò)誤時(shí)，回調(diào)函數(shù)的參數(shù)是一個(gè) Error 對(duì)象，它有一個(gè) code 參數(shù)，取值如下：

PERMISSION_DENIED：用戶拒絕提供信息。NOT_SUPPORTED_ERROR：瀏覽器不支持指定的媒體類型。MANDATORY_UNSATISHIED_ERROR：指定的媒體類型未收到媒體流。

②、展示攝像頭圖像

將用戶的攝像頭拍攝的圖像展示在網(wǎng)頁(yè)上，需要先在網(wǎng)頁(yè)上放置一個(gè) video 元素。圖像就展示在這個(gè)元素中。

然后， 用代碼獲取這個(gè)元素。

function onSuccess(stream) {

var video = document.getElementById('webcam');

//more code

}

最后，將這個(gè)元素的 src 屬性綁定數(shù)據(jù)流，攝像頭拍攝的圖像就可以顯示了。

function onSuccess(stream) {

var video = document.getElementById('webcam');

if (window.URL) {

video.src = window.URL.createObjectURL(stream);

} else {

video.src = stream;

}

video.autoplay = true;

//or video.play();

}

它的主要用途是讓用戶使用攝像頭為自己拍照。

3、Html 與 js 代碼

webrtcdemo.html

4、WEBRTC 調(diào)用本地?cái)z像頭

雙擊 webrtcdemo.html 可以看到下圖界面，點(diǎn)擊開始 點(diǎn)擊允許 可以看到電腦攝像頭捕捉到的圖像

我的qq：2442391036，歡迎交流！

柚子快報(bào)激活碼778899分享：音視頻 WebRTC簡(jiǎn)介及使用

http://yzkb.51969.com/

好文閱讀