WSL2 上の Docker コンテナで OvenMediaEngine（OME）を動かし、Windows 側の OBS から配信した映像を、ブラウザ上の OvenPlayer で超低遅延再生する というデモ
WSL2 上の Docker コンテナで OvenMediaEngine（OME）を動かし、Windows 側の OBS から配信した映像を、ブラウザ上の OvenPlayer で超低遅延再生する というデモです。
クイックスタート
江端の環境
(1)wsl2のubuntuを構築して、dockerをインストール
(2)ホストからみたUbuntsのIPアドレスは、
イーサネット アダプター vEthernet (WSL):
接続固有の DNS サフィックス . . . . .:
リンクローカル IPv6 アドレス. . . . .: fe80::4de9:a16e:adfe:b349%28
IPv4 アドレス . . . . . . . . . . . .: 172.29.0.1
サブネット マスク . . . . . . . . . .: 255.255.240.0
デフォルト ゲートウェイ . . . . . . .:
pingも通る。
(3)しかし、ubuntuの中のサービスを使う場合は、172.29.0.1はなくてlocahostを使うこと
ーーーー
このページでは、OvenMediaEngineを使用してWebRTCとLLHLSの再生を確認する最も簡単な方法を提供します。インストールや詳細な設定については、他のページを参照してください。
OvenMediaEngineを実行
以下のコマンドでDockerを実行します。 OME_HOST_IPは、プレイヤーからアクセス可能なIPアドレスでなければなりません。
docker run --name ome -d \
-e OME_HOST_IP=172.29.0.1 \
-p 1935:1935 \
-p 9999:9999/udp \
-p 9000:9000 \
-p 3333:3333 \
-p 3478:3478 \
-p 10000-10009:10000-10009/udp \
airensoft/ovenmediaengine:latest
OvenPlayer デモを実行
$ docker run -d -p 8090:80 airensoft/ovenplayerdemo:latestライブ配信
ライブエンコーダー（例：OBS）を使用して、OvenMediaEngineにライブストリームを配信します。
RTMP配信アドレスは：
サーバー rtmp://{DockerホストのIPアドレス}:1935/app
ストリームキー stream
超低遅延設定の推奨設定は以下の通りです。
設定
値
キーフレーム間隔 1秒（0に設定しないでください）
CPU使用率プリセット ultrafast
プロファイル baseline
チューニング zerolatency
江端の環境ではこうなる
結論：OBSの「Server」は rtmp://localhost:1935/app にしてください。192.168.0.160（LAN側IP）では、WSL2内のDockerにそのまま届きません。
いまの構成での正解一式
-
OBS（Windows側）
-
Server:
rtmp://localhost:1935/app -
Stream Key:
stream -
Encoder: x264 / ultrafast / baseline / zerolatency
-
Keyframe interval: 1s
-
OvenPlayer（ブラウザ）
-
URL:
http://localhost:8090/ -
ADD SOURCE →
ws://localhost:3333/app/stream -
LOAD PLAYER
なぜ localhost なのか
-
docker psが0.0.0.0:1935->1935のように表示＝WSL内で1935番を公開中。 -
Windows↔WSL2 は localhostフォワードが効くので、Windowsからは
localhost:1935/3333/8090で到達可能。 -
逆に
192.168.x.x（LAN IP）は WSL へ自動転送されないため、届きません。
江端の環境でのOBSの動かし方
でもって、仮想カメラを起動
でもって、配信開始
再生
ブラウザでインストールしたOvenPlayer Demoページを開きます。
http://{Dockerホスト名}:8090/
江端の環境ではこうした (ws://localhost:3333/app/stream)
WebRTC 再生
ws://{Docker ホスト名}:3333/app/streamを再生 URL に追加し、ADD SOURCE と LOAD PLAYER ボタンをクリックして WebRTC でライブストリームを再生します。
LLHLS 再生
http://{Your Docker Host}:3333/app/stream/llhls.m3u8を再生 URL に追加し、[ソースを追加] と [プレイヤーを読み込み] ボタンをクリックして、LLHLS でライブストリームを再生します。
江端の環境は、これで動いている
ws://localhost:3333/app/stream
これで一発で設定できる
http://localhost:8090/#%7B%22playerOption%22%3A%7B%22autoStart%22%3Atrue%2C%22autoFallback%22%3Atrue%2C%22mute%22%3Afalse%2C%22sources%22%3A%5B%7B%22type%22%3A%22webrtc%22%2C%22file%22%3A%22ws%3A%2F%2Flocalhost%3A3333%2Fapp%2Fstream%22%7D%5D%2C%22doubleTapToSeek%22%3Afalse%2C%22parseStream%22%3A%7B%22enabled%22%3Atrue%7D%7D%2C%22demoOption%22%3A%7B%22autoReload%22%3Atrue%2C%22autoReloadInterval%22%3A2000%7D%7D
=======
次にブラウザを、Ovenplayerから普通のWebPプラウザにするにはどうすれば良いのですのか。
G:\home\ebata\ome_playerというディレクトリを掘って、そこに、llhls_player.htmlを作成する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>LLHLS Player (OME)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
video { width: 100%; max-width: 960px; height: auto; background: #000; }
.url { margin: 1rem 0; }
input { width: 100%; max-width: 960px; }
</style>
</head>
<body>
<h1>LLHLS Player (OvenMediaEngine)</h1>
<div class="url">
<label for="src">LLHLS URL</label>
<input id="src" value="http://localhost:3333/app/stream/llhls.m3u8">
</div>
<video id="video" controls autoplay playsinline></video>
<p>このページは、OvenMediaEngine が配信する LLHLS を hls.js で再生します。</p>
<script>
const video = document.getElementById('video');
const input = document.getElementById('src');
function play(src){
if (window.hls) { window.hls.destroy(); }
if (Hls.isSupported()) {
window.hls = new Hls({ lowLatencyMode: true });
window.hls.loadSource(src);
window.hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = src; // Safari (iOS含む)
} else {
alert('このブラウザはHLS再生に対応していません。別のブラウザをお試しください。');
}
}
input.addEventListener('change', () => play(input.value));
play(input.value);
</script>
</body>
</html>G:\home\ebata\llhls_player>python -m http.server 8000
でサーバを立てて、
http://localhost:8000/llhls_player.html
で、
てな感じの表示がでます。
=====
現在の構成は、
[OBSから映像を配信] → [OME(docker)] → [OvenPlayer(Docker?)をつかったWebサイト]
となっており、Webブラウザで表示できるhtmlファイルを探したりJavaScriptを探していたのですが、WebRTCストリームを実現するために、シグナリングサーバが必要である、ということ大きな障害になっていました。そして、OvenPlayerの中にシグナリング処理が内容されていることから、シグナリングサーバを立てる必要がない(たぶん)ため、OpenPlayerと同じまたは参考になるhtmlファイルを探していました。
git clone https://github.com/AirenSoft/OvenPlayer.git
そこで、G:\home\ebata\ome_playerに、OpenPlayerというディレクリができます。
G:\home\ebata\ome_player\OvenPlayer\demoにあるindex.htmlを叩くと、以下のOvenPlayerと同じ画面がでてくる
で、ここにplaybackにws://localhost:3333/app/streamして、ADD SOURCEボタンを押下すれば、
映像が表示されます。(ソースコードが手に入ったので、あとは何とかなると思います(思いたい))。
======
次の構成は、
[(Ubuntuの中から)SRTストリームで映像を配信] → [OME(docker)] → [OvenPlayer(Docker?)をつかったWebサイト]
現在Ubuntuの外からの接続からは成功していないが、Ubuntuの中からであれば、
ebata@DESKTOP-1QS7OI7:~$ gst-launch-1.0 -v videotestsrc ! queue ! videoconvert ! x264enc tune=zerolatency ! mpegtsmux ! srtsink uri="srt://127.0.0.1:9999?streamid=srt%3A%2F%2F127.0.0.1%3A9999%2Fapp%2Fstream1" (SRTストリーム送信)
(OMEのDockerはこれで起動)
ebata@DESKTOP-1QS7OI7:~$ docker run --name ome -d -e OME_HOST_IP=172.29.0.1 -p 1935:1935 -p 9999:9999/udp -p 9000:9000 -p 3333:3333 -p 3478:3478 -p 10000-10009:10000-10009/ -p 10000-10009:10000-10009/udp airensoft/ovenmediaengine:latest
OvenPlayerのPlayback URLは、
ws://localhost:3333/app/stream1
で、
G:\home\ebata\ome_player\OvenPlayer\demo\4display_demo.html
ebata@DESKTOP-1QS7OI7:~$ sudo socat -T15 UDP4-LISTEN:9998,bind=0.0.0.0,fork,reuseaddr UDP4:172.17.0.1:9999
C:\Users\tomoi>gst-launch-1.0 -v videotestsrc ! queue ! videoconvert ! x264enc tune=zerolatency ! mpegtsmux ! srtsink uri="srt://172.29.11.141:9998?streamid=srt%3A%2F%2F127.0.0.1%3A9999%2Fapp%2Fstream1"
Ubuntuの中でifconfigをやると出てきた、これ↓
inet 172.29.11.141 netmask 255.255.240.0 broadcast 172.29.15.255
inet6 fe80::215:5dff:fef5:7828 prefixlen 64 scopeid 0x20<link>
ether 00:15:5d:f5:78:28 txqueuelen 1000 (Ethernet)
RX packets 1638183 bytes 391863280 (391.8 MB)
RX errors 0 dropped 0 overruns 0 frame 0
TX packets 74595 bytes 6558491 (6.5 MB)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0