Master WebRTC: From Basics to Real‑Time Video Calls in the Browser

What is WebRTC?

WebRTC (Web Real‑Time Communications) is a free, open project that enables browsers to perform real‑time audio/video communication via simple JavaScript APIs.

Google acquired GIPS in 2011, open‑sourced its codecs and echo‑cancellation, and promoted WebRTC as “browser + WebRTC” to allow peer‑to‑peer media streams.

WebRTC Architecture

Typical stack (top‑down): Web API layer (standard JavaScript APIs), C++ API layer (browser implementation), VoiceEngine (audio codecs such as iSAC, iLBC, Opus; NetEQ; echo cancellation, noise reduction), VideoEngine (VP8 codec, jitter buffer, image enhancements), Transport (RTP, STUN/TURN/ICE), Hardware modules.

Key Classes and APIs

MediaStream and MediaStreamTrack

MediaStreamTrack represents a single audio or video track; MediaStream aggregates one or more tracks and synchronises playback.

Constraints

Constraints define required media properties. Example:

<code>const constraint1 = {
  "audio": true, // capture audio
  "video": true  // capture video
};

const constraint2 = {
  "audio": {
    "sampleSize": 8,
    "echoCancellation": true
  },
  "video": {
    "width": {"min":"381","max":"640"},
    "height": {"min":"200","max":"480"},
    "frameRate": {"min":"28","max":"10"}
  }
};</code>

Getting Local Media

Use

navigator.mediaDevices.getUserMedia(constraints)

(or the older

navigator.getUserMedia

) to request camera/microphone access and attach the resulting stream to a

video

element.

<code>var video = document.querySelector('video');
navigator.mediaDevices.getUserMedia({audio:true, video:true})
  .then(function(stream){
    video.srcObject = stream;
  })
  .catch(function(err){ console.log(err); });</code>

RTCPeerConnection

Creates a peer‑to‑peer connection that can transmit media without a dedicated server (though signaling is still required).

<code>var pc = new RTCPeerConnection({
  iceServers: [
    {url: "stun:stun.l.google.com:19302"},
    {url: "turn:[email protected]", credential: "pass"}
  ]
});</code>

Typical workflow: setRemoteDescription(offer), addIceCandidate(candidate), addStream(localStream), createAnswer(), setLocalDescription(answer), exchange SDP and ICE via a signaling channel.

RTCDataChannel

Enables arbitrary data exchange between browsers without a server.

<code>var dc = pc.createDataChannel("my channel");
dc.onmessage = function(e){ console.log("received:", e.data); };
dc.onopen = function(){ console.log("datachannel open"); };
dc.onclose = function(){ console.log("datachannel close"); };</code>

ICE and Signaling

ICE gathers candidates (host, srflx via STUN, relay via TURN) and tries them in priority order to establish the best path. Signaling (often via WebSocket) exchanges SDP offers/answers and ICE candidates.

Demo Workflow

Full example code shows creating a signaling channel, initializing RTCPeerConnection, handling offers/candidates, acquiring local media, and rendering remote streams.

<code>// abbreviated demo – see full source for details
var signalingChannel = new SignalingChannel();
var pc = null;
signalingChannel.onmessage = function(msg){
  if (msg.offer){
    pc = new RTCPeerConnection(ice);
    pc.setRemoteDescription(msg.offer);
    navigator.mediaDevices.getUserMedia({audio:true, video:true})
      .then(gotStream).catch(logError);
  } else if (msg.candidate){
    pc.addIceCandidate(msg.candidate);
  }
};
function gotStream(stream){
  pc.addStream(stream);
  // attach to local video element …
}
</code>

Current Status and Compatibility

WebRTC is standardized (W3C WebRTC 1.0) and supported by all modern desktop browsers and mobile browsers (iOS 11+, Android). Internet Explorer lacks support. Adapter.js smooths vendor‑specific prefixes.

Learning Roadmap

Start with core APIs (getUserMedia, RTCPeerConnection), build a simple signaling server, then explore ICE, STUN/TURN, and media processing details.

References

https://webrtc.org/architecture/

https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API