Design Twitch – Frontend System Design

We’ll walk through the frontend system design for Twitch: a live video player that stays a few seconds behind the broadcaster, sitting next to a chat that can receive tens of thousands of messages a minute. You’ll see how Low-Latency HLS gets the playhead close to the live edge, how a player keeps it there with playbackRate instead of seeking, and how a chat client renders a firehose without growing the DOM forever.

This is not the Netflix question. Netflix is video on demand: big buffers, seek anywhere, latency doesn’t exist. It is also not a chat app, where every message matters and you render all of them. On Twitch, the video has a deadline and most chat messages are on screen for less than a second. Both facts change the design.

Problem Statement

Design the viewer web app for a live streaming platform like Twitch.

Requirements:

• Watch a live stream with a few seconds of latency, at a quality that fits the viewer’s connection
• Read and send chat messages, with emotes,... premium content.