An interactive field guide — 2026
See the messages underneath the call.
WebSocket, WebRTC, signaling, ICE, SFUs — explained from the wire up, then put in your hands. Step through animated diagrams, run real peer connections, and break them until the failure modes are familiar.
Media stays between peers.
SIGNALING IS OUT-OF-BAND. MEDIA IS NOT.
TRACE THE FLOW01 / Why this exists
Most real-time tutorials stop at the API. The failures begin below it.
A call can be “connected” and still be unusable. A socket can be “open” and already dead.
Real-time systems are layered: an HTTP upgrade, an SDP negotiation, an ICE path, a DTLS handshake, then media inside SRTP. Each layer has its own state machine, its own metrics, and its own way of failing quietly.
This field guide makes every layer inspectable. Each lesson pairs a step-through diagram with a real lab, a code walkthrough, and the mistakes that actually take production systems down.
Step through it
Animated protocol paths with play, pause, and single-step controls.
Then do it live
Real sockets, real peer connections, real getStats() output.
Then break it
Block STUN, kill the server, drop candidates, and watch why.
02 / The curriculum
Four modules. One complete connection.
Foundations
3 LESSONSThe transport choices and two connection models behind every real-time product.
Media & signaling
5 LESSONSCapture media, exchange session descriptions, and find a path across the internet.
Data, transport & quality
3 LESSONSMove arbitrary data, understand the encrypted media pipeline, and measure what users feel.
Scale & production
4 LESSONSChoose a topology, harden the system, debug failures, and ship the capstone.
03 / Practice
A lab for every layer. Including the ugly parts.
Open two tabs, or use the solo loopback. Every lab exposes the raw signaling log, ICE candidates, connection states, and live stats — because the numbers are the lesson.
Break-it controls
Signaling log
Candidates
Live stats
RTT
24 ms
LOSS
0.1%
VIDEO
1.8 Mbps
FPS
30
SELECTED PAIR: SRFLX
Direct UDP. No media relayed.
ILLUSTRATIVE DATA — THE LAB SHOWS YOURS.
04 / Topology
Topology is a budget decision wearing an architecture hat.
Every extra participant changes how many uploads you need, how much CPU the browser burns, and what the server is allowed to see. The topology module does the math, then lets you feel it in a multi-tab mesh lab.
At a glance / four participants
1.5 Mbps UPLOAD EACH| Topology | Uploads per peer | Server CPU | Comfortable room |
|---|---|---|---|
| Mesh | 3 streams | None | 2–4 |
| SFU | 1 stream | Low | 10–100+ |
| MCU | 1 stream | Very high | 5–25 |
05 / The standard
No black boxes, no magic handshakes, no “just use an SDK.”
Measure the real thing
Every performance claim maps to getStats(), a timer, or a byte count you can reproduce.
Read both sides
A protocol is an agreement. Lessons show the browser and the server, not just the JavaScript you typed.
Failure is a feature
Break-it modes and Do/Don't panels make the expensive mistakes cheap to learn.
Begin
Start with the wire.
Ship the call.
Fifteen lessons from polling to production. Open the first diagram, guess the next message, then run the lab and find out.