“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

This article is the second in the WebRTC series. The previous article introduced MediaDevice data collection, and this article takes a look at PeerConnections.

PeerConnections Connects WebRTC users. Users connected through PeerConnections can send audio and video messages for real-time communication. New RTCPeerConnection creates a PeerConnection. This PeerConnection can be connected with other peerConnections. If the connection is successful, audio and video data can be sent.

SDP

SDP exchange is required for PeerConnection, because in order to send audio and video to each other, it is necessary to know the support of the peer end for audio and video protocol format and other related functions. In order to send data smoothly, the intersection of the two ends is required to ensure the agreement can be reached before normal transmission. SDP describes these information. Therefore, SDP information must be sent to the peer end during the connection.

RTCPeerConnection instance has two methods createOffer and createAnswer to create SDP. WebRTC requires one end to send offer and the other end to reply answer to ensure the connection is correct. RTCPeerConnection SDP

  1. A createOffer offerA
  2. A setLocalDescription offerA
  3. A sends offerA to B
  4. B setRemoteDescription offerA
  5. B createAnswer AnswerB
  6. B setLocalDescription AnswerB
  7. B sends AnswerB to A
  8. A setRemoteDescription AnswerB

At this point, both ends receive the SDP information of the opposite end. Example code:

let PC1, PC2;
PC1 = new RTCPeerConnection({});
PC2 = new RTCPeerConnection({});

const offer = await PC1.createOffer({ offerToReceiveAudio: 1.offerToReceiveVideo: 1 });
await PC1.setLocalDescription(offer);
await PC2.setRemoteDescription(offer);
const answer = await PC2.createAnswer();
await PC2.setLocalDescription(answer);
await PC1.setRemoteDescription(answer);
Copy the code

ICE

In addition to exchanging SDP, ICE message passing is also required here. SDP negotiates the media transfer format, while ICE negotiates the connection mode with the peer end. The RTCPeerConnection object provides the icecandiDate event and the addIceCandidate method. When setLocalDescription is executed on one end, the SDP is complete and ready to connect. This will trigger the icecandidate event on the current object, which contains the candidate information transmitted by ICE. We need to send this information to the peer and add it to the peer through the addIceCandidate to complete the ICE connection:

let PC1, PC2;
PC1 = new RTCPeerConnection({});
PC2 = new RTCPeerConnection({});

PC1.addEventListener('icecandidate'.e= > {
    PC2.addIceCandidate(e.candidate);
});
PC2.addEventListener('icecandidate'.e= > {
    PC1.addIceCandidate(e.candidate);
});
Copy the code

We can use addTrack method on RTCPeerConnection object to add the audio and video track data to be sent. From the previous article, we know that track can be obtained by getUserMedia:

const stream = await navigator.mediaDevices.getUserMedia({ video: true.audio: true });
stream.getTracks().forEach(track= > PC1.addTrack(track, stream));
Copy the code

On the other end, it can be received by listening to track events on RTCPeerConnection, and can use the video tag to view the received data:

remotePC.addEventListener('track'.e= > {
	if(video.srcObject ! == e.streams[0]) {
    video.srcObject = e.streams[0]; }});Copy the code

At this point, the whole process of PeerConnection to create a connection and send audio and video is completed. But at present, our PC1 and PC2 are together, and they must be two users in the actual application. At this time, SDP and ICE exchange will no longer be a local behavior, we need a server to forward the information of the peer end. In RTC applications this server becomes a signaling server. This is the second article in the RTC series, and the next article will use PeerConnection + signaling server to implement real RTC applications.