Media streaming mental map

Media streaming is a huge topic with a bunch of scattered technologies, protocols, and formats. You may feel like hearing fragments without seeing the big picture.

Let’s build that mental map together — here’s a high-level overview that connects everything:

🧭 Big Picture: How Media Streaming Works

1. Input (Media Source)

Where the content comes from:

📹 Live: Webcam, OBS, FFmpeg, phone camera
📁 On-demand: MP4 files, pre-recorded videos

2. Ingestion (First stop for the media)

How the stream enters your system:

RTMP ← most common for live input (OBS, FFmpeg push)
SRT ← secure UDP alternative for unstable networks
WebRTC ← direct browser input for real-time

3. Transcoding & Packaging

Prepare media for delivery:

Convert formats (e.g., FLV → MP4 or MPEG-TS)
Encode video/audio (e.g., H.264 + AAC)
Package into streamable formats:
- .mp4 for static playback
- .m3u8 + .ts for HLS
- .mpd + .m4s for MPEG-DASH
- WebRTC for low-latency live

Tools: FFmpeg, GStreamer, Media Server (e.g., Nginx with RTMP module, Janus, MediaSoup)

4. Delivery (Send to client)

How media reaches the viewer:

HTTP-based (HLS, DASH) → works over CDNs
WebRTC → direct peer-to-peer or via SFU
Progressive MP4 → like YouTube-style “click-to-play”

5. Playback (What the browser or app does)

How viewers see and hear it:

Format	How it’s played
`.mp4`	Native `<video>` tag
`.m3u8`	Native in Safari, `hls.js` in other browsers
`.mpd`	`dash.js` or native (on some platforms)
WebRTC	via `RTCPeerConnection` API in JS
RTMP	❌ Not playable in browsers anymore

🚀 Quick Visual Map

            [Camera / OBS / File]↓[RTMP / SRT]↓[Media Server / FFmpeg]↓┌────────────┬──────────────┐│            │              │[HLS]        [DASH]        [WebRTC]↓             ↓              ↓[Browser + JS] [Browser + JS] [Native in browser]

🔧 You Might Work With

You Use	If You Want To
RTMP	Ingest live feeds
FFmpeg	Transcode/segment videos
HLS (.m3u8)	Serve to most devices
WebRTC	Real-time chat/live cam
Nginx	Serve static files and proxy media
JavaScript Players	Control playback (hls.js, dash.js, video.js)

💡 Tip

If you’re building for mobile web, HLS is usually the easiest first step.
If you’re aiming for real-time interaction, WebRTC is your friend (but more complex).

For example: