UbuntuでNginxをセットアップしてライブHLSビデオをストリーミングする

HTTPライブストリーミング（HLS）は、Apple Inc.によって実装された非常に堅牢なストリーミングビデオプロトコルです。HLSは、ファイアウォール、プロキシを通過するHTTPトランザクションを使用し、CDNを通じて簡単に配布できます。したがって、このテクノロジーは、RTPまたは他のUDPベースのプロトコルよりもはるかに多くの視聴者に到達できます。今日のオンラインライブストリーミングビデオの多くは、HLSを使用する高価なシステムによってホストされていますが、一般に高価であり、多くのサーバーリソースを必要とします。このチュートリアルでは、オープンソースソフトウェアのみを使用してHLSライブストリーミングイベントを実行するために、非常に手頃なUbuntu 14.04 VULTR VPSを設定する方法を示します。

最初のステップは、Vultr Doc「Ubuntu 14.04にNginx-RTMPをセットアップする」に従ってサーバーを読み取り、セットアップすることです。このドキュメントの説明は、執筆時点でのセットアップ段階で最も包括的なものでした。「nginx-1.7.5」を「nginx-1.9.4」に置き換えるか、Nginxの最新バージョンが利用可能であれば何でも代用したいと思うかもしれません。もう1つの提案は、HTTPスタブステータスモジュールを使用してNginxをコンパイルし、後で所有するライブHLSビューアの数を監視できるようにすることです。

でコンパイルする代わりに：

./configure --with-http_ssl_module  --add-module=../nginx-rtmp-module-master

前提条件のドキュメントで説明されている手順でこの文字列を使用します。

./configure --with-http_ssl_module --with-http_stub_status_module --add-module=../nginx-rtmp-module-master

このチュートリアルの例では、「ライブ」ストリームと「モバイル」（最適化）ストリームの両方を作成し、ffmpeg（前のチュートリアルでインストール）を使用して、ビットレート調整されたモバイル最適化HLSストリームを生成します。この例では、サーバーにライブストリームを自動的に記録させ、その記録をビデオオンデマンド（VOD）再生サービスとして再生する方法も示します。

まず、ライブおよびモバイルHLSマニフェストとビデオフラグメントを保持するために必要なフォルダー構造を作成します。

sudo mkdir /HLS
sudo mkdir /HLS/live
sudo mkdir /HLS/mobile
sudo mkdir /video_recordings
sudo chmod -R 777 /video_recordings

ファイアウォールをまだ有効にしていない場合は、有効にすることをお勧めします。その場合、NginxとHLSが使用するポートへのトラフィックを許可する必要があります。今のところファイアウォールなしで実行したい場合は、以下のufwセクションを無視してください。

sudo ufw limit ssh
sudo ufw allow 80
sudo ufw allow 1935
sudo ufw enable

HLSストリーミングには、最初の記事のRTMP構成とは大幅に異なるNginx構成が必要です。nginx.confファイルを編集して、「my-ip」と「my-stream-key」をあなたの情報に置き換えて、以下を使用します。「my-stream-key」には何でも使用できます。これは、あなたにとってユニークで役立つ単語です。最初に元の構成ファイルをバックアップしてから、提供された構成情報をエディターに貼り付けて、そこにあったすべてのものを置き換えます。

sudo cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.original
sudo nano /usr/local/nginx/conf/nginx.conf

新しいnginx.conf：

worker_processes  1;
error_log  logs/error.log debug;
events {
worker_connections  1024;
}
rtmp {
server {
listen 1935;
allow play all;

#creates our "live" full-resolution HLS videostream from our incoming encoder stream and tells where to put the HLS video manifest and video fragments
application live {
allow play all;
live on;
record all;
record_path /video_recordings;
record_unique on;
hls on;
hls_nested on;
hls_path /HLS/live;
hls_fragment 10s;

#creates the downsampled or "trans-rated" mobile video stream as a 400kbps, 480x360 sized video
exec ffmpeg -i rtmp://192.168.254.178:1935/$app/$name -acodec copy -c:v libx264 -preset veryfast -profile:v baseline -vsync cfr -s 480x360 -b:v 400k maxrate 400k -bufsize 400k -threads 0 -r 30 -f flv rtmp://192.168.254.178:1935/mobile/$;
}

#creates our "mobile" lower-resolution HLS videostream from the ffmpeg-created stream and tells where to put the HLS video manifest and video fragments
application mobile {
allow play all;
live on;
hls on;
hls_nested on;
hls_path /HLS/mobile;
hls_fragment 10s;
}

#allows you to play your recordings of your live streams using a URL like "rtmp://my-ip:1935/vod/filename.flv"
application vod {
play /video_recordings;
}
}
}


