読者です 読者をやめる 読者になる 読者になる

とある技術者のお遊びフライト日記

ゲームをきっかけに国内飛び回る謎な人の日記。時々技術ネタもご提供。

HTTP Live Streaming対応のライブ動画配信サーバーを構築する

概要

PCだけでなく、iOSAndroid(4.0以降)端末にも対応できる動画配信サーバーを構築する方法です。
モバイルデバイスでは特別なアプリを入れることなく、配信されている動画を見ることが可能です。

前提条件

OS:CentOS 6.6
apacheが既にWebサーバーとして稼動しているものとする
apacheの公開ルートディレクトリ:/home/www/
配信ページのディレクトリ:/home/www/live
nginx バージョン:1.6.3 (stable release)
nginx インストール先:/usr/local/nginx
HTML5プレイヤー:Flowplayer HTML5

注意点

自宅サーバーでは、回線の上り帯域使用量規制(およそ30GB/月)があるため、回線がいくら好条件でもお勧めできません。
運営者は自分自身のため、何を配信しても強制停止はされませんが、配信する内容には注意を払う必要があります。

やり方

1. nginxとモジュールの取得

nginxとnginx-rtmp-moduleを取得します。
ビルドにはpcre-devel、openssl-develが必要なので、入れてない場合はインストールしてください。
(例)

sudo yum install pcre-devel.x86_64 openssl-devel.x86_64

nginxを取得します。その後、続けてnginx-rtmp-moduleを取得します。

wget http://nginx.org/download/nginx-1.6.3.tar.gz
git clone git://github.com/arut/nginx-rtmp-module.git
2. ビルドとインストール

※1.3.4から1.5.0までは--with-http_ssl_moduleを入れろとありますが、1.6.3でも入れたほうがいいと思います
※配信時に自動生成されるファイル群をapacheの公開ルートディレクトリ以下に書き込むため、ワーカープロセスのユーザーとそのグループをapacheにしています

./configure --add-module=/path/to/nginx-rtmp-module --with-http_ssl_module --user=apache --group=apache
make
sudo make install
3. nginxの設定

そのままの設定では、apacheが待ち受ける80番とぶつかってしまうため、nginxのHTTP待ち受けポートを適当、でたらめな番号にします。(外部に対して閉じているポートにしても問題ありません)
※HTTPサーバを有効にしていないとRTMPモジュールは動作しないため、このようなことを行います
conf : /usr/local/nginx/conf/nginx.conf

user  apache;
worker_processes  1;

events {
    worker_connections  1024;
}

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

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8080;
        server_name  localhost;

        #define root directory
        location / {
            root /home/www;
        }

        #rtmp stat
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root /home/www/stat.xsl;
        }

        #rtmp control
        location /control {
            rtmp_control all;
        }

        #hls location
        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
            }
            root /home/www;
            add_header Cache-Control no-cache;
        }
    }
}

rtmp {
    server {
    listen 1935;
    ping 30s;
    notify_method get;
    live on;
    hls_path /home/www/live/hls;

        application live {
            hls on;
            wait_video on;
        }
    }
}
4. apacheの設定

MIME周りの設定をする必要があります
conf : /etc/httpd/conf/httpd.conf

AddType application/x-mpegurl .m3u8
AddType video/mp2t .ts
5. ポートの開放

ポート1935を開放します。
iptablesを使用している場合は、下記のようなコマンドを入力します(server ipとなっている部分は、サーバのグローバルIPを入力します)。

iptables -A INPUT -p tcp -d <server ip> --dport 1935 -j ACCEPT
iptables -A INPUT -p udp -d <server ip> --dport 1935 -j ACCEPT
6. 閲覧ページを作る

Flowplayer HTML5を使用した場合で説明します。
Pricing · Flowplayerより、Flowplayer HTML5 (zip)をクリックしてダウンロードします。
ダウンロード後解凍し、公開ディレクトリへ配置します。下図を参照してください。
この後の設定によってプレイヤーページのソースを書き換える必要がありますが、その内容は後述します。
また、図中にはありませんが、HLS配信時に作成されるデータを入れるディレクトリ(ここではhlsという名前のディレクトリに入れるものとします)を作成しておいてください。

7. サーバの起動
sudo /usr/local/nginx/sbin/nginx

emergというタグのようなものがついたメッセージ(エラーメッセージ)がなく再びプロンプトに戻れば、無事にサーバは起動しています。

8. OBSの設定

nginxの設定ファイルを上記と同じにした場合は、下図の設定でOKです。
設定内容等により、先ほど配置したHTMLのコードを一部書き換える必要があります。具体的には、図中で1から3の番号が明記されている箇所に、それぞれ同じ値を記入してください。
(注)日本語名は使用できません。できたとしても誤動作の原因となるためお勧めしません。

配信テスト

OBSでエンコードを開始し、HLSに対応したブラウザ・デバイスを使用して、配信が正しく閲覧できるか確認してください。

お疲れ様でした

問題なく閲覧できましたか?できていれば、以上で本手順によるサーバーの構築は終了です。快適な動画配信ライフをお楽しみください。

ありそうなQ&A

最後にありそうな質問とその回答を載せておきます。参考になれば幸いです。

セグメンタ、もしくはセグメント化の作業は不要ですか?

nginxがセグメント化まで含めて面倒を見てくれるため、不要です。ただストリームをサーバに対して流すだけで、HLS対応の配信が実現します。

ffmppegは不要ですか?

ここでは、ffmpegの代わりにOpenBroadCasterを使用しています。
OpenBroadCasterを使用する限り、ffmpegは不要です。
その代わり、詳細なオプションを使って追い込んだ設定にはできません。この面ではffmpegに軍配が上がります。
どちらを使うかはあなたの腕と気合い次第です。

いつかディスクがいっぱいになりませんか?

hls_pathで指定したディレクトリの中身を、適当な頃合いを見計らって消してやってください。
rootのcrontabにそのようなスクリプトを組んで仕込んでやるといいでしょう。

どんなブラウザ・環境でHLSのストリームは閲覧できますか?

RTMP
PC……Flashが使えれば基本的に無制限
iOS……△(別途アプリで対応可)
Android……△(別途アプリで対応可)

HLS(注)HLSによるライブストリーミングの場合
PC……OS XSafari(確認済み)
iOS……○
Android……○(コアにWebKitを使ったブラウザなら可能なはず)

HTML5のVideo要素(HLSとは異なります)だとIE9〜11、Google ChromeFireFox(たしか27以降)でも見れます。
※IE12ではHLSに対応させる予定があるそうですが、今のところは不明。
※nginx-rtmp-moduleはMPEG-DASHもサポートしてますが、閲覧ページの導入がアホみたいに面倒なのでお勧めできません。IE11はMPEG-DASHをサポートしていますが、この理由により対応は困難です。

crtmpserver版との違い
1.閲覧環境について

Android(4.0以降)、iOSデバイスからはブラウザだけで配信内容を閲覧可能。
PCからは、SafariなどのHLS対応ブラウザを使用することで、プラグインフリー(Flash playerなし)で配信されている動画を見ることが可能。

2.配信環境について

OpenBroadCasterやffmpegなどの使い慣れたツールをそのまま使用可能。
サーバー側の設定をうまくやれば、配信ソフトの設定を一切変更することなくHLS対応が可能。

3.その他

RTMPにも対応するため、旧来のFlashを使用した配信ページをそのまま使用することも可能。