Master WebRTC: Build Real‑Time Browser Video Calls from Scratch

1 Introduction

WebRTC is an open‑source project that enables real‑time communication between browsers and mobile apps. It is built into modern browsers, allowing high‑quality audio and video streams without any third‑party software or plugins.

Main JavaScript APIs

MediaStream – audio/video stream object

RTCPeerConnection – peer‑to‑peer connection object

RTCDataChannel – peer‑to‑peer data channel

Supported Platforms

Firefox, Opera, Chrome (default support and can communicate with each other)

IE up to version 10 does not support WebRTC; Edge 15+ does; see “Can I use” for latest support

Native Android and iOS applications also support WebRTC

2 Connection Establishment Process

2.1 Overview

To establish a connection you need the remote peer’s IP address and port, as well as information about supported audio/video codecs and hardware. With this information you can create an

RTCPeerConnection

object.

2.2 Obtaining the Address

Because real‑world networks are complex, you may need STUN, TURN and ICE to discover or relay addresses. Three typical network situations exist:

Public network – peers can reach each other directly.

NAT network – devices are behind a private IP; a STUN request discovers the public address.

Strict NAT network – devices can only initiate outbound traffic; a TURN server relays traffic, and ICE combines STUN and TURN to choose the appropriate method.

2.3 Exchanging Capability Information

The Session Description Protocol (SDP) carries codec, network and bandwidth information in a textual “card” that each peer exchanges.

3 Building a Simple WebRTC App

The example creates a local application that captures the camera, displays the local stream, and establishes a peer connection within the same browser. In a real scenario a WebSocket server would be required for signaling.

<code>function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}
function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection ||
        window.webkitRTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.msRTCPeerConnection;
    return !!window.RTCPeerConnection;
}</code>

Configure two

RTCPeerConnection

objects (using the default STUN server or a custom one):

<code>var configuration = {
    // iceServers: [{ url: "stun:127.0.0.1:9876" }]
};
youConnection = new RTCPeerConnection(configuration);
otherConnection = new RTCPeerConnection(configuration);</code>

Exchange ICE candidates:

<code>youConnection.onicecandidate = function(event) {
    if (event.candidate) {
        console.log(event.candidate);
        otherConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
};
otherConnection.onicecandidate = function(event) {
    if (event.candidate) {
        console.log(event.candidate);
        youConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
};</code>

Exchange SDP offer/answer:

<code>var offerOptions = {
    offerToRecceiveAudio: 1,
    offerToReceiveVideo: 1
};
youConnection.createOffer(offerOptions)
    .then(function(offer) {
        console.log(offer);
        youConnection.setLocalDescription(offer);
        otherConnection.setRemoteDescription(offer);
        return otherConnection.createAnswer(offerOptions);
    })
    .then(function(answer) {
        console.log(answer);
        otherConnection.setLocalDescription(answer);
        youConnection.setRemoteDescription(answer);
    });</code>

Add the media stream to the video element:

<code>youConnection.onaddstream = function(event) {
    you.srcObject = event.stream;
};
otherConnection.addStream(stream);</code>

4 References

Learning WebRTC

WebRTC Authoritative Guide

WebRTC Zero‑Basis Developer Tutorial