Web-App から mp4 を rtsp で配信したかった
はじめに
仕事柄，RTSP のストリームを扱うことが多いですが，毎回 ffmpeg やらで配信するのが面倒でした．
Web アプリから動画ファイルの管理と RTSP 配信ができたら楽だと思い，アプリを作りました．
技術スタック
| 役割 | 技術 |
|---|---|
| フロントエンド | TypeScript + React + MUI |
| バックエンド | Python + FastAPI + SQLite |
| RTSP サーバ | MediaMTX |
| 動画配信 | ffmpeg |
| 構成 | docker compose |
システム構成
[ユーザー] → Frontend(3000) → Backend(8000) → RTSP Server(8554)
↓ ↓ ↓ ↓
ブラウザ React/TypeScript FastAPI MediaMTX
Material-UI SQLite
ffmpeg
作ったもの
github -> link
使い方
起動
$ git clone git@github.com:k2-gc/video-file-rtsp-streamer.git
$ cd video-file-rtsp-streamer
$ docker compose up --build
アクセス先
- フロントエンド: http://localhost:3000
- API仕様書: http://localhost:8000/docs
-
RTSP配信:
rtsp://localhost:8554/stream/{video_id}
操作手順
-
http://localhost:3000 にアクセス
-
MP4 ファイルをアップロード
-
配信ボタンをクリック
-
VLCなどで
rtsp://localhost:8554/stream/{ID}を開く
-
おまけ
ダークモードもあります
おわりに
React 触りたいのと，RTSP を GUI で手軽に配信したかったので作りました．
まだバグや TODO はいろいろあるので，今後修正していこうと思います．