webRTC簡(jiǎn)介

WebRTC（Web Real-Time Communication）是一項(xiàng)實(shí)時(shí)通訊技術(shù)，它允許網(wǎng)絡(luò)應(yīng)用或站點(diǎn)在不借助中間媒介的情況下，建立瀏覽器之間點(diǎn)對(duì)點(diǎn)的連接，實(shí)現(xiàn)視頻流和/或音頻流或其他任意數(shù)據(jù)的傳輸。WebRTC主要依賴于四個(gè)核心的API：getUserMedia、getDisplayMedia、RTCPeerConnection和RTCDataChannel。

• getUserMedia：允許網(wǎng)頁(yè)應(yīng)用訪問(wèn)用戶的攝像頭和麥克風(fēng)，獲取音視頻流。
• getDisplayMedia：可以獲取電腦屏幕的視頻流，通常用于屏幕共享功能。
• RTCPeerConnection：用于建立和管理P2P連接，包括音視頻流的傳輸和控制。
• RTCDataChannel：用于在P2P連接上傳輸任意數(shù)據(jù)，如文本、文件等。

建立連接過(guò)程

1、建立連接需要的條件：

• 我們需要知道對(duì)方瀏覽器的網(wǎng)絡(luò)地址才能連接到它，需要獲取到對(duì)方的IP地址和端口號(hào)
• 我們需要對(duì)對(duì)方支持的音頻和視頻編解碼器等電腦軟硬件信息有所了解 當(dāng)我們互相拿到了對(duì)方的地址和電腦軟硬件信息后，就可以通過(guò)RTCPeerConnection對(duì)象來(lái)建立連接了

2、獲取地址：

在獲取對(duì)方地址時(shí)，因?yàn)楝F(xiàn)實(shí)網(wǎng)絡(luò)情況的復(fù)雜性，可能不能直接獲取到對(duì)方的地址，這時(shí)就需要用到STUN，TURN和ICE組件來(lái)處理不同類型網(wǎng)絡(luò)間的呼叫連接。

3、獲取硬件信息：

需要獲取到對(duì)方所支持的音頻和視頻編解碼器，這里使用SDP（會(huì)話描述協(xié)議） SDP涵蓋了一個(gè)指定用戶的描述、時(shí)間配置和對(duì)媒體的限制

那么接下來(lái)詳細(xì)來(lái)說(shuō)說(shuō)連接過(guò)程

PeerConnections 連接

PeerConnections 用于 WebRTC 用戶之間的連接，通過(guò) PeerConnections 連接的用戶之間可以發(fā)送音視頻實(shí)進(jìn)行時(shí)通信。new RTCPeerConnection 即可創(chuàng)建一個(gè) PeerConnection 連接，這個(gè) PeerConnection 可以與其他 PeerConnection 進(jìn)行連接，連接成功即可發(fā)送音視頻數(shù)據(jù)

1、SDP

PeerConnection 連接需要進(jìn)行 SDP 交換，因?yàn)橄胍ハ噙M(jìn)行音視頻發(fā)送，需要了解對(duì)端對(duì)于音視頻協(xié)議格式等相關(guān)功能的支持情況，想要順利發(fā)送數(shù)據(jù)需要雙端取交集，保證達(dá)成一致才能正常發(fā)送，SDP 就描述了這些信息，因此連接時(shí)需要互相給對(duì)端發(fā)送 SDP 信息。RTCPeerConnection 實(shí)例上有 createOffer 和 createAnswer 兩個(gè)方法可以創(chuàng)建 SDP， WebRTC 中要求一端發(fā) offer 另一端回復(fù) answer 來(lái)確保連接正確，這里看一個(gè)雙端 RTCPeerConnection SDP 的連接流程：

1. A createOffer offerA
2. A setLocalDescription offerA
3. A 發(fā)送 offerA 給 B
4. B setRemoteDescription offerA
5. B createAnswer AnswerB
6. B setLocalDescription AnswerB
7. B 發(fā)送 AnswerB 給 A
8. A setRemoteDescription AnswerB

至此雙端都接收了對(duì)面的 SDP 信息，示例代碼：

let PC1, PC2;
PC1 = new RTCPeerConnection({});
PC2 = new RTCPeerConnection({});

const offer = await PC1.createOffer();
await PC1.setLocalDescription(offer);
await PC2.setRemoteDescription(offer);
const answer = await PC2.createAnswer();
await PC2.setLocalDescription(answer);
await PC1.setRemoteDescription(answer);

sdp信息圖示，包含：媒體類型、編解碼格式、加密算法、傳輸協(xié)議等。

image.png

2、ICE

