對等連線

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