Unlock Real-Time Audio‑Video with WebRTC: History, Features & Code Guide

Technical Background

Since 2010, WebRTC has emerged and evolved as a key technology for real‑time audio and video interaction, especially during the pandemic when online communication became essential.

According to Cisco forecasts, video traffic will account for 82% of all IP traffic by 2022, up from the current 75%.

(Online real‑time audio/video interaction)

WebRTC (Web Real‑Time Communication) is a set of browser APIs that enable real‑time voice or video calls without plugins.

Before WebRTC, developing real‑time audio/video applications was costly and required handling codecs, network transmission, latency, packet loss, echo cancellation, and often required browser plugins.

In May 2010, Google acquired the GIPS engine from Global IP Solutions for $68.2 million and renamed it WebRTC, aiming to create a browser‑to‑browser real‑time communication platform.

2012: Integrated into Chrome; Opera began early integration.

June 2013: Mozilla Firefox 22.0 officially supported WebRTC.

November 2017: W3C WebRTC 1.0 draft finalized.

January 2021: WebRTC 1.0 became an official W3C and IETF standard.

Technavio predicts a 34.37% CAGR for the global WebRTC market from 2017‑2021.

Key Features

WebRTC offers the following technical characteristics:

1. Real‑time Communication

Enables peer‑to‑peer audio/video or arbitrary data streams directly between browsers without intermediate servers.

2. No Dependencies/Plugins

Works without installing any plugins or third‑party software.

3. Rich Protocol Stack

Includes multiple protocols for media, encryption, and transport, plus a JavaScript API that handles capture, encoding, network transmission, and rendering.

Related Protocol

Description & Role

ICE, STUN, TURN

Facilitate NAT traversal and obtain public IP mappings.

DTLS

Encrypt transport content.

SRTP / SRTCP

Secure media transport and control.

WebRTC also supports flexible signaling to interoperate with existing SIP and telephony systems.

Browser Compatibility

Major browsers fully support WebRTC.

All mainstream browsers implement the standard WebRTC API, allowing developers to quickly build audio/video applications by calling the API.

Technical Architecture

The diagram below illustrates WebRTC’s core components and API design for different developer groups.

APIs for web developers (JavaScript), browser vendors (C++), and vendor‑customizable extensions.

Core Components

WebRTC consists of three main parts: audio engine, video engine, and transport.

Voice Engine

iSAC/iLBC codecs (wideband and narrowband)

NetEQ for jitter handling and packet loss concealment

Echo Canceler and Noise Reduction

Video Engine

VP8 codec

Video jitter buffer

Image enhancements

Transport

Implementation Principles

Only the core process of establishing real‑time communication is described here.

1. Public IP Mapping

WebRTC uses ICE, STUN, and TURN to discover public IP addresses and ports, which is the basis for peer‑to‑peer communication.

2. Signaling Server

The signaling server relays network information (public IP, ports, media capabilities) between peers.

3. SDP (Session Description Protocol)

SDP exchanges media capabilities (codecs, resolution, etc.) before media streams are sent.

// SDP structure
Session description (session level)
v= (protocol version)
o= (originator and session identifier)
s= (session name)
c=* (connection information – optional)
t= (time active)
a=* (session attributes)
... (media descriptions)

Media description (media level)
m= (media name and transport address)
c=* (optional)
a=* (media attributes)

v=0 // version
o=- 3883943731 1 IN IP4 127.0.0.1
s=
t=0 0 // active time
a=group:BUNDLE audio video
m=audio 1 RTP/SAVPF 103 104 0 8 106 105 13 126 // ...
a=ssrc:2223794119 label:H4fjnMzxy3dPIgQ7HxuCTLb4wLLLeRHnFxh81

4. One‑to‑One Connection Establishment

Steps:

Both peers call getUserMedia to capture local media.

Send a “join room” request to the signaling server.

Peer B receives Peer A’s SDP offer, creates an answer, and sends it back via the signaling server.

