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:

• Live stream with FFmpeg + Nginx HLS
• WebRTC with Janus
• A mobile-friendly HTML page with an HLS player