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 にアクセス
MP4 ファイルをアップロード
配信ボタンをクリック
VLCなどで rtsp://localhost:8554/stream/{ID} を開く
おまけ
ダークモードもあります

おわりに

React 触りたいのと，RTSP を GUI で手軽に配信したかったので作りました．
まだバグや TODO はいろいろあるので，今後修正していこうと思います．