自己動手打造直播視訊串流管線：FFmpeg與MediaMTX的應用

你有沒有想過，想在網頁瀏覽器上觀看監視攝影機或IoT裝置的即時影像？聽起來很簡單，但實際操作起來卻非常麻煩。

問題是什麼

IP攝影機通常用RTSP（Real Time Streaming Protocol）來串流，但瀏覽器並不支援RTSP。自2010年代起，瀏覽器基於安全考量已經移除RTSP支援。也就是說，攝影機和瀏覽器說的是不同的語言。

有兩個神級工具可以解決這個問題：

FFmpeg — 影音處理的神工具。VLC和Netflix的編碼流程都會用到的泛用工具。

MediaMTX — 輕量級串流伺服器。可以做RTSP→WebRTC轉換。

操作分3步驟

1. 串流影片檔案

建立MediaMTX的設定檔（mediamtx.yml）： yaml paths: test_video: source: publisher

用RTSP推送檔案： bash ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

可以用VLC確認串流。

2. 實時串流Web攝影機

在MediaMTX設定中新增： 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. 讓瀏覽器能觀看（WebRTC魔法）

這才是真正有趣的地方。讓MediaMTX支援WebRTC：

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

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

在瀏覽器打開 http://localhost:8889/，RTSP會自動轉換成WebRTC並顯示在瀏覽器上。就這麼簡單。

資料流順序

1. 攝影機 → 原始影格
2. FFmpeg → H.264編碼 → RTSP串流
3. MediaMTX → 接收RTSP
4. 瀏覽器 → 發起WebRTC請求
5. MediaMTX → 自動轉換 → WebRTC串流
6. 瀏覽器 → 即時播放

因為沒有重新編碼，所以效率很高。Netflix大型系統也是用同樣原理。

下一步是什麼？

目前的設定只適合Demo。正式環境還有不足之處：

• 沒有認證機制
• 只能localhost
• 不支援真實IP攝影機
• 沒有錯誤處理

在Part 2中，會增加安全性、支援真實IP攝影機、並完善正式環境部署。