Hi

Long story, I won't tell you because

• I really don't know what led to its creation. I'm a developer not a historian.

BUT

• I know that it makes a developer's life easier by giving built-in functions to create video calls.

Jk. Of course I will tell you how webrtc works.

Let me refer my notes.

Let's just go to https://webrtc.org

     ┌──────┐       ┌──────┐
     │ Src  │       │ Node │
     └──┬───┘       └──┬───┘
        │              │
        │              │
     ┌──▼───┐       ┌──▼───┐
     │ Node │───────│ Node │
     └──┬───┘       └──┬───┘
        │              │
        │              │
     ┌──▼───┐       ┌──▼───┐
     │ Node │       │ Dest │
     └──────┘       └──────┘

This is what ChatGPT things a P2P network looks like.

I am not gonna explain P2P. You use torrents frequently.

To send a live video of my face to you, here's what is needed

• Clean my face so that I don't look ugly
• Capture video from camera using Browser APIs, convert each frame into a stream of bytes.
• Send the bytes along the network, hopping to each node until it reaches the destination.

The other person will do the same (hopefully they follow step 1 & 2).

• Sounds simple enough until you realize that it is not possible to know where you need to send your bytes.
• Unlike real world addresses, IP addresses are kinda useless in finding the exact machine the other person is using.
• Machines are usually behind a NAT gate - fancy speak for reused IP addresses (because we ran out of unique numbers smh).
• In order to find where your peer resides, you need another guy who knows both of you to tell each other where they are.

• And that guy is a server.
• I do realize the irony of having a "server" in a peer-to-peer connection.
• But this server only exists to tell you your own virtual address and how to reach you.

Creating an offer

const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// {"type":"offer","sdp":"v=0\r\no=- 1887124698810677396 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=extmap-allow-mixed\r\na=msid-semantic: WMS\r\n"}

• "Offer" holds the information on how to reach you.
• You have to send this to the other person.
• We could print this information and tie it to the legs of a carrier pigeon and send it.
• WebRTC doesn't tell you how to live your life. It only deals with stuff that involves P2P data transfer.

Accepting offer and sending an answer

const peerConnection = new RTCPeerConnection(configuration);
const message = getMessageFromCarrierPigeon()
if (message.offer) {
    peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    sendMessageThroughCarrierPigeon({'answer': answer});
}

Code is self-explanatory (you should have attended my talk).

ICE ICE Baby

That's a nice song.

ICE ICE Baby

• ICE - another big word - Interactive Connectivity Establishment
• So you remember the part about finding the addresses and directions?
• Yeah, that doesn't exactly work because networks aren't stable.
• We have to kinda exchange the network information frequently and discover all ways to reach each other.

ICE ICE Baby

// Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
    if (event.candidate) {
        signalingChannel.send({'new-ice-candidate': event.candidate});
    }
});

// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
    if (message.iceCandidate) {
        try {
            await peerConnection.addIceCandidate(message.iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
});

ICE ICE Baby

// Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
    }
});

We're finally connected. It fails 90% of the times btw.

User Media

• In order to get the camera and the mic feed of the user, browsers provide us with the following APIs.

navigator.mediaDevices.getUserMedia(constraints);

Remote Media

const remoteVideo = document.querySelector('#remoteVideo');

peerConnection.addEventListener('track', async (event) => {
    const [remoteStream] = event.streams;
    remoteVideo.srcObject = remoteStream;
});

• The moment you call addTrack on the peerConection, the other party receives a track event.
• You can directly set this track object on a html video element and you're done.