對等連線

RTCPeerConnection 是 WebRTC API 的中心介面。代表本機和遠端對等互連之間的連線,並提供建立連線所需的所有函式和事件。

建立對等互連連線

實作 WebRTC 功能的應用程式通常會大量依賴 RTCPeerConnection 介面。在呼叫端 (即啟動連線的對等互連端) 建立連線的流程通常如下:

  1. 使用適當的 ICE 設定建立新的 RTCPeerConnection 執行個體。
  2. 使用 RTCPeerConnection.createOffer() 建立本機 SDP 說明。
  3. 使用 RTCPeerConnection.setLocalDescription() 設定本機 SDP 說明。
  4. 使用信號服務將本機 SDP 說明轉移至遠端對等互連。
  5. RTCPeerConnection 上註冊 icecandidate 事件的監聽器。
  6. 將每個 icecandidate 事件 (使用信號服務) 轉移至遠端對等互連。
  7. 等待信號服務傳入遠端 SDP 說明,並使用 RTCPeerConnection.setRemoteDescription() 設定。
  8. 等待信號服務傳送遠端 ICE 候選項目,然後使用 RTCPeerConnection.addIceCandidate() 新增這些項目

在接聽端,程序稍有不同。

  1. 使用適當的 ICE 設定建立新的 RTCPeerConnection 執行個體。
  2. 等待信號服務傳入遠端 SDP 說明,並使用 RTCPeerConnection.setRemoteDescription() 設定。
  3. 呼叫 RTCPeerConnection.createAnswer(),為遠端 SDP 說明建立回覆。
  4. 將答案 (使用信號服務) 轉移至遠端對等互連。
  5. RTCPeerConnection 上註冊 icecandidate 事件的監聽器。
  6. 將每個 icecandidate 事件 (使用信號服務) 轉移至遠端對等互連。
  7. 等待信號服務傳送遠端 ICE 候選項目,然後使用 RTCPeerConnection.addIceCandidate() 新增這些項目

這個 API 的挑戰在於,這些作業大多是非同步,因此 WebRTC 應用程式的實際實作通常很複雜。許多函式會傳回 Promise,必須先解決這個問題,程序中的下一個步驟才能繼續。

建議開發人員使用這個 API 實作應用程式時,採用 asyncawait,而非註冊監聽器 (使用 Promise.then()),因為這樣程式碼會更容易追蹤。請參考以下範例:

function createAndSendOffer(peerConnection, signallingService) {
    peerConnection.createOffer()
                  .then(offer => {
                      signallingService.send({
                          type: 'offer',
                          data: offer
                      });
                  });
}

使用 asyncawait 編寫上述程式碼時,會得到下列結果:

async function createAndSendOffer(peerConnection, signallingService) {
    const offer = await peerConnection.createOffer();
    signallingService.send({
        type: 'offer',
        data: offer
    });
}