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
});
}