Summary

Because we are working on WebRTC related projects recently, in order to have a deeper understanding of WebRTC connection and transmission, we should write an article to introduce it. From the beginning Official documents of WebRTC Start with, and of course, the inside samples . Because the communication process has not been involved, we should start from the connection process.

SDP

SDP is Session Description Protocol from File It can be seen that it is the standard protocol of p2p connection, including codec, address and time information of audio and video. SDP is not a communication protocol. The communication protocol is generally RTP or SRTP (secure RTP), but SDP is generally required to establish the connection first.

Session description

Sessions are described by lines and field s. The format is:

<character>=<value>

Where < character > is a case sensitive letter, < value > is a structured string, usually encoded by utf-8, and the equal sign cannot be followed by a space directly.
There are three main blocks in SDP message, session, timing and media description. Each message contains multiple timing and media descriptions. The field order of each line is fixed, * = means optional, and each meaning is as follows:

**Session description**
    v=  (protocol version number, currently only 0)
    o=  (originator and session identifier : username, id, version number, network address)
    s=  (session name : mandatory with at least one UTF-8-encoded character)
    i=\* (session title or short information)
    u=\* (URI of description)
    e=\* (zero or more email address with optional name of contacts)
    p=\* (zero or more phone number with optional name of contacts)
    c=\* (connection information—not required if included in all media)
    b=\* (zero or more bandwidth information lines)
    _One or more **Time descriptions** ("t=" and "r=" lines; see below)_
    z=\* (time zone adjustments)
    k=\* (encryption key)
    a=\* (zero or more session attribute lines)
    _Zero or more **Media descriptions** (each one starting by an "m=" line; see below)_

**Time description** (mandatory)
    t=  (time the session is active)
    r=\* (zero or more repeat times)

**Media description** (if present)
    m=  (media name and transport address)
    i=\* (media title or information field)
    c=\* (connection information — optional if included at session level)
    b=\* (zero or more bandwidth information lines)
    k=\* (encryption key)
    a=\* (zero or more media attribute lines — overriding the Session attribute lines)

A common SDP message is as follows:

   v=0
   o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
   s=
   c=IN IP4 host.anywhere.com
   t=0 0
   m=audio 49170 RTP/AVP 0
   a=rtpmap:0 PCMU/8000
   m=video 51372 RTP/AVP 31
   a=rtpmap:31 H261/90000
   m=video 53000 RTP/AVP 32
   a=rtpmap:32 MPV/90000

RTCPeerConnection

All connections are from RTCPeerConnection This object starts, he inherits from EventTarget , with the ability to increase event monitoring.

Caller caller (streaming party pc1)

• Create RTCPeerConnection object and prepare Stream object to be pushed

pc1 = new RTCPeerConnection(servers);
localStream.getTracks().forEach((track) => {
  pc1.addTrack(track, localStream);
});

• Create an Offer and set it to your own LocalDescription

const offerOptions = {
  offerToReceiveAudio: 1,
  offerToReceiveVideo: 1
};
const offer = await pc1.createOffer(offerOptions);
pc1.setLocalDescription(offer);

• Get Anwser of pc2 and set it to its own RemoteDescription

pc1.setRemoteDescription(answer);

Callee receiver (player pc2)

• Get the Offer of pc1 and set it to your own RemoteDescription

pc2.setLocalDescription(desc);

• Create an Anwser and set it to its own LocalDescription

const answer =pc2.createAnswer();
pc2.setLocalDescription(answer);