One development skill a day: how to establish P2P communication based on webrtc?

at present EasyGBS The platform has been supported Webrtc The video stream of the protocol is output , It's a great progress for us .webrtc timeliness 、 The advantage of low delay can make the video output industry reach a new height , In this article, we mainly share with you the development process webrtc establish P2P The process of , The process is mainly divided into two parts , One is the initiator , One is the receiver , Let's explain the operation of these two parts in detail .

Originator

a、 The initiator creates websocket A long connection .

b、 establish PeerConnection object , And mainly monitor onicecandiate、addstream and onconnectionstatechange Method .onicecandiate The method is data collection , Through websocket Send it to the receiving end for processing PeerConnection Of addIceCandiate Method to save and set ;addstream The method is to get the remote stream and play it ;onconnectionstatechange The way is PeerConnetion Remote connection status （connectioned Represents a successful connection ,disconnected Represents disconnection ）.

c、 Turn on the local audio and video device , And add audio and video to PeerConnection On the object , What is used is addStream or addTrack（ This method can only add a single stream , You can use this method twice to add multiple streams ） Method .

d、 Use PeerConnection Of createOffer Method to get SDP Information ,SDP Including various audio and video codec, encryption and other related parameters .

e、PeerConnection Of setLocalDescription Method change SDP Save the settings , Through websocket The server sends it to the receiver .

f、 The initiator receives the message sent by the receiver SDP Information , And pass PeerConnection Of setRemoteDescription Method to save the settings .

g、 In this way, we can communicate with each other .

The receiver

a、 The receiver creates websocket A long connection .

b、 establish PeerConnection object , And mainly monitor onicecandiate、addstream and onconnectionstatechange Method .onicecandiate The method is data collection , Re pass websocket Send it to the receiving end for processing PeerConnection Of addIceCandiate Method to save and set ;addstream The method is to get the remote stream and play it ;onconnectionstatechange The way is PeerConnetion Remote connection status （connectioned Represents a successful connection ,disconnected Represents disconnection ）.

c、 Turn on the local audio and video device , And add audio and video to PeerConnection On the object , What is used is addStream or addTrack（ This method can only add a single stream , You can use this method twice to add multiple streams ） Method .

d、 Receive the... Sent by the sender offer SDP Information , Re pass PeerConnection Of setRemoteDescription Method to save the settings .

e、 In the use of PeerConnection Of createAnswer Method to get SDP Information ,SDP It also contains various audio and video related parameters . And pass websocket The server sends it to the initiator .

f、 Receive the... Sent by the initiator SDP Information , And pass PeerConnection Of setRemoteDescription Method to save the settings .

So you can communicate with each other .

summary

1、a~c The steps are the same ;

2、 Set each other's SDP and ICE Information ;

3、 monitor PeerConnection Of addstream To get the remote stream ;

4、 The following is my summary of the main flow chart .