對等連線

RTCPeerConnection 是 WebRTC API 的中心介面。這項服務 代表本機與遠端對等點之間的連線,用來代理所有 建立連線所需的函式和事件。

建立對等互連連線

實作 WebRTC 功能的應用程式通常會依賴於 RTCPeerConnection 介面。在呼叫端 (即對等點) 建立連線的程序,通常是 包括:

  1. 使用合適的 ICE 建立新的 RTCPeerConnection 執行個體 此外還會從 0 自動調整資源配置 您完全不必調整資源調度設定
  2. 使用 RTCPeerConnection.createOffer() 建立本機 SDP 說明。
  3. 使用以下語言設定本機 SDP 說明: RTCPeerConnection.setLocalDescription()
  4. 將本機 SDP 說明 (使用訊號服務) 傳輸至遠端 。
  5. RTCPeerConnection 上註冊 icecandidate 事件的事件監聽器。
  6. 針對每個 icecandidate 事件,使用訊號服務將其轉移至 複製到遠端對等節點
  7. 等待訊號服務收到遠端 SDP 說明,並 請使用 RTCPeerConnection.setRemoteDescription() 進行設定。
  8. 等待信號服務收到遠端 ICE 候選名單,然後新增 對象使用RTCPeerConnection.addIceCandidate()

對受話者來說,流程會略有不同。

  1. 使用合適的 ICE 建立新的 RTCPeerConnection 執行個體 此外還會從 0 自動調整資源配置 您完全不必調整資源調度設定
  2. 等待訊號服務收到遠端 SDP 說明,並 請使用 RTCPeerConnection.setRemoteDescription() 進行設定。
  3. 呼叫 RTCPeerConnection.createAnswer()
  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
    });
}