メディアサーバーの決定版!bluenviron/mediamtxで君のプロジェクトにモジョを注入!
オースティン・パワーズだぜ!今回は君たちソフトウェアエンジニアの悩みを解決する、とびっきりクールなツールを紹介するぜ!その名も「bluenviron/mediamtx」!
君たちのプロジェクトに、こう、なんていうか…「映像と音声のセクシーな魔法」をかけることができるんだ!この「mediamtx」は、まるで僕のモジョみたいに、あらゆる種類のメディアストリームを自由自在に操れる、まさに究極のメディアサーバー&プロキシなんだ!
一言で言うと、「動画と音声をインターネットでやり取りするための、何でも屋スーパーヒーロー」だ!
普段、君たちが動画を配信したり、監視カメラの映像を見たり、Web会議をしたりする時って、色々な技術が裏で動いているんだ。RTSPとかRTMPとか、最近だとWebRTCとかね。でも、それらを全部自分で実装するなんて、まるで僕がDr.イーブルの秘密基地に潜入するくらい大変な作業だろ?
そこで登場するのが「mediamtx」だ!こいつは、それらの面倒なプロトコルを全部まとめて面倒見てくれるんだ!君は「mediamtx」に「はい、この動画を配信してね」とか「この映像を受け取ってね」ってお願いするだけでいいんだ。あとは全部こいつがやってくれるんだぜ!
これはもう、君のプロジェクトに「モジョ」を与える究極のツールと言っても過言じゃないね!具体的にどんなモジョが手に入るか見てみよう!
面倒なプロトコル設定から解放される!
君はもう、RTSPのネゴシエーションがどうとか、RTMPのハンドシェイクがどうとか、そんな細かいことを気にしなくていいんだ!「mediamtx」が全部やってくれるから、君はもっと重要な「どうやって最高のプロダクトを作るか」ってことに集中できるんだ!まさに僕が世界を救うために集中できるのと同じさ!
色々なデバイスと簡単につながる!
監視カメラ、ドローン、Webカメラ、スマートフォン…色々なデバイスから送られてくる映像や音声を一箇所で受け取ったり、逆に色々なデバイスに配信したりできるんだ!「mediamtx」が共通の「通訳」になってくれるから、デバイスごとに特別なコードを書く必要がないんだ!
リアルタイム通信もバッチリ!
WebRTCに対応しているから、Webブラウザを使ったリアルタイムのビデオチャットや、遠隔操作なんかも簡単に実現できるんだ!まるで僕が秘密組織と直接会話するように、ラグなしでコミュニケーションできるってわけさ!
動画の保存も再生も自由自在!
配信した動画を自動的に録画して保存したり、保存した動画を好きな時に再生したりもできるんだ!君が「あの時の映像が見たい!」って言えば、「mediamtx」がサッと用意してくれるのさ!
パフォーマンスと安定性がバッチリ!
Go言語で書かれているから、高速で安定した動作が期待できるんだ!大量のストリームを同時に扱っても、ドスンと落ちたりしないタフなやつさ!
イエス、ベイビー!僕が女性を口説くくらい簡単さ!いくつかの方法があるけど、代表的なのはこれだ!
Dockerがあれば、あっという間に「mediamtx」を起動できるんだ!まるで僕がDr.イーブルをコールドスリープさせるくらい簡単さ!
# まずはDockerをインストールしてくれよな!
# WindowsやMacならDocker DesktopをインストールすればOKだ!
# mediamtxの最新版イメージをダウンロードして起動!
docker run --rm -it -p 8554:8554 -p 8888:8888 -p 8889:8889 -p 8000:8000 -p 8001:8001 bluenviron/mediamtx
これで「mediamtx」が起動して、色々なポートで待ち構えているぜ!
8554
RTSP (監視カメラとかでよく使われるプロトコルだ!)
8888
RTMP (昔からよく使われる動画配信プロトコルだね!)
8889
RTMP (Secure) (セキュアなRTMPだぜ!)
8000
HLS / LL-HLS (Webブラウザで動画を再生するのに便利だ!)
8001
WebRTC (リアルタイム通信の強い味方だ!)
Go言語の環境があるなら、自分でビルドすることもできるぜ!
# まずはGo言語をインストールしてくれ!
# ソースコードをダウンロード
git clone https://github.com/bluenviron/mediamtx
cd mediamtx
# ビルドして実行!
go build
./mediamtx
これで起動だ!簡単だろ?
よし、君が「mediamtx」のモジョを感じられるようなサンプルコードをいくつか紹介するぜ!
監視カメラの映像をWebブラウザでリアルタイムに見たいって時、あるだろ?「mediamtx」を使えば、それがとっても簡単にできるんだ!
「mediamtx」の設定 (YAMLファイル)
mediamtx.ymlというファイルを作って、監視カメラのRTSPアドレスを設定するんだ。
# mediamtx.yml
paths:
my_camera: # ここに任意のパス名をつけるんだ!
source: rtsp://user:[email protected]:554/live/ch0 # 君の監視カメラのRTSPアドレスに置き換えてくれよな!
# WebRTCで配信できるようにするぜ!
webrtc: yes
「mediamtx」を起動するときに、この設定ファイルを指定するんだ!
# Dockerの場合
docker run --rm -it -p 8554:8554 -p 8888:8888 -p 8889:8889 -p 8000:8000 -p 8001:8001 -v $(pwd)/mediamtx.yml:/mediamtx.yml bluenviron/mediamtx mediamtx mediamtx.yml
# バイナリの場合
./mediamtx mediamtx.yml
Webブラウザで表示するHTML/JavaScript (クライアント側)
次に、Webブラウザで映像を表示するための簡単なHTMLファイルを用意するぜ!
<!DOCTYPE html>
<html>
<head>
<title>My Camera View</title>
</head>
<body>
<h1>僕の監視カメラ映像だぜ!</h1>
<video id="videoElement" autoplay controls></video>
<script>
async function startWebRTC() {
const pc = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' }
]
});
// "mediamtx"からOfferを取得するぜ!
const response = await fetch('/webrtc/my_camera/addPublisher', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"streamOffer": "recvonly" // 映像を受信するだけってことさ!
})
});
const data = await response.json();
const sdp = data.answer.sdp; // "mediamtx"からのSDPだ!
await pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: sdp }));
pc.ontrack = (event) => {
const videoElement = document.getElementById('videoElement');
if (videoElement.srcObject !== event.streams[0]) {
videoElement.srcObject = event.streams[0];
}
};
// "mediamtx"にOfferを送信するぜ!
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
const offerResponse = await fetch('/webrtc/my_camera/addConsumer', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"streamOffer": pc.localDescription.sdp
})
});
const offerData = await offerResponse.json();
const answerSdp = offerData.answer.sdp;
await pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: answerSdp }));
}
startWebRTC();
</script>
</body>
</html>
このindex.htmlをWebサーバーでホストして(例えば、Pythonのhttp.serverとかでいいぜ!)、ブラウザで開けば、監視カメラの映像がリアルタイムに表示されるはずだ!
# index.htmlがあるディレクトリで実行
python3 -m http.server 8000
そしてブラウザで http://localhost:8000/index.html にアクセス!
YouTube Liveなんかで使われるRTMP形式で動画を配信して、「mediamtx」で受け取って、今度はWebブラウザで低遅延で再生できるLL-HLS形式で配信する、なんてこともできるんだぜ!
「mediamtx」の設定 (YAMLファイル)
mediamtx.ymlに以下を追加するんだ。
# mediamtx.yml (前の設定に追記)
paths:
# ... (前の設定は省略) ...
my_stream: # RTMPで受け取るパス
source: rtmp://localhost:1935/live/my_stream # 外部のRTMPソースを指定することもできるぜ!
# LL-HLSで配信できるようにするぜ!
llhls: yes
OBS StudioなどからRTMPストリームを「mediamtx」に送る
OBS Studioなどの配信ソフトウェアを使って、rtmp://localhost:1935/live/my_stream(もし「mediamtx」が別のサーバーで動いているなら、そのIPアドレスに置き換えてくれ!)にストリームを送信するんだ。
WebブラウザでLL-HLSストリームを再生する
WebブラウザでLL-HLSを再生するには、例えばhls.jsのようなライブラリを使うと便利だぜ!
<!DOCTYPE html>
<html>
<head>
<title>LL-HLS Player</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<h1>僕のLL-HLSストリームだぜ!</h1>
<video id="video" controls autoplay></video>
<script>
const video = document.getElementById('video');
const hls = new Hls();
// "mediamtx"のLL-HLSエンドポイントを指定するんだ!
hls.loadSource('http://localhost:8000/my_stream/llhls/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
</script>
</body>
</html>
このllhls_player.htmlをWebサーバーでホストして、ブラウザで開けば、RTMPで送った映像が低遅延で再生されるはずだ!
「bluenviron/mediamtx」は、君がメディアストリーミングの分野で「モジョ」を発揮するための強力な味方だ!複雑なプロトコルを気にすることなく、様々なデバイスと連携し、リアルタイムな映像・音声体験を簡単に構築できるんだ!