http {
include       mime.types;
default_type  application/octet-stream;

server {
listen 80;
server_name 192.168.254.178;

#creates the http-location for our full-resolution (desktop) HLS stream - "http://my-ip/live/my-stream-key/index.m3u8"      
location /live {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/live;
add_header Cache-Control no-cache;
}

#creates the http-location for our mobile-device HLS stream - "http://my-ip/mobile/my-stream-key/index.m3u8"        
location /mobile {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/mobile;
add_header Cache-Control no-cache;
}   

#allows us to see how stats on viewers on our Nginx site using a URL like: "http://my-ip/stats"     
location /stats {
stub_status;
}

#allows us to host some webpages which can show our videos: "http://my-ip/my-page.html"     
location / {
root   html;
index  index.html index.htm;
}   
}
}

Ctrl + Xを押して終了します。「はい」と言って変更を保存します。

nginx.confお気に入りの検索エンジンに「nginx-rtmpディレクティブ」を照会すると、このファイルで可能な変数の明確な指示と例を見つけることができます。「allow publish」および「deny publish」ディレクティブを使用せずに、HLSでnginx-rtmpをここ数年使用しており、ビデオサーバーを使用/侵入する人のインスタンスをまったく見ていません。したがって、これらのディレクティブはここに含めませんでした。必要に応じて、これらのディレクティブについて読んで追加してください。

nginx.confファイルを変更した後、新しい構成を使用するにはNginxを再起動する必要があります。

sudo service nginx restart

Nginxのエラーメッセージを注意深く確認し、スペルミス、フォルダの所有権、またはアクセス許可の問題が原因で発生した可能性のあるエラーに対処します。エラーメッセージがない場合は、エンコードストリームを作成する準備ができています。

ストリームを作成するには、ビデオエンコーダーが必要です。私はOBS（Open Broadcaster Software）を使用しています。これはオープンソースであり、うまく機能します。このチュートリアルの範囲外である他から選択するソリューションがあります。RTMPビデオエンコーダーの構成に関するすべてについては説明しません。ただし、これらはすべてほぼ同じ入力変数を必要とします。私の正確なnginx.conf構成を使用し、ほとんどのプレーヤー/ブラウザー/プラットフォームで適切に機能するために入力する必要がある主要な設定は次のとおりです。

1. エンコーダーx264
2. 可変ビットレート（CBRまたは固定ビットレートではない）、最高の品質
3. 最大ビットレート-600kbps
4. オーディオコーデックAAC
5. オーディオ形式-44.1kHz
6. オーディオビットレート-64kbps
7. FMS URL- "rtmp：// my-ip：1935 / live"
8. ストリームキー-"my-stream-key"
9. 解像度640x480
10. FPS（フレーム/秒）-30
11. CFR（一定フレームレート）-はい
12. キーフレーム間隔-2秒（2秒ごとに1つのキーフレーム）
13. x264エンコーディングプロファイルベースライン（メインで機能する場合があります。使用するプレーヤーによって異なります）
14. x264 CPU Present-veryfast

別のエンコーダーを試し、それらを試すことをお勧めします。ワイドアスペクト比が必要な場合や、カメラ（または他の放送）の素材が要求する場合があります。その場合は、エンコーダのこの情報と、nginx.conf提供したファイルのexec-ffmpegセクションに記載されているアスペクト比も必ず変更してください。そうしないと、間抜けなビデオフィードが表示されます。

エンコーダを設定したら、すべてをテストできます。ウェブカメラまたはその上で実行されているある種のテストフォダーでエンコーダーを起動します。この時点で、次のようなURLを使用してVLCプレーヤーでブロードキャストを表示できます。

http://my-ip/live/my-stream-key/index.m3u8
http://my-ip/mobile/my-stream-key/index.m3u8

これらはそれぞれメインビデオストリームとモバイルビデオストリーム用です。IPを置き換え、それに応じてキーをストリーミングします。

最初のストリームを正常にブロードキャストした後（sshまたはftpを介して）、ライブブロードキャストが/video_recordingsVultr VPSのフォルダーに記録されたことを確認します。次のようなURLを使用して、VLCでこの録音ファイルを再生してみることもできます。

rtmp://my-ip/vod/filename.flv

Nginx統計も利用できます（Nginx stub_statusを使用）。訪問者/閲覧者の統計を表示するには、以下にアクセスします：

http://my-ip/stats

ビデオをWebページで表示するには、埋め込み可能なプレーヤーが必要です。HLSビデオを再生する多くの埋め込み可能なプレーヤーが利用可能です。数年前からJW Playerを使用していますが、無料版ではHLSを再生できません。FlowplayerおよびBitmovinによるBitdash（他のソリューションの中でも）は十分に寛大であり、Webページに埋め込まれたHLSストリームをレンダリングする非商用バージョンのプレーヤーを無料で提供します。この記事では、両方を試してみましたが、どちらもVultr / Nginxベースのビデオサーバーで非常にうまく機能することがわかりました。Flowplayerをテストベッドマシンで使用する方法を簡単に説明します。

定期的、継続的、または商用の方法でライブHLSストリーミングを使用する場合は、Flowplayerまたは使用するプレーヤーからライセンスを購入することをお勧めします。制限が少なく、機能が多く、組織にブランド化できるプレーヤーを入手できます。また、サポートを受けることもできます-これは非常に重要です。Vultr VPSを除いて、これは実際にプロジェクトに関連する唯一のコストです。

