构建实时视频流：从零到浏览器展示

The Problem Nobody Talks About

You've probably noticed that security camera feeds, live webcams, and video streams from IoT devices never "just work" on the web. There's a reason for that frustration.

Here's the core issue: most cameras and professional video gear broadcast using RTSP (Real Time Streaming Protocol), but web browsers straight-up don't support it. This became a security decision around 2010-2015 when browsers dropped RTSP support. Suddenly, displaying a live camera feed on a webpage became a mini engineering nightmare.

The solution? Two tools working in tandem: FFmpeg (the legendary video Swiss Army knife) and MediaMTX (a lightweight streaming gateway). Together, they translate between what cameras speak (RTSP) and what browsers understand (WebRTC). Netflix uses similar pipelines. Your local security system probably does too.

What Each Tool Actually Does

FFmpeg: The Video Processing Beast

FFmpeg is the most powerful video tool you've never configured. It handles the boring stuff:

• Capturing video from webcams or files
• Re-encoding it into browser-friendly formats (usually H.264)
• Streaming it out to servers using RTSP or RTMP
• Doing this all in real-time without choking

The basic workflow: capture → encode → send.

MediaMTX: The Protocol Translator

FFmpeg can't handle multiple viewers simultaneously. That's what MediaMTX does. It's basically a protocol middleman:

• Accepts RTSP, RTMP, WebRTC, or HLS streams
• Re-packages them into different formats for different clients
• Most importantly: converts RTSP into WebRTC so browsers can view it
• Does all this with a single binary and a config file

Getting Set Up (The Practical Part)

Installing FFmpeg

Linux/Ubuntu:

sudo apt-get update sudo apt-get install ffmpeg

macOS:

brew install ffmpeg

Windows:

• Download from ffmpeg.org (use the gyan.dev build)
• Extract to C:\ffmpeg
• Add C:\ffmpeg\bin to your system PATH
• Verify: ffmpeg -version in command prompt

Installing MediaMTX

Linux/macOS:

wget https://github.com/bluenviron/mediamtx/releases/download/v1.15.0/mediamtx_v1.15.0_linux_amd64.tar.gz tar -xzf mediamtx_v1.15.0_linux_amd64.tar.gz chmod +x mediamtx sudo mv mediamtx /usr/local/bin/ mediamtx

Windows:

• Download the .zip from GitHub releases
• Extract and run mediamtx.exe
• (Windows Defender might flag it—temporary disable if needed)

The Three Projects

Project 1: Stream a Video File

Create mediamtx.yml:

paths: test_video: source: publisher

Run it: mediamtx mediamtx.yml

Then stream a video file to it:

ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

Breakdown:

• -re = read at native frame rate (essential for live feel)
• -c:v libx264 = use H.264 codec (widely compatible)
• -preset fast = speed vs compression trade-off
• rtsp://localhost:8554/test_video = destination address

Open VLC, go Media → Open Network Stream, paste rtsp://localhost:8554/test_video. You should see the video. That's MediaMTX working.

Project 2: Stream Your Webcam Live

Update mediamtx.yml to add a new path:

paths: test_video: source: publisher webcam: source: publisher

Windows (using DirectShow):

ffmpeg -f dshow -rtbufsize 100M -i video="Integrated Webcam" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

macOS:

ffmpeg -f avfoundation -framerate 30 -video_size 1280x720 -i "0" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

Linux:

ffmpeg -f v4l2 -i /dev/video0 -c:v libx264 -preset ultrafast -tune zerolatency -c:a aac -f rtsp rtsp://localhost:8554/webcam

Key parameters:

• -preset ultrafast = prioritize speed (matters for live)
• -tune zerolatency = optimize for real-time (minimal buffering)
• /webcam = the path we defined in the config

Project 3: The Magic Moment—WebRTC in Your Browser

This is where it gets cool. Update mediamtx.yml:

webrtc: yes webrtcAddress: :8889 webrtcEncryption: no webrtcAllowOrigin: '*' webrtcLocalUDPAddress: :8189 webrtcIPsFromInterfaces: yes

paths: test_video: source: publisher webcam: source: publisher

Restart MediaMTX. Now open your browser to http://localhost:8889/webrtc/webcam

Your webcam feed loads directly in the browser. No plugin. No RTSP. Just your live video playing in real-time.

What Actually Happened

1. Your webcam generates raw frames
2. FFmpeg captures them, encodes as H.264, streams via RTSP to MediaMTX
3. MediaMTX receives the RTSP stream and sits on it
4. Browser requests WebRTC stream from /webcam path
5. MediaMTX converts RTSP → WebRTC (no re-encoding, just re-packaging)
6. Browser gets WebRTC packets and displays them

The beauty: MediaMTX doesn't re-encode. It just repackages the H.264 stream into different container formats. That's why latency stays low.

The Current Limitations

What we've built works great for local testing, but production needs:

• Authentication (right now anyone can access)
• Works only on localhost (not internet-ready)
• No IP camera support yet
• Zero monitoring or error handling

This is solid foundation work. The same architecture scales from a single bedroom webcam to Netflix-level infrastructure serving thousands of concurrent streams.

What's Next

Part 2 will cover: securing the pipeline, connecting real IP cameras, handling authentication, and deploying beyond localhost. That's where the real engineering kicks in—and where most people's hobby projects fail.