What exactly is WebRTC

preface

  • WebRTC may be unfamiliar to most front-end developers and will not cross paths in their daily development work. However, nowadays popular C2C distance teaching, cloud games, etc., are inseparable from WebRTC’s shadow.
  • WebRTC (Web Real-Time Communication) is an API that can be used in video chat, audio chat, P2P file sharing and other Web apps – Excerpted from MDN[developer.mozilla.org/zh-CN/docs/…
  • Establish an end-to-end audio and video communication channel, and both ends communicate data through the established channel.

The webRTC trilogy

WebRTC mainly consists of three parts:

  • GetUserMedia: obtains the media rights (video and audio) on the device. The permission is required.
  • RTCPeerConnection: Establishes a communication channel for video and audio transmission.
  • RTCDataChannel: Establishes the communication ends and exchanges data through the RTCDataChannel object.

RTCPeerConnection The process of establishing a connection

  • In the figure above, the process of establishing a connection with RTCPeerConnection consists of the initiating end, Stun server, signaling server, and reply end. Stun server and signaling server need to be implemented according to their own business scenarios, but Stun server has some public services, such as: Google’s service (stun:stun.l.google.com: 19302).
  • 1.let rtcPeerConnection = new RTCPeerConnection({ "iceServers": [ { "url": 'stun:stun.l.google.com:19302 } ] });Create an RTCPeerConnection object
  • 2. Connect to the signaling server to get your OWN Id and other ends connected to the signaling server (here it can be seen as many members in a room, we need to know the list of all members in the room)
  • 3. Add the video track, which will be conveyed to the other end (non-connection essential factor)
  • 4. Create an offer that contains an SDP object containing parameters related to the current audio and video
  • 5. SetLocalDescription saves the SDP object
  • 6. Send the parameters containing SDP information to the signaling server
  • 7. After receiving the SDP information from the initiator, the answering end will call setRemoteDescription to save the SDP information and create an answer(SDP object) to send to the initiator
  • 8. After receiving the answer, the initiator saves the SDP information in the answer through setRemoteDescription
  • 9. The initiating end and the answering end create corresponding audio and video channels according to THE SDP information, and enable icecandidate data collection. (IcecandiDate can be understood as obtaining the IP address of the peer or public IP address.) The initiator receives candidate information through onicecandidate.
  • 10. The sender sends the candidate information to the answering end through the signaling server.
  • The answer side saves the candidate through the addicecandidate
  • 12. Same as 10, the answering end sends the candidate information to the originator
  • 13. The initiator passes the candidate (which describes the state of the remote end of the connection) to the browser’s ICE agent through the addIceCandidate
  • In this way, the P2P audio and video channel is established between the initiating end and the answering end. The initiating end receives the video stream sent by the answering end through the onAddStream callback interface.

conclusion

  • The above is the whole process of RTCPeerConnection connection establishment that I understand in practice at work. In the future, I will update irregularly how RTCPeerConnection conducts data interaction and relevant practice scenarios. WebRTC is also the first contact in the work, in the process of exploring and summarizing, if there is any inappropriate place, welcome to leave a message!

– Updated content: The connection process is not unique. The connection process can also be reversed. The server creates an offer to initiate the connection, which can solve the requirements of some specific scenarios, such as compatible with incompatible features of ios Safari, to complete the link session of Safari webRtc, etc.