他に何かする前に、いわゆる「クロスドメイン」制限に注意することが重要です。そうしないと、Webページ/ Webサイトにストリーミングする機能がシャットダウンします。フォルダ内にcrossdomain.xmlファイルを作成し、nginx/htmlそこに指示を入れて、ドメイン間でデータが流れるようにします。

sudo nano /usr/local/nginx/html/crossdomain.xml

最初に（このページから）コピーしてから、nanoエディターフィールドに次のXMLデータを貼り付け（右クリック）します。

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>

Ctrl + Oを押して書き込み、次にCtrl + Xを押してファイルをディスクに保存して終了します。

FlowplayerのHTML5（バージョン6.0.3）を取得したところ、解凍すると多数のファイルとフォルダーが表示されました。すべてのファイルとフォルダーを、「flowplayer」という名前のNginx / HTMLルートフォルダーのサブフォルダーにアップロードしました。正確なパスはでした/usr/local/nginx/html/flowplayer。

Webページに埋め込まれたときにビデオをテストするには、nginx / HTMLフォルダーのルートにnanoを使用していくつかのHTMLファイルを作成し、次のコンテンツを入力します。

ファイル：

sudo nano /usr/local/nginx/html/hls.html

HTMLコード：

<!doctype html>
<head>
<link rel="stylesheet" href="#">
</head>

<body>
640x480 664kbps (live) Desktop Browsers<br>
<div style="width:640px;" class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src="">
</video>
</div>
<br><br>
480x360 464kbps (mobile) Mobile Browsers <br>
<div style="width:480px;" class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src="">
</video>
</div>
</body>

ファイル：

sudo nano /usr/local/nginx/html/hls_progressive.html

HTMLコード：

<!doctype html>
<head>
<link rel="stylesheet" href="#">
<style> .flowplayer { width: 640px; } </style>
</head>

<body>
<div class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src=""> 
<source type="application/x-mpegurl" src="">
</video>
</div>
<br>
</body>

「my-ip」と「my-stream-key」をデータに置き換えてください。

flowplayer/skin/functional.cssスタイルシートの「＃」記号をパスに置き換える必要がありますhref="#"。チュートリアルソフトウェアはパスを削除します。src=""パーツにURLを入力する必要があります。URL はチュートリアルソフトウェアによって削除され、それぞれhttp://my-ip/live/my-stream-key/index.m3u8とを使用していhttp://my-ip/mobile/my-stream-key/index.m3u8ます。また、スクリプトを追加する必要がありますsrc両方のために頭の中でタグをjquery-1.11.2.min.jsしてためflowplayer.min.js。タグはチュートリアルソフトウェアによって取り除かれています。これらのタグを作成する方法example htmlは、Flowplayerキットに含まれているファイルを見るとわかります。

ウェブカメラまたはその上で実行されているある種のテストフォダーでエンコーダーを起動します。次のURLを使用して、ブラウザでブロードキャストを表示できます。

http://my-ip/hls.html
http://my-ip/hls_progressive.html

最初のページには、メインのストリームとモバイルプラットフォームのストリームのそれぞれが表示されます。それらを起動して表示することができます。モバイルプラットフォームストリームのサイズが小さいことがわかります。これらの手順は、すべてが実行されていることを確認するためのものです。

2番目のページは、単一のストリームを示しています。ただし、「プログレッシブストリーミング」と呼ばれる方法で設定されます。つまり、視聴者の接続が維持できる場合、視聴者がビデオを再生すると、サーバーとプレーヤーの両方が高ビットレートで高品質のストリームを視聴者に提供しようとします。接続が不十分で、接続を維持できない場合は、ロールダウンして、帯域幅が200 kbps低いビットレート（モバイル）ストリームを表示します。必要に応じて、ffmpegを使用して段階的でプログレッシブなストリームを作成し、私の例を使用して構成できます。

私はこの構成を1コアの1GB Vultr VPSでテストしましたが、単一のライブストリームに加えて、ffmpegで作成されたトランスレートされたモバイルストリームで、CPU使用率が35％未満で、100MBしか消費していませんでした。私の1GBのRAM。これは非常に効率的なセットアップです。

SDよりもピクセル寸法がはるかに大きいビデオをストリーミングする場合は、より強力なVPSを使用する必要がある場合があります。私はこれに興味があり、メインストリームを最大1280x960ピクセル、2Mbpsで実行しました。しかし、VPSは依然として50％のCPUしか使用せず、メモリの使用は100MBのままでした。ダースのビューア/ブラウザを追加しましたが、VPSの負荷にほとんど違いはありませんでした。使用された帯域幅のみが増加しました。ffmpegを使用して追加のトランスレーティングストリームを作成すると、引き続きシステムに追加の負荷がかかると確信しています。

私はこのタイプのサーバーを50〜100人の同時ユーザーがいる実稼働環境で使用しましたが、ビューアー接続が増加してもリソース使用量はほとんど増加しませんでした。試してみてください。しかし、ほとんどのユーザーはシングルコア、1GB VPSを使用して満足していると思います。新しいHLSストリーミングサーバーをお楽しみください！