Both peers gather ICE candidates and exchange them through the signaling server.

5. Multi‑Party Connection

6. Key JavaScript APIs

getUserMedia() : Access camera and microphone streams.

const constraints = { video: true, audio: true };
const video = document.querySelector('video');
function handleSuccess(stream) { video.srcObject = stream; }
function handleError(error) { console.error('getUserMedia error:', error); }
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

RTCPeerConnection : Create peer connections with ICE servers.

const servers = { iceServers: [{ urls: 'stun:stun.stunprotocol.org' }] };
const pc = new RTCPeerConnection(servers);
pc.onicecandidate = event => { if (event.candidate) { /* send to signaling server */ } };
pc.ontrack = event => { const v = document.createElement('video'); v.autoplay = true; document.getElementById('peer').appendChild(v); v.srcObject = event.streams[0]; };

RTCDataChannel : Peer‑to‑peer data transfer.

const pc = new RTCPeerConnection();
const dc = pc.createDataChannel('my channel');
dc.onmessage = e => console.log('received:', e.data);
dc.onopen = () => console.log('datachannel open');
dc.onclose = () => console.log('datachannel close');

Application Cases

Multi‑person video conferencing example.

1. Design Framework

2. Key Code

Media Capture

// Camera compatibility handling
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// Get local video stream
navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(stream => {
  document.getElementById('myVido').srcObject = stream;
});

Network Negotiation

// Create RTCPeerConnection with STUN server
const iceServer = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const peerRTCConn = new RTCPeerConnection(iceServer);

Media Negotiation

// Send offer
if (canOffer) {
  peerRTCConn.createOffer(offer => {
    peerRTCConn.setLocalDescription(offer, () => {
      socket.send(JSON.stringify({ event: 'relaySessionDescription', data: offer, fromID: peerId }));
    }, () => alert('offer failed'));
  }, err => console.log('error sending offer:', err));
}

Signaling Relay (Node.js example)

wss.on('connection', ws => {
  ws.on('message', message => {
    const msg = JSON.parse(message);
    if (msg.event === 'relayICECandidate') {
      wss.clients.forEach(client => client.send(JSON.stringify({ event: 'iceCandidate', data: msg.data, fromID: msg.fromID })));
    }
    if (msg.event === 'relaySessionDescription') {
      wss.clients.forEach(client => {
        if (client !== ws) {
          client.send(JSON.stringify({ event: 'sessionDescription', fromId: msg.fromID, data: msg.data }));
        }
      });
    }
  });
});

Significance

WebRTC’s standardization has major impact on modern front‑end development.

Reduces the barrier for web developers to implement audio/video interaction.

Avoids plugin‑related issues by using native browser capabilities.

Provides a unified, standardized approach to NAT traversal, echo cancellation, and media transport.

Improves performance through NACK, FEC, TCC, SVC, and jitter buffer optimizations.

References

https://github.com/Tinywan/WebRTC-tutorial

https://www.bookstack.cn/read/webrtc-book-cn/spilt.6.05_putting_it_all_together.md

https://www.html5rocks.com/en/tutorials/webrtc/basics/

https://zh.wikipedia.org/wiki/WebRTC

https://zhuanlan.zhihu.com/p/93107411

https://github.com/muaz-khan/WebRTC-Experiment

https://xie.infoq.cn/article/ddceaa09b2c3ec4b357bf0d26

https://juejin.cn/post/6969030139120189477

https://www.jianshu.com/p/24363820b3b2

https://zhuanlan.zhihu.com/p/79489847

https://www.researchandmarkets.com/reports/5116130/global-web-real-time-communication-webrtc

Q&A

Q: Is there a connection limit? A: Chrome limits to 256 connections, but actual limits depend on bandwidth and other factors. Reference

Q: Commercial usage and security? A: Mature commercial deployments are limited; they typically add additional layers for security and data handling.

Q: Android compatibility issues? A: Current Android support has some compatibility challenges that are being addressed.