ライブビデオストリーミングパイプラインを自分で作ってみよう：FFmpegとMediaMTXの話

セキュリティカメラやIoTデバイスのライブ映像をWebブラウザで見たいって思ったことありますか？簡単そうだけど、実際にやろうとするとすごく面倒なんです。

問題は何か

IPカメラはRTSP（Real Time Streaming Protocol）で配信するけど、ブラウザはRTSPをサポートしていません。2010年代からセキュリティ上の理由でブラウザ側がRTSPを削除してしまったんです。つまり、カメラとブラウザが別の言葉を話してるってわけ。

この問題を解決する2つの神ツールがあります：

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の大規模なシステムも同じ原理です。

次のステップは？

現在のセットアップはデモレベル。本番環境には足りない部分：

• 認証がない
• localhostだけ
• リアルIPカメラ非対応
• エラーハンドリングがない

Part 2では、セキュリティ追加、実IPカメラ接続、本番環境対応をやります。