WebRTC Technical Overview and Implementation Guide

WebRTC (Web Real‑Time Communication) is an open‑source API that enables browsers to perform real‑time voice and video communication without plugins, offering a free, cross‑platform solution when combined with HTML5.

Background : The rise of live‑streaming, interactive Q&A, and online gaming has driven demand for real‑time audio/video, making WebRTC a focal technology. Its low development cost and lack of required client software have led to widespread adoption in scenarios such as instant messaging, financial interviews, and recruitment.

Technical Introduction : WebRTC provides a simple JavaScript interface for real‑time communication, establishing peer‑to‑peer (P2P) channels via signaling rather than a traditional client‑server socket. It embeds media capture and codec capabilities directly in the browser, allowing audio/video transmission with just a WebRTC‑compatible browser.

The underlying architecture includes three modules:

Voice Engine – iSAC/iLBC codecs, NetEQ, echo canceler, noise reduction.

Video Engine – VP8 codec, video jitter buffer, image enhancements.

Transport – SRTP, multiplexing, P2P, STUN+TURN+ICE, optionally DTLS for encrypted transport. All communication is UDP‑based.

WebRTC’s three core APIs are:

getUserMedia – obtains permission and streams from camera and microphone.

RTCPeerConnection – manages the P2P connection, handling SDP offer/answer exchange and ICE candidate negotiation.

RTCDataChannel – creates a high‑throughput, low‑latency data channel for arbitrary data transfer.

Signaling : Although WebRTC is P2P, a signaling server (e.g., XMPP, XHR, WebSocket) is required to exchange offers, answers, and ICE candidates before the direct channel can be established.

NAT/Firewall Traversal : NAT prevents direct IP discovery; WebRTC uses ICE, which combines STUN (to discover public IP) and TURN (relay server fallback) to traverse NATs and firewalls.

Typical signaling flow:

Caller sends an SDP offer via the signaling service.

Callee replies with an SDP answer.

Both sides exchange ICE candidates until a direct path is found.

Example SDP snippet (kept unchanged):

v=0
o=- 9161120045333372658 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS ZJeNpxjV9akPU8igui9Fr4KKKkDvVPLFWTBb
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:wIpU
a=ice-pwd:x3WCaK1ZwTV9Shs0kmsyQQ6L
a=ice-options:trickle
...

Audio‑Video Call Flow : In the TEG implementation, a caller creates or joins a room (a shared audio‑video space), the callee receives the invitation, and after signaling exchange the P2P media streams start. Call termination follows a similar signaling path.

Compatibility :

iOS 11+ (Safari only; WeChat browser does not support getUserMedia); video codec H.264.

Android 4.4+ (most native browsers lack getUserMedia; WeChat browser works; some Firefox/Chrome versions support it).

PC – Chrome 49+, Firefox 55+, Edge, Safari 11+; IE not supported.

Conclusion : WebRTC, built on UDP, offers a plugin‑free, open‑source solution with strong NAT traversal and media processing capabilities. While browser compatibility—especially on Android—remains a challenge, the growing demand for real‑time communication in 5G and live‑streaming scenarios ensures WebRTC’s continued relevance as a premier choice for web‑based audio‑video interactions.