Let's Build a Live Video Streaming Pipeline: FFmpeg and MediaMTX

Have you ever wanted to view live footage from security cameras or IoT devices on a web browser? It sounds simple, but when you actually try to do it, it’s surprisingly complicated.

What’s the problem?

IP cameras stream using RTSP (Real Time Streaming Protocol), but browsers don’t support RTSP. Since the 2010s, browsers have removed RTSP support for security reasons. In other words, the camera and the browser are speaking different languages.

There are two amazing tools to solve this problem:

FFmpeg — The god of video processing. VLC and even Netflix’s encoding pipelines use this versatile tool.

MediaMTX — A lightweight streaming server. It can convert RTSP to WebRTC and more.

What to do: 3 steps

1. Stream a video file

Create a MediaMTX config file (mediamtx.yml): yaml paths: test_video: source: publisher

Stream the file via RTSP: bash ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

You can check it with VLC.

2. Stream a webcam in real time

Add to the MediaMTX config: yaml paths: webcam: source: publisher

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

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

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

3. Make it viewable in the browser (WebRTC magic)

Here’s where it gets really interesting. Enable WebRTC support in MediaMTX:

yaml webrtc: yes webrtcAddress: :8889 webrtcEncryption: no webrtcAllowOrigin: ‘*’ webrtcLocalUDPAddress: :8189 webrtcIPsFromInterfaces: yes

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

Open http://localhost:8889/ in your browser, and RTSP will be automatically converted to WebRTC and displayed in your browser. That’s it.

Data flow overview

1. Camera → raw frames
2. FFmpeg → H.264 encoding → RTSP streaming
3. MediaMTX → receives RTSP
4. Browser → WebRTC request
5. MediaMTX → automatic conversion → WebRTC streaming
6. Browser → real-time playback

It’s efficient because it converts without re-encoding. Netflix’s large-scale systems use the same principle.

What’s next?

The current setup is demo-level. Lacking for production:

• No authentication
• Localhost only
• Not compatible with real IP cameras
• No error handling

In Part 2, I’ll cover adding security, connecting real IP cameras, and getting ready for production.