Video chat design
A complete blueprint for building real-time video calling into your application — from WebRTC signalling to UI layout patterns that scale from 1:1 calls to group rooms.
Architecture overview
The stack centres on WebRTC for media transport, a signalling server (WebSocket or SSE) for session negotiation, and a STUN/TURN relay for NAT traversal. On the frontend, a grid-based layout adapts tile sizes based on participant count — single-column for mobile, expanding to a 2×2 or 3×3 grid on desktop.
Signalling flow
- Client connects to signalling channel and announces presence.
- Caller creates an SDP offer, sets it as local description, and transmits it via the channel.
- Callee receives the offer, sets it as remote description, generates an SDP answer, and sends it back.
- ICE candidates are exchanged bidirectionally until connectivity is established.
- Media streams are attached to video elements once tracks fire.
Tile layout system
Use CSS Grid with auto-fit and minmax to create responsive tiles. Each participant tile renders a local or remote video stream inside a rounded container with a subtle border glow. The active speaker tile receives a ring-2 ring-[#8B5CF6] indicator driven by audio level analysis.
Controls overlay
A floating bottom bar hosts mute, video toggle, screen share, and hang-up actions. Icons are rendered as inline SVGs to avoid external dependencies. The hang-up button uses a red-to-pink gradient to signal destructive intent. All controls sit on a glass-morphism backdrop with backdrop-blur.
State machine
Model the call lifecycle as a finite state machine: idle → ringing → connected → ended. Each transition triggers UI updates and media cleanup. Store state in a reducer to keep transitions predictable and testable.
Looking for the WebRTC API reference? Read the WebRTC primer →