Unlock Real-Time Browser Communication: A Deep Dive into WebRTC and Its Core APIs

Introduction

WebRTC (Web Real‑Time Communication) is a browser‑based technology for real‑time audio, video, and data exchange. It is plugin‑free, open source, part of the HTML5 standard, and works across platforms (Windows, macOS, Linux, iOS, Android) and browsers.

Use Cases

Suitable for peer‑to‑peer audio/video calls and data sharing; used by QQ, Tencent Video, and similar services.

Advantages

Convenient: no plugins or client installation required.

Free: Google provides the technology without charge.

Powerful NAT traversal using STUN, ICE, TURN, RTP‑over‑TCP and proxy support.

Drawbacks

Variable transmission quality across regions, carriers, low bandwidth, high packet loss, and connection success rates.

Device compatibility issues, especially on Android (microphone access, echo, etc.).

WebRTC Media Session Principle

Simplified Internal Architecture

Official Architecture Diagram

Core Technical Points (Three Parts)

Core API Overview

Using

RTCPeerConnection

and

RTCDataChannel

you can exchange arbitrary data peer‑to‑peer. The demo below works without a signaling server because both peers run on the same page.

Developer tools to view statistics:

Chrome:

chrome://webrtc-internals

Opera:

opera://webrtc-internals

Firefox:

about:webrtc

Demo Code Analysis

The demo demonstrates creating peer connections, setting up data channels, handling events, and flow‑control logic. The full source is available on GitHub.

<code>function createConnection() {
    sendButton.disabled = true;
    megsToSend.disabled = true;
    var servers = null;
    // ... rest of the code as in the original demo ...
}
</code>

API Compatibility

MediaStream and getUserMedia

Chrome desktop 18+, Chrome Android 29+

Opera 18+, Opera Android 20+

Opera 12 (Presto)

Firefox 17+

Microsoft Edge

RTCPeerConnection

Chrome desktop 20+ (flagless), Chrome Android 29+

Opera 18+ (default on), Opera Android 20+

Firefox 22+

RTCDataChannel

Chrome 25 experimental, stable from 26+, Chrome Android 29+

Opera 18+ stable, Opera Android 20+

Firefox 22+

Signaling Server

The signaling process exchanges session control, error messages, metadata, and network information. A simple Node.js server using

socket.io

can act as the signaling channel.

<code>'use strict';
var os = require('os');
var nodeStatic = require('node-static');
var http = require('http');
var socketIO = require('socket.io');

var fileServer = new nodeStatic.Server();
var app = http.createServer(function (req, res) {
    fileServer.serve(req, res);
}).listen(8080);

var io = socketIO.listen(app);
io.sockets.on('connection', function (socket) {
    // logging, message broadcast, room handling, etc.
});
</code>

Using WebRTC opens opportunities such as P2P video, fog CDN, and decentralized resource sharing.

References

https://webrtc.org/

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

https://hpbn.co/webrtc/

https://webrtchacks.com/

https://codelabs.developers.google.com/codelabs/webrtc-web/#0