[TOC] ## 概述 - 對等連接是WebRTC規范的一部分，它涉及連接不同計算機上的兩個應用程序以使用對等協議進行通信。對等方之間的通信可以是視頻，音頻或任意二進制數據（對于支持`RTCDataChannel`API的客戶端） - 為了發現兩個對等方如何連接，兩個客戶端都需要提供ICE服務器配置。這可以是STUN服務器，也可以是TURN服務器 ## 發信號 ``` const signalingChannel = new SignalingChannel(remoteClientId); signalingChannel.addEventListener('message', message => { // New message from remote client received }); signalingChannel.send('Hello!'); ``` ## 啟動對等連接 - 每個對等連接都由`RTCPeerConnection`對象處理 - 創建`RTCPeerConnection`，我們需要創建SDP服務或應答 - 將SDP對象傳遞到遠程對等點稱為信令 ### 調用方 1. 我們創建一個`RTCPeerConnection`對象 2. 然后調用`createOffer()`創建一個`RTCSessionDescription`對象。 3. 使用`setLocalDescription()`將該會話描述設置為本地描述，然后通過我們的信令通道發送到接收方 ``` async function makeCall() { const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]} const peerConnection = new RTCPeerConnection(configuration); signalingChannel.addEventListener('message', async message => { if (message.answer) { const remoteDesc = new RTCSessionDescription(message.answer); await peerConnection.setRemoteDescription(remoteDesc); } }); const offer = await peerConnection.createOffer(); await peerConnection.setLocalDescription(offer); signalingChannel.send({'offer': offer}); } ``` ### 接收方 1. 我們在創建`RTCPeerConnection`實例之前等待收到的報價 2. 我們使用`setRemoteDescription()`設置收到的報價 3. 我們調用`createAnswer()`為收到的報價創建答案 4. 使用`setLocalDescription()`將此答案設置為本地描述，然后通過我們的信令服務器發送到呼叫方 ``` const peerConnection = new RTCPeerConnection(configuration); signalingChannel.addEventListener('message', async message => { if (message.offer) { peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer)); const answer = await peerConnection.createAnswer(); await peerConnection.setLocalDescription(answer); signalingChannel.send({'answer': answer}); } }); ``` 一旦兩個對等方都設置了本地和遠程會話描述，他們便知道了遠程對等方的功能。這并不意味著對等方之間的連接已準備就緒。為此，我們需要在每個對等方收集ICE候選者，并（通過信令信道）轉移到另一個對等方 ### ICE候選人 在兩個對等方可以使用WebRTC進行通信之前，他們需要交換連接信息。由于網絡狀況可能取決于許多因素而變化，因此通常使用外部服務來發現可能的候選對象以連接到對等方。這項服務稱為ICE #### ckle流冰 創建`RTCPeerConnection`對象后，基礎框架將使用提供的ICE服務器收集用于建立連接的候選對象（ICE候選對象）。事件`icegatheringstatechange`上`RTCPeerConnection`信號處于什么狀態ICE聚會是（`new`，`gathering`或`complete`） ``` // Listen for local ICE candidates on the local RTCPeerConnection peerConnection.addEventListener('icecandidate', event => { if (event.candidate) { signalingChannel.send({'new-ice-candidate': event.candidate}); } }); // Listen for remote ICE candidates and add them to the local RTCPeerConnection signalingChannel.addEventListener('message', async message => { if (message.iceCandidate) { try { await peerConnection.addIceCandidate(message.iceCandidate); } catch (e) { console.error('Error adding received ice candidate', e); } } }); ``` ### 連接已建立 監聽是否連接 ``` // Listen for connectionstatechange on the local RTCPeerConnection peerConnection.addEventListener('connectionstatechange', event => { if (peerConnection.connectionState === 'connected') { // Peers connected! } }); ```