OBSを独自ストリーミングする方法
はじめに
youtubeやTwitchを使わずに配信する方法です。
Discordのニトロとかを使わずに画面共有したい方向け?
技術紹介
動画をストリーミングするためには
- UDPで相手にデータを叩きつけ続ける
- 単位時間ごとに動画を分割し、相手がTCPで該当のファイル要求する
に大きく別れます。
前者はFLASHプレーヤーが必要ですが低遅延
後者はHTML5とh264動画再生に対応していれば再生できます。
これらはそれぞれ、rtmp・hlsと呼ばれます。
今回はこの2つに対応したnginxベースの配信環境の紹介です。
やり方
nginxの用意
nginxでこれを行うためには rtmpのモジュールとともにコンパイルしないといけないんですが、windowsだとこれがとても面倒くさい。頼むからwindowsにもコンパイラ最初から入れといて・・・
と思いながら探したら、コンパイル済みのバイナリを発見したのでこれを利用します。
https://github.com/illuspas/nginx-rtmp-win32
このバイナリに不正なコードが合ったとしても、私はコンパイルに関与していないので。まあ大丈夫だと思いますが
これをベースにhtmlとconfを変更したのが以下のファイルです。
これをダウンロードして展開します。ファイル階層に日本語があると起動できませんので、ドライブ直下等においてください。
展開したフォルダにnginx.exeがあるのでこれを起動します。
ファイアウォールの設定ができますので、お使いの環境に合わせてください。
起動後に、
http://localhost:8080/index-local.html
にアクセスできれば起動しています。
FLASHを実行すると視聴状態になります。
上記のアドレスの他にhls用の
http://localhost:8080/index-hls.html
ルーターの外からのアクセス用に
http://localhost:8080/index.html
があります。index.htmlはグローバルipアドレスを設定しないと使えません。
obsの用意
OBSを開きます。
設定の配信を開きます。
カスタムストリーミングサーバーを選び
フラッシュプレーヤーの場合は
URL rtmp://localhost:1935/live
ストリームキー livekey
とし、設定を有効にします。
配信を開始すると右下が緑色になります。
すると
http://localhost:8080/index-local.html
に配信されています。
hlsを使う場合は、OBSの設定のliveをhlsに変えます。
URL rtmp://localhost:1935/hls
ストリームキー livekey
http://localhost:8080/index-hls.html
にアクセスすると、
配信できています。通信状況を見ると、tsファイルリクエストしています。
OBS_Streaming_nginx_v1\temp\hls
に分割されたファイルができますが、60ぐらいできると消されるので無限にファイルができることはないです。
nginxを停止する場合は、stop.batを実行してください。
ポート開放をする
ルーターのポートを開放しなければ外から見ることはできません、
以下のポートを開放してください。
- UDP 1935(rtmp)
- TCP 8080(webプレーヤー)
ちなみにですが、UDP 1935(rtmp) を開放することで、ポート開放できない人が、他のポート開放されたnginxに配信することができます。
つまりVPSにこれを配置すればストリーミングサーバーができます。コンパイルは自分でやってね。以下のコンフィグで同様に動作しました。
./configure --sbin-path=./ --conf-path=conf/nginx.conf --add-module=../nginx-rtmp-module --prefix=./
htmlにグローバルIPアドレスを書く。
hlsを使う場合はこの作業は必要ありません。
以下のサイトにアクセスしてIPアドレスを確認します。
https://www.cman.jp/network/support/go_access.cgi
デカデカと表示された数字をコピーします。(IPアドレス出てるって?DNS叩くとバレるし、IPアドレス動的だしよくね?)
index.htmlを編集します。メモ帳で開きます。
rtmp://IPアドレス:~
となっているので、IPアドレスの部分を先ほどコピーしたものと入れ替えます。
DDNSがある場合はそちらで構いません。
保存すると、外から配信を見ることができます。
外からアクセスするには
http://IPアドレス:ポート番号/index.html
です
まとめ
ニトロ使ったほうが速くね?
ディスカッション
コメント一覧
Ver25.0.1にアップデートしたら配信できなくなってしまいました・・・・!
大人しくダウングレードするほかないですかね・・・?
OBS 25.0.4でhlsの配信はできました。
フラッシュプレーヤーはブラウザからは無効な状態になっていますので、hls版の利用を検討してください。
http://localhost:8080/index-local.html
にアクセスするとユーザー名とパスワードを求められるのですが、これは失敗なのでしょうか?
OBS 25.0.8でhlsの配信はできました。
8080portで違うプログラムが動作していませんか?
OBSでPC画面をrtmpで配信し、スマホのVLCのネットワークストリーム再生で低遅延で視聴できました。
ここまで簡単に配信できる様、カスタマイズしたnginxを公開していただき、大変感謝です!
記事大変参考になりました。
hlsで配信時、ブラウザで開くと最初に再生ボタンが出ますよね?
あれをなしで自動再生にしたい場合どうしたらよいのでしょうか?
合わせてですがあと2点
・下のコントロールバーを消したい場合
・sslでの配信をしたい場合
可能なら教えてください。
「index-hls.html」の23行目を以下のように書き換えればコントロールバーなしで自動再生します。
before
<video id="live" class="video-js" controls autoplay
after
<video id="live" class="video-js" autoplay muted
sslでの配信はnginxの設定だけでなく証明書発行が必要になるので、正式な証明書による暗号化はwindowsでやらないほうが良いと思います。
https://qiita.com/ytanto/items/258d567314cb4ad07457
自前サーバでOBSからの配信を複数系統受けて複数系統配信をしたいのですが
nginx.confの修正とかで可能でしょうか?
nginxの設定は修正しなくても、OBSと再生側のライブキーを合わせればできたと思います。
今回は「livekey」になっていますが、この部分を重複しないように「room1」などにすればどうでしょうか?
http://IPアドレス:ポート番号/index.html
これをHPに埋め込んで配信したいと考えています。
wordpressでiframeをつかって埋め込んだところ、動作しません。
なにか方法ないでしょうか??
動作しないということが、よくわからないのですが、ブラウザの検証ツールで原因は調べましたでしょうか?
予測ですが、wordpress側がhttpsであれば、iframeでhttpはセキュリティの問題で埋め込めないと思います。
回避策として考えられるのは、videoタグとスクリプトタグをHTMLブロックとして記事に埋め込むことでしょうか。
おっしゃるとおり、httpsでiframeが弾かれました。
videoも試したのですが単独では再生されません。
スクリプトの部分、もう少し詳しく教えていただいてもよろしいでしょうか??
HTMLブロック内のvideoタグで見る方法は以下の表記かと思いますが、CORSで弾かれるので、設定が必要です。
iframeの場合は、Chromeの設定で「設定、サイトの設定、安全ではないコンテンツ」でサイトを許可すれば見れました。
他のブラウザでも混在コンテンツを許可すれば見れます。
正規の証明書を発行すればこの問題は解決するとは思います。