除了交換 SDP，這里還需要進(jìn)行 ICE 信息傳遞。SDP 協(xié)商了媒體傳輸格式，而ICE 是用來(lái)與對(duì)端協(xié)商連接方式的。在 RTCPeerConnection 對(duì)象上提供了 icecandidate 事件和 addIceCandidate 方法，當(dāng)一端執(zhí)行 setLocalDescription 是，表示 SDP 完成，準(zhǔn)備連接了，這時(shí)會(huì)在當(dāng)前對(duì)象上觸發(fā) icecandidate 事件，其中帶有 ICE 傳輸?shù)?candidate 信息，我們需要把這個(gè)信息發(fā)到對(duì)端，通過(guò) addIceCandidate 添加給對(duì)端，完成 ICE 連接。其中收集候選地址（candiate），在內(nèi)網(wǎng)中(同一網(wǎng)段，或是跨網(wǎng)段)，通過(guò)內(nèi)網(wǎng)地址直連；在NAT之后，通過(guò)本機(jī)NAT映射后的外網(wǎng)的IP和Port互通需要通過(guò)relay服務(wù)器來(lái)互通，所以收集地址時(shí)，分別對(duì)應(yīng)三種類型的Candiate地址：

• host 類型，本機(jī)內(nèi)網(wǎng)的 IP 和端口
• srflx 類型，本機(jī) NAT 映射后的外網(wǎng)的 IP 和端口
• relay 類型，中繼服務(wù)器的 IP 和端口

PC1.addEventListener('icecandidate', e => {
    PC2.addIceCandidate(e.candidate);
});
PC2.addEventListener('icecandidate', e => {
    PC1.addIceCandidate(e.candidate);
});

之后就可以進(jìn)行發(fā)送了，我們可以使用 RTCPeerConnection 對(duì)象上的 addTrack 方法來(lái)添加發(fā)送的音視頻軌道數(shù)據(jù)：

PC1.addEventListener('track', e => {
  if (video.srcObject !== e.streams[0]) {
    video.srcObject = e.streams[0];
  }
});

至此，整個(gè) PeerConnection 創(chuàng)建連接發(fā)送音視頻的過(guò)程就完成了

信令服務(wù)器

上邊說(shuō)了如何獲取公網(wǎng) IP、媒體類型、音視頻編碼等信息。我們可以通過(guò)信令來(lái)實(shí)現(xiàn)，在設(shè)備之間發(fā)送設(shè)備信息以確定通信協(xié)議、媒體編解碼和數(shù)據(jù)傳輸方法以及任何所需的路由信息的過(guò)程就叫做信令（Signaling），主要的作用：

• 交換SDP
• 發(fā)送控制消息：用于設(shè)置、打開(kāi)、關(guān)閉通信或處理異常情況。
• 媒體能力協(xié)商：通信雙方可以支持哪些編解碼器和媒體數(shù)據(jù)格式

連接圖示

image.png

上圖中按照顏色不同，WebRTC的連接建立主要分為三大部分，各個(gè)客戶端（藍(lán)色）、stun/turn服務(wù)（綠色）、信令服務(wù)socket（黃色）
1、調(diào)用 RTCPeerConnection 創(chuàng)建一個(gè)對(duì)等連接
2、調(diào)用 getUserMedia 打開(kāi)攝像頭&麥克風(fēng)
3、調(diào)用 RTCPeerConnection.addTrack 將音視頻軌道添加到對(duì)等連接媒體流軌道中（對(duì)等連接成功后將被傳輸?shù)綄?duì)等點(diǎn)）
4、調(diào)用 RTCPeerConnection.createOffer 創(chuàng)建 SDP offer 并調(diào)用 setLocalDescription 方法 將 sdp 添加至本地描述
5、客戶端 A 調(diào)用 ICE 服務(wù)獲取公網(wǎng) IP 并生成 ICE candidate (ICE 候選者)
6、客戶端 A 通過(guò)信令服務(wù)器發(fā)送 offer 至 客戶端 B
7、客戶端 B 調(diào)用 setRemoteDescription 方法，將接收到的 SDP offer 設(shè)置為遠(yuǎn)程描述，展示獲取到的音視頻流
8、客戶端 B 調(diào)用 getUserMedia 打開(kāi)攝像頭&麥克風(fēng)
9、客戶端 B 調(diào)用 RTCPeerConnection.createAnswer 創(chuàng)建 SDP answer，并調(diào)用 setLocalDescription 方法 將 sdp 添加至本地描述
10、客戶端 B 通過(guò)信令服務(wù)器發(fā)送 SDP answer 至 客戶端 A
11、客戶端 A 收到之后，調(diào)用 setRemoteDescription 方法，將接收到的 SDP answer 設(shè)置為遠(yuǎn)程描述，展示獲取到的音視頻流
12、至此連接建立完成