概要
nginx に RTMP 用のモジュールを追加することでライブ配信することができます
今回は nginx-rtmp-module のインストール方法から OBS を使った配信方法までを紹介したいと思います
環境
サーバ
- Ubuntu 16.04
- nginx 1.15.3
配信クライアント
- macOS X 10.13.5
- OBS 21.1.1
視聴クライアント
- macOS X 10.13.5
- Chrome 68.0.3440.106
- video.js 7.0
nginx-rtmp-module 入の nginx をインストールする
先に必要なモジュールをインストールします
- apt -y update
- apt -y install libpcre3-dev libssl-dev
nginx はソースからインストールする必要があります
- git clone https://github.com/nginx/nginx.git
- git clone https://github.com/arut/nginx-rtmp-module.git
./auto/configure --add-module=/root/nginx-rtmp-module- make
- make install
/usr/local/nginx/sbin/nginx がバイナリです
/usr/local/nginx/ 配下に設定ファイルやドキュメントルートのディレクトリがあります
nginx.conf の設定
rtmp ディレクティブの設定を入れます
既存の設定はそのまま使うので以下を最後に追記してください
- vim /usr/local/nginx/conf/nginx.conf
rtmp {
server {
listen 1935;
chunk_size 4000;
application mytv {
live on;
record all;
record_path /tmp/av;
record_max_size 1K;
record_unique on;
allow publish 192.168.100.50;
deny publish all;
allow play all;
}
}
}listen 1935 で rtmp のポートを指定します
application ディレクティブで配信の設定をします
「mytv」の部分は任意の文字列です
配信と視聴の際の URL に使います
live on とすることでライブストリーミングすることができます
nginx-rtmp-module ではビデオオンデマンドによる動画配信もできるのでその場合は live を off にしましょう
record の部分はサーバに録画ファイルを残すかの設定になります
パスや保存されるファイルの命名規則を指定します
allow/deny publish で配信クライアントの IP 制限が行えます
allow/deny play で視聴クライアントの IP 制限ができます
rtmp サーバの起動
- /usr/local/nginx/sbin/nginx
-s stop を付与することで停止できます
1935 ポートで LISTEN していることを確認しましょう
クライアント設定
視聴側 (HTML + JS )と配信側 (OBS) のクライアントの準備をします
視聴用のクライアントを作成する
ブラウザで使用するので HTML + JS で構築します
今回は video.js + Flash を使って再生します
- cd cd /usr/local/nginx/html
- vim index.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
<link href="https://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.1/videojs-flash.min.js"></script>
</head>
<body>
<video id="rtmp_mytv_mytv" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" data-setup='{}'>
<source src="rtmp://192.168.100.50:1935/mytv/mytv" type='rtmp/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser
that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</body>
</html>とりあえずコピペして source タグの部分を編集すれば動作するはずです
mytv/mytv の後ろの mytv はあとで OBS の設定で使います
好きな文字列で OK です
プレイヤーのサイズが 640x264 で少し小さいので大きくしてもいいかと思います
配信側のクライアントの設定
OBS の設定をします
「Preferences」->「配信」->「カスタムストリーミングサーバー」を設定します
構築した rtmp サーバの URL を入力しましょう
そしてストリームキーは先程プレイヤーで指定した mytv/mytv の後ろの部分の文字列を入力しましょう
テストとして映像のソースにスクリーンキャプチャを適当に設定しました
あとは映像の設定や音声の設定は好みでお願いします (デフォルトのままでも動作します)
準備できたら「配信開始」をクリックします
緑のステータスになれば OK です
動作確認
ブラウザで rtmp サーバの 80 番ポートにアクセスしましょう
作成したプレイヤーが表示されると思います
Flash を有効にして video.js の再生ボタン -> Flash の再生ボタンを押すと配信を見れると思います
トラブルシューティング
- No compatible source was found for this media.
以下をプライヤーに追加してみてください
RTMP は Flash が必要になるので以下のスクリプトの読み込みも必要になります
上記で紹介したサンプルにはすでに含まれています
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.1/videojs-flash.min.js"></script>最後に
nginx + RTMP でライブ配信する方法を紹介しました
結構簡単にできました
Red5 でも RTMP を使ったライブ配信ができますがお手軽さ的にはこちらの方がいいかなと思います
ただ Red5 は他にもいろいろな配信プロトコルをサポートしているので用途に合わせて使い分けると良いかなと思います
0 件のコメント:
コメントを投稿