音視頻學習筆記 - WebRTC協(xié)商過程

RTCPeerConnection

它是WebRTC中最關(guān)鍵的一個類, 端到端間的媒體協(xié)商就是基于該類對象實現(xiàn)的.

...
var pcConfig = null;
var pc = new RTCPeerConnection(pcConfig);
...

協(xié)商過程

• Offer

  在雙方通訊時, 呼叫發(fā)送的SDP消息稱為Offer.

• Answer

  在雙方通訊時, 被呼叫方發(fā)送的SDP消息稱為Answer.

時序圖

Screen Shot 2020-03-08 at 8.35.33 PM.png

1. 呼叫方創(chuàng)建Offer類型的SDP消息, 調(diào)用setLocalDescription方法將該Offer保存到本地Local域, 再通過信令將Offer發(fā)送給被呼叫方.
2. 被呼叫方收到Offer類型的SDP消息后, 調(diào)用setRemoteDescription方法將Offer保存到它的Remote域.
3. 被呼叫方創(chuàng)建Answer類型的SDP消息, 調(diào)用setLocalDescription方法將Answer類型的SDP消息保存到本地的Local域.
4. 被呼叫方將Answer消息通過信令發(fā)送給呼叫方.
5. 呼叫方收到Answer類型的消息后, 調(diào)用setRemoteDescription方法, 將Answer保存到它的Remote域.

當通訊雙方拿到彼此的SDP消息后, 就可以進行媒體協(xié)商了.

代碼實現(xiàn)

1. 呼叫方創(chuàng)建Offer

      function doCall() {
          console.log('Sending offer to peer');
          pc.createOffer(setLocalAndSendMessage, handleCreateOfferError);
     }  
   
     function setLocalAndSendMessage(sessionDescription) {
         pc.setLocalDescription(sessionDescription);
         sendMessage(sessionDescription);
     }
   
     socket.on('message', function(message) {
         ...
         } else if (message.type === 'answer') {
       
             pc.setRemoteDescription(new RTCSessionDescription(message));
         } else if (...) {
             ...
         }
         ....
     });
   

2. 被呼叫方收到Offer

    socket.on('message', function(message) {
         ...
         } else if (message.type === 'offer') {
       
             pc.setRemoteDescription(new RTCSessionDescription(message));
             doAnswer();
         } else if (...) {
             ...
         }
         ....
     });
   
   
    function doAnswer() {
        pc.createAnswer().then(
            setLocalAndSendMessage,
            onCreateSessionDescriptionError
        );
    }