作者： 博客園? ? ? ? - 孤竹君


? ?? ?WebRTC是HTML5支持的重要特性之一，有了它，不再需要借助音視頻相關(guān)的客戶端，直接通過(guò)瀏覽器的Web頁(yè)面就可以實(shí)現(xiàn)音視頻對(duì)聊功能。而且WebRTC項(xiàng)目是開(kāi)源的，我們可以借助WebRTC源碼快速構(gòu)建自己的音視頻對(duì)聊功能。無(wú)論是使用前端JS的WebRTC API接口，還是在WebRTC源碼上構(gòu)建自己的對(duì)聊框架，都需要遵循以下執(zhí)行流程：

上述序列中，WebRTC并不提供Stun服務(wù)器和Signal服務(wù)器，服務(wù)器端需要自己實(shí)現(xiàn)。Stun服務(wù)器可以用google提供的實(shí)現(xiàn)stun協(xié)議的測(cè)試服務(wù)器（stun:stun.l.google.com:19302），Signal服務(wù)器則完全需要自己實(shí)現(xiàn)了，它需要在ClientA和ClientB之間傳送彼此的SDP信息和candidate信息，ClientA和ClientB通過(guò)這些信息建立P2P連接來(lái)傳送音視頻數(shù)據(jù)。由于網(wǎng)絡(luò)環(huán)境的復(fù)雜性，并不是所有的客戶端之間都能夠建立P2P連接，這種情況下就需要有個(gè)relay服務(wù)器做音視頻數(shù)據(jù)的中轉(zhuǎn)，本文本著源碼剖析的態(tài)度，這種情況就不考慮了。這里說(shuō)明一下， stun/turn、relay服務(wù)器的實(shí)現(xiàn)在WebRTC源碼中都有示例，真是個(gè)名副其實(shí)的大寶庫(kù)。

上述序列中，標(biāo)注的場(chǎng)景是ClientA向ClientB發(fā)起對(duì)聊請(qǐng)求，調(diào)用描述如下：

·ClientA首先創(chuàng)建PeerConnection對(duì)象，然后打開(kāi)本地音視頻設(shè)備，將音視頻數(shù)據(jù)封裝成MediaStream添加到PeerConnection中。

·ClientA調(diào)用PeerConnection的CreateOffer方法創(chuàng)建一個(gè)用于offer的SDP對(duì)象，SDP對(duì)象中保存當(dāng)前音視頻的相關(guān)參數(shù)。ClientA通過(guò)PeerConnection的SetLocalDescription方法將該SDP對(duì)象保存起來(lái)，并通過(guò)Signal服務(wù)器發(fā)送給ClientB。

·ClientB接收到ClientA發(fā)送過(guò)的offer SDP對(duì)象，通過(guò)PeerConnection的SetRemoteDescription方法將其保存起來(lái)，并調(diào)用PeerConnection的CreateAnswer方法創(chuàng)建一個(gè)應(yīng)答的SDP對(duì)象，通過(guò)PeerConnection的SetLocalDescription的方法保存該應(yīng)答SDP對(duì)象并將它通過(guò)Signal服務(wù)器發(fā)送給ClientA。

·ClientA接收到ClientB發(fā)送過(guò)來(lái)的應(yīng)答SDP對(duì)象，將其通過(guò)PeerConnection的SetRemoteDescription方法保存起來(lái)。

·在SDP信息的offer/answer流程中，ClientA和ClientB已經(jīng)根據(jù)SDP信息創(chuàng)建好相應(yīng)的音頻Channel和視頻Channel并開(kāi)啟Candidate數(shù)據(jù)的收集，Candidate數(shù)據(jù)可以簡(jiǎn)單地理解成Client端的IP地址信息（本地IP地址、公網(wǎng)IP地址、Relay服務(wù)端分配的地址）。

·當(dāng)ClientA收集到Candidate信息后，PeerConnection會(huì)通過(guò)OnIceCandidate接口給ClientA發(fā)送通知，ClientA將收到的Candidate信息通過(guò)Signal服務(wù)器發(fā)送給ClientB，ClientB通過(guò)PeerConnection的AddIceCandidate方法保存起來(lái)。同樣的操作ClientB對(duì)ClientA再來(lái)一次。

·這樣ClientA和ClientB就已經(jīng)建立了音視頻傳輸?shù)腜2P通道，ClientB接收到ClientA傳送過(guò)來(lái)的音視頻流，會(huì)通過(guò)PeerConnection的OnAddStream回調(diào)接口返回一個(gè)標(biāo)識(shí)ClientA端音視頻流的MediaStream對(duì)象，在ClientB端渲染出來(lái)即可。同樣操作也適應(yīng)ClientB到ClientA的音視頻流的傳輸。

轉(zhuǎn)載請(qǐng)注明出處:http://www.cnblogs.com/fangkm/p/4364553.html

轉(zhuǎn)載于:https://www.cnblogs.com/onlycoder/p/7297356.html

總結(jié)

以上是生活随笔為你收集整理的WebRTC手记之初探的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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