學習目標

• 了解 RTCPeerConnection 中 SDP offer/answer 流程

延續上章節的實作，這裡會繼續講解每個步驟

SDP offer/answer

在建立 WebRTC 連線過程中，最為重要的一環：

• switched SDP ( 交換信息 )

    // ...
    const offer = await localPeer.createOffer();
    try {
      await localPeer.setLocalDescription(offer);
      await remotePeer.setRemoteDescription(offer);
  
      // remote endpoint get the local pc offer(SDP)
      const answer = await remotePeer.createAnswer();
  
      await remotePeer.setLocalDescription(answer);
      await localPeer.setRemoteDescription(answer);
    } catch (e) {
      // ... catch error
    }
  

  使用 Session Description Protocol（SDP)協定的 offer 與 answer 來交換多媒體相關的資訊（例如解析度與 codec 等)以及連線資訊等，利用這些資訊來確認彼此身份/網路資訊以及要傳輸的多媒體數據。

  將上述流程分解後：

  1. localPeer(也可以看成Client A) 為了建立新的 WebRTC 連線，透過 createOffer 建立新的 SDP offer 給 remotePeer(可以看成Client B)。
  2. createOffer 成功後，新的 SDP offer 要先透過 setLocalDescription 來更新自身的 localDescription 資訊，再由 Signaling Server(中介層傳輸 ex: socket server ...) 傳輸給 Client B。
  3. Client B 接收到 SDP offer 後，透過 setRemoteDescription 來更新自身的 remoteDescription 資訊。
  4. Client B 更新成功後，藉由 createAnswer 建立 SDP answer 來回應給 Client A，回應前也是要先更新自身的 localDescription 資訊。

  以上就是整個 offer/answer 交換流程，白話來說，就像是平時講電話的模式:

  一方主動打給另一方，另一方收到來電訊息，確認來電者後，並接起電話，雙方即能進行通話 ?
  

  • methods

    • createOffer：

      The createOffer() method of the RTCPeerConnection interface initiates the creation of an SDP offer for the purpose of starting a new WebRTC connection to a remote peer.
      引用自MDN

      稍微描述一下，就是在連線的發起端需要新建SDP offer 給接收端，讓其能確認網路訊息,多媒體資訊等。

      

      SDP offer中能夠透過type分辨類型(offer/answer)。

    • createAnswer：

      The createAnswer() method on the RTCPeerConnection interface creates an SDP answer to an offer received from a remote peer during the offer/answer negotiation of a WebRTC connection. The answer contains information about any media already attached to the session, codecs and options supported by the browser, and any ICE candidates already gathered. The answer is delivered to the returned Promise, and should then be sent to the source of the offer to continue the negotiation process.
      引用自MDN

      稍微描述一下，當接收端收到來自發起端的offer時，確認後需要新建 answer 來回應發起端來達成建立連線的共識。

      

    • setLocalDescription：

      The RTCPeerConnection method setLocalDescription() changes the local description associated with the connection. This description specifies the properties of the local end of the connection, including the media format.
      引用自MDN

      間單說，就是更新自身的連線資訊，在createOffer/createAnswer後，都需要先更新自身資訊後，在傳輸給遠端～

    • setRemoteDescription：

      The RTCPeerConnection method setRemoteDescription() sets the specified session description as the remote peer's current offer or answer. The description specifies the properties of the remote end of the connection, including the media format.
      引用自MDN

      相對的，這就是更新自身遠端的連線資訊。

延伸思考:

可以看看localPeer與remotePeer彼此資訊

• 有何差異?
• 差異的原因?

localPeer:

remotePeer:

總結

透過 SDP offer/answer 交換流程，讓發起端與接收端交換彼此的信息，
並能夠以此來達成雙方連線的建立。

統整一下上述在所用到的 RTCPeerConnection methods。

methods

• createOffer
• createAnswer
• setLocalDescription
• setRemoteDescription

新手入門，如有錯誤，歡迎指正～～～

系列文章同步更新於部落格