RTCPeerConnection
是 WebRTC API 的中央介面。代表本機和遠端對等點之間的連線,並指出建立連線所需的所有函式和事件。
建立對等互連連線
實作 WebRTC 功能的應用程式通常會依賴 RTCPeerConnection
介面。從呼叫端 (也就是對等連線啟動的對等點) 開始,建立連線的程序通常為:
- 以適當的 ICE 設定建立新的
RTCPeerConnection
執行個體。 - 使用
RTCPeerConnection.createOffer()
建立本機 SDP 說明。 - 使用
RTCPeerConnection.setLocalDescription()
設定本機 SDP 說明。 - 使用信號服務將本機 SDP 說明傳輸到遠端對等節點。
- 在
RTCPeerConnection
上註冊icecandidate
事件監聽器, - 針對每個
icecandidate
事件,使用信號服務將服務轉移至遠端對等點。 - 等待信號服務傳入的遠端 SDP 說明,並使用
RTCPeerConnection.setRemoteDescription()
進行設定。 - 等待信號服務傳送的遠端 ICE 候選訊息,然後使用
RTCPeerConnection.addIceCandidate()
新增這些訊息
在被動端,這個過程的程序略有不同。
- 以適當的 ICE 設定建立新的
RTCPeerConnection
執行個體。 - 等待信號服務傳入的遠端 SDP 說明,並使用
RTCPeerConnection.setRemoteDescription()
進行設定。 - 呼叫
RTCPeerConnection.createAnswer()
為遠端 SDP 說明建立答案。 - 使用訊號服務將答案傳輸至遠端對等節點。
- 在
RTCPeerConnection
上註冊icecandidate
事件監聽器, - 針對每個
icecandidate
事件,使用信號服務將服務轉移至遠端對等點。 - 等待信號服務傳送的遠端 ICE 候選訊息,然後使用
RTCPeerConnection.addIceCandidate()
新增這些訊息
使用這個 API 的挑戰,是大多數作業都是非同步的,因此實作 WebRTC 應用程式的實作其實相當複雜。許多函式會傳回一個 Promise
,必須先進行處理,才能進行下一個步驟。
因此,使用此 API 實作應用程式時,開發人員應使用 async
和 await
而非 Promise.then()
來註冊事件監聽器,因為這樣可以更簡化您的程式碼。請參考以下範例:
function createAndSendOffer(peerConnection, signallingService) {
peerConnection.createOffer()
.then(offer => {
signallingService.send({
type: 'offer',
data: offer
});
});
}
使用 async
和 await
編寫上述程式碼時,我們會取得下列結果:
async function createAndSendOffer(peerConnection, signallingService) {
const offer = await peerConnection.createOffer();
signallingService.send({
type: 'offer',
data: offer
});
}