webrtc筆記(2): 1對1實時視頻/語音通訊原理概述

開始正文之前，先思考1個問題：2個處于不同網(wǎng)絡(luò)環(huán)境的(具備攝像頭/麥克風(fēng)多媒體設(shè)備的)瀏覽器，要實現(xiàn)點對點的實時視頻/語音通訊，難點在哪？

至少得先搞定下面2個問題：

1、彼此要了解對方支持的媒體格式、支持的最大分辨率等媒體信息

比如：peerA端可支持MPEG-1/2、H264多種編碼格式，而peerB端支持MPEG-4、H264，要保證二端都正確的編解碼，最簡單的辦法就是取它們的交集H264

就象2個不同國家的人交流，1個只會講英文、中文，另1個只會講德語、英文，他倆肯定要能相互正常溝通，肯定會用雙方都懂的英文來交流一樣。

注：有一個專門的協(xié)議 ，稱為Session Description Protocol (SDP)，可用于描述上述這類信息，在webrtc中，參與視頻通訊的雙方必須先交換SDP信息，這樣雙方才能知根知底，而交換SDP的過程，也稱為"媒體協(xié)商"。

?

2、彼此要了解對方的網(wǎng)絡(luò)情況，這樣才有可能找到一條相互通訊的鏈路

類似的道理，在復(fù)雜的網(wǎng)絡(luò)環(huán)境中，要建立二個端的連接，得有一條雙方都能訪問的鏈路。

如上圖，peerA端具體有公網(wǎng)ip以及192網(wǎng)段的內(nèi)網(wǎng)環(huán)境，而peerB沒有公網(wǎng)，只有192、198二個內(nèi)網(wǎng)地址，從圖中可知，它倆可以使用公用的192網(wǎng)段來通訊。webrtc通訊過程中，這些網(wǎng)絡(luò)相關(guān)的信息，也得相互交換，找出共同的交集，這個過程也稱為“網(wǎng)絡(luò)協(xié)商”。

?

順著這個思路再琢磨一下，剛開始前，這2個端還沒建立連接，既然連都沒連上，又如何交換“媒體信息”、“網(wǎng)絡(luò)信息”?

這時候就該所謂的信令服務(wù)器signal server出場了：

如上圖，2個瀏覽器端的上層，可以抽象出一層信令服務(wù)器（可以是1臺或多臺，看實際應(yīng)用的情況，如果2端的瀏覽器都能訪問某個公共的網(wǎng)絡(luò)環(huán)境，比如公網(wǎng)，可以讓它們都連到這臺公用的信令服務(wù)器上；如果沒有公共的網(wǎng)絡(luò)環(huán)境，可以在2端各搭一組服務(wù)器，即signal serverA、signal serverB，但是這二組信令服務(wù)器之間要能互通），借助信令服務(wù)器，就可以實現(xiàn)上面提到的SDP信息及網(wǎng)絡(luò)信息交換。

?

交換SDP的過程，大致如上圖：

1、Amy(1個假想的人名)，把自身的SDP信息，通過setLocalDescription方法保存起來，然后通過offer方法，發(fā)給信令服務(wù)器。

2、信息服務(wù)器把Amy的SDP向前傳遞到另1端的Bob(另1個假想的人名)，Bob會先調(diào)用setRemoteDescripition把Amy的SDP保存下來。

3、然后Bob調(diào)用setLocalDescription方法保存自己的SDP，然后再通過answer方法，把自己的SDP通過信令服務(wù)器發(fā)給Amy

4、Amy收到Bob的SDP后，調(diào)用setRemoteDescription保存起來，這樣雙方就完成了SDP交換，然后找出其中的交集，如果能達成一致，就可以建立p2p連接，開始通訊了。

?

但是現(xiàn)實往往是殘酷的，在中國的網(wǎng)絡(luò)環(huán)境中，據(jù)一些統(tǒng)計數(shù)據(jù)顯示，至少1半的網(wǎng)絡(luò)是無法直接穿透打通的(我個人認為根本原因是：IP4地址資源在互聯(lián)網(wǎng)發(fā)展早期絕大多數(shù)都被國外占用了，輪到中國這些發(fā)展中國家使用時IP地址嚴重不足，所以大多數(shù)電腦都不具備公網(wǎng)ip，只能通過路由器、交換機做NAT轉(zhuǎn)換，而相當一部分NAT是對稱型的，基本上沒法空透），這種情況下只能借助上一節(jié)講到的turn服務(wù)器中轉(zhuǎn)。

?

另外，在視頻對話框中，通常會有房間(或群）的概念，用于做一些業(yè)務(wù)上的隔離，這部分邏輯也是在signal server中實現(xiàn)的，綜合考慮peer端、信令服務(wù)器、stun/turn服務(wù)器后，整個1對1實時視頻通訊的時序圖如下：

主要過程如下：

1、雙方先調(diào)用getUserMedia打開本機攝像頭

2、向信令服務(wù)器發(fā)送加入房間apply_join請求

3、信令服務(wù)器通知本人加入成功(joined)，同時向其它人廣播加入消息(other_joined)

4、二端開始創(chuàng)建peerConnection連接

5、peerB端創(chuàng)建offer，同時將SDP保存到本機(setLocalDescription)，并通過信令服務(wù)器傳遞到peerA

6、peerB在setLocalDescription后，會異步觸發(fā)“候選網(wǎng)絡(luò)鏈路”收集，大致是通過Stun確定自己所有的NAT映射出口，如果Stun返回NAT是“對稱型”的，基本上就沒法穿透了，會再通過Turn拿到中繼reply地址，并通過信令服務(wù)器，將網(wǎng)絡(luò)候選鏈路信息發(fā)到peerA(即：開始網(wǎng)絡(luò)協(xié)商）

7、peerA收到的peerB的SDP后，開始回應(yīng)(createAnswer)，仍然通過信令服務(wù)器，將SDP發(fā)送到peerB

8、同時peerA也會開始網(wǎng)絡(luò)候選鏈路的收集，并將自己的網(wǎng)絡(luò)信息，通過信令服務(wù)器，發(fā)到peerB(即：網(wǎng)絡(luò)協(xié)商)

這樣peerA，peerB就相互交換了媒體信息及網(wǎng)絡(luò)信息，如果能達到一致(即：找到交集)，就可以開始通訊了

?

基于以上原理，做了一個demo示例程序，見：https://github.com/yjmyzz/webrtc-samples

?

參考資料：

https://rtcdeveloper.com/t/topic/13742

https://www.html5rocks.com/en/tutorials/webrtc/basics/

https://hpbn.co/webrtc/#standards-and-development-of-webrtc

https://blog.csdn.net/momo0853/article/details/85157775

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Connectivity

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription

https://www.cnblogs.com/lingyunhu/category/626157.html

作者：菩提樹下的楊過
出處：http://yjmyzz.cnblogs.com
本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。

分類:?09.Open Source,?19.Others

總結(jié)

以上是生活随笔為你收集整理的1对1实时视频/语音通讯原理概述的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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