WEBRTC Study Summary

WEBRTC Introduction

WebRTC (Web real-time Communications) is a protocol that allows us to implement peer-to-peer on the browser. We can use this protocol to transfer text, voice, video and file content. This article has recorded some personal understanding of my learning process. It is highly recommended to read the documentation for MDN for systematic learning.

Simple process

First, we have a bit a and point B want to communicate with each other. At the same time, we need an intermediary s to transmit information, s can be a server, but it is a person to manually pass.

Process

2. A and B create rtcpeerconnection objects-connection respectively.

4. A and B each listen to their respective connection.onicecandidate events, and this event is invoked with a unique credential candidate.

6. A first call Connection.createoffer to get a voucher offer, and then call Connection.setlocaldescription (offered). Then pass it through S to B.

8. b receive an offer from a, call connection.setremotedescription, and then get a voucher answer through Connection.createanswer (), Call Connection.setlocaldescription (answer) and return the answer to a by S.

10. A receives the answer provided by B, calling Connection.setremotedescription (answer).

12. At this point both A and B get the basic information for both local and remote.

14. Then A and B are passed through similar processes to each other to get the candidate, respectively called Connection.addicecandidate (candidate). Notice that the incoming candidate is provided by the other party.

16. Once the above steps have been completed, a link between A and B is established so that you can communicate.

    Some notes

18. The Rtcpeerconnection Createoffer and Createanswer methods are created by the SDP object, which is the Rtcsessiondescription class in the browser.

20. The SDP object is used to describe some information that needs to be transferred, such as format, resolution, and encoding. Therefore, before calling Createoffer and Createanswer, it is necessary to invoke the interface associated with the transport content, such as Addstream.

22. By exchanging the SDP, both parties will be able to know some basic information about what the other is transmitting.

24. A and B establish links that need to get each other's candidate separately.

    How to get video and audio streaming

    The above process only provides how to make a and B links, then how to transfer the video stream?

• The browser provides the Mediadevices.getusermedia () method to get the video and audio streams. The sample code is as follows:

navigator.mediaDevices.getUserMedia({ video: true, audio: false })    .then(stream => {        // 使用 stream    }).catch(err => {        console.log(‘An error occured ‘ + err);    });

• Listens for Connection.onaddstream events after connection is created.
• A before Createoffer, B calls the Connection.addstream () method before Createanswer, passing in the stream obtained by the first step. The need to call before Createoffer and Createanswer is because WEBRTC needs to create information about the content, such as the format of the content, resolution, based on the contents of the transfer.
• When the communication between A and B is established successfully, the previously monitored Onaddstream event is called, at which point the incoming parameter gets the stream.

A and B exactly how to establish the link?

At the beginning of the study I always have doubts, real life network situation is very complex, if there is no public IP or not a network segment, WEBRTC is how to let A and B find each other, or through what configuration I can let A and B find each other.

In fact, WEBRTC used the ice protocol. Currently, ICE has two main protocols, namely stun and turn.

We can pass in the ice-related configuration when we create the Rtcpeerconnection object, for example:

const peerConnection = new RTCPeerConnection({    iceServers: [        { urls: [‘turn:turn1.example.com‘, ‘turn:turn2.example.com‘] }        { urls: ‘stun:stun1.example.com‘ }    ]});

The WEBRTC then attempts to pass in the supplied iceservers, until one can be used, and then calls the Rtcpeerconnection.onicecandidate callback method to pass in an ice token that can be used when it cannot be connected directly. A and b get their own ice tokens, pass s to the pair, and when both A and B get their tokens, they will know how to establish a link to each other.

So in order for A and b to be easy to establish links, we need to provide a signal server s and several servers that support the ICE protocol. where S server is responsible for the transfer of data between A and B, so you can choose the way you like to implement, commonly used is to use Websock, Similar to implementing a simple chat room. and the server that supports the ice protocol, Coturn can be very competent, of course, can also choose their favorite ice server, and even use the third party to provide.

Some information

During the learning process I relied mainly on the information and tutorials provided on MDN.
1. Video Call demo.
1. Demo code.
1. How to resolve the OpenSSL problem in Coturn compilation.

WEBRTC Study Summary