リアルタイム動画ストリーミングの構築：ゼロからブラウザ表示まで

誰も語らない問題

セキュリティカメラの映像、ライブウェブカメラ、IoTデバイスからのビデオストリームが、Web上で「そのまま動く」ことがほぼないことにお気づきかもしれません。そのフラストレーションには理由があります。

核心の問題はこうです：ほとんどのカメラやプロ仕様のビデオ機器はRTSP (Real Time Streaming Protocol)で配信していますが、ウェブブラウザはそれを一切サポートしていません。 これは2010～2015年頃、セキュリティ上の判断でブラウザがRTSPサポートを停止したためです。突然、ライブカメラの映像をWebページに表示するのは小さなエンジニアリング地獄になりました。

解決策は？2つのツールを組み合わせます：FFmpeg (伝説的なビデオのスイスアーミーナイフ)とMediaMTX (軽量なストリーミングゲートウェイ)です。この2つが、カメラが話す言語 (RTSP)とブラウザが理解する言語 (WebRTC)の間を翻訳します。Netflixも同様のパイプラインを使っています。あなたの地元のセキュリティシステムもおそらく同じです。

各ツールの役割

FFmpeg：ビデオ処理の獣

FFmpegは、あなたが設定したことがない最強のビデオツールです。地味な作業を一手に引き受けます：

• ウェブカメラやファイルからの映像キャプチャ
• ブラウザ向けのフォーマット (通常H.264)への再エンコード
• RTSPやRTMPを使ったサーバーへのストリーミング
• これら全てをリアルタイムでスムーズに処理

基本的な流れ：キャプチャ → エンコード → 送信

MediaMTX：プロトコルトランスレータ

FFmpegは複数の視聴者の同時対応ができません。そこを担うのがMediaMTXです。プロトコルの仲介役です：

• RTSP、RTMP、WebRTC、HLSストリームを受け入れる
• クライアントごとに異なるフォーマットに再パッケージ
• 最重要：RTSPをWebRTCに変換し、ブラウザで視聴可能にする
• これを単一バイナリと設定ファイルだけで実現

セットアップ方法 (実践編)

FFmpegのインストール

Linux/Ubuntu:

sudo apt-get update sudo apt-get install ffmpeg

macOS:

brew install ffmpeg

Windows:

• ffmpeg.orgからダウンロード (gyan.devビルド推奨)
• C:\ffmpegに展開
• C:\ffmpeg\binをシステムPATHに追加
• コマンドプロンプトで ffmpeg -version で確認

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:

• GitHubリリースから.zipをダウンロード
• 展開し、mediamtx.exeを実行
• (Windows Defenderが警告を出す場合あり—一時的に無効化が必要な場合も)

3つのプロジェクト

プロジェクト1：動画ファイルのストリーミング

mediamtx.ymlを作成：

paths: test_video: source: publisher

実行：mediamtx mediamtx.yml

続いて動画ファイルをストリーム：

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

解説：

• -re = ネイティブフレームレートで読み込み (ライブ感に必須)
• -c:v libx264 = H.264コーデックを使用 (広範な互換性)
• -preset fast = 処理速度と圧縮率のバランス
• rtsp://localhost:8554/test_video = 宛先アドレス

VLCで「メディア」→「ネットワークストリームを開く」でrtsp://localhost:8554/test_videoを入力。映像が表示されればMediaMTXの動作確認完了です。

プロジェクト2：ウェブカメラのライブ配信

mediamtx.ymlを更新して新しいパスを追加：

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

Windows (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

主なパラメータ：

• -preset ultrafast = 速度重視 (ライブに重要)
• -tune zerolatency = リアルタイム最適化 (バッファ最小化)
• /webcam = 設定ファイルで定義したパス

プロジェクト3：魔法の瞬間—ブラウザでWebRTC

ここからが本番です。mediamtx.ymlを更新：

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

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

MediaMTXを再起動。ブラウザで http://localhost:8889/webrtc/webcam を開いてください。

ウェブカメラの映像が直接ブラウザで見られます。プラグイン不要。RTSPも不要。リアルタイムにライブ映像が再生されます。

実際に起きていること

1. ウェブカメラが生のフレームを生成
2. FFmpegがキャプチャし、H.264にエンコード、RTSPでMediaMTXへ送信
3. MediaMTXがRTSPストリームを受信し保持
4. ブラウザが/webcamパスからWebRTCストリームを要求
5. MediaMTXがRTSP→WebRTCへ変換 (再エンコードなし、リパッケージのみ)
6. ブラウザがWebRTCパケットを受信し表示

美点：MediaMTXは再エンコードせず、H.264ストリームを異なるコンテナ形式に詰め替えるだけ。そのため遅延が極小です。

現時点の制限

この構成はローカルテストには最適ですが、本番運用には：

• 認証 (現状誰でもアクセスできる)
• ローカルホストのみ対応 (インターネット非対応)
• IPカメラ未対応
• モニタリングやエラーハンドリングなし

これはしっかりした基礎構築です。このアーキテクチャは寝室のウェブカメラ1台から、Netflix並みの数千同時配信までスケールします。

次回予告

パート2では：パイプラインのセキュリティ、実際のIPカメラ接続、認証の実装、ローカルホスト外へのデプロイ方法を扱います。ここからが本当のエンジニアリングであり、多くの人が趣味プロジェクトでつまずくポイントです。