對等連線

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