音视频学习笔记-WebRTC协商过程

音视频学习笔记 - WebRTC协商过程

RTCPeerConnection

它是WebRTC中最关键的一个类, 端到端间的媒体协商就是基于该类对象实现的.

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

协商过程

• Offer

  在双方通讯时, 呼叫发送的SDP消息称为Offer.

• Answer

  在双方通讯时, 被呼叫方发送的SDP消息称为Answer.

时序图

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

1. 呼叫方创建Offer类型的SDP消息, 调用setLocalDescription方法将该Offer保存到本地Local域, 再通过信令将Offer发送给被呼叫方.
2. 被呼叫方收到Offer类型的SDP消息后, 调用setRemoteDescription方法将Offer保存到它的Remote域.
3. 被呼叫方创建Answer类型的SDP消息, 调用setLocalDescription方法将Answer类型的SDP消息保存到本地的Local域.
4. 被呼叫方将Answer消息通过信令发送给呼叫方.
5. 呼叫方收到Answer类型的消息后, 调用setRemoteDescription方法, 将Answer保存到它的Remote域.

当通讯双方拿到彼此的SDP消息后, 就可以进行媒体协商了.

代码实现

1. 呼叫方创建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
        );
    }