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