nginx-rtmp-moduleでお試しLive配信環境を作る

USTREAMやYouTube Liveの様に、リアルタイムで動画を配信しながら視聴できる一連の環境づくり＆設定についてまとめてみた。
（お試し環境なので、同時接続が辛いとか色いろあります）

# 配信サーバの準備
[Real Time Messaging Protocol (RTMP) ](http://ja.wikipedia.org/wiki/Real_Time_Messaging_Protocol)を扱うために、オープンソースで公開されている[nginx-rtmp-module](https://github.com/arut/nginx-rtmp-module)を使います。
今回は映像を受信して、配信するサーバは同じサーバとして、EC2(Amazon Linux)上に用意して試します。

```
sudo su
yum update
yum groupinstall "Development Tools"
yum -y install pcre-devel zlib-devel openssl-devel

cd /usr/local/src/
wget http://nginx.org/download/nginx-1.8.0.tar.gz
sudo wget http://nginx.org/download/nginx-1.8.0.tar.gz
tar -zxvf nginx-1.8.0.tar.gz
wget https://github.com/arut/nginx-rtmp-module/archive/master.zip
unzip master.zip

# build
cd nginx-1.8.0
./configure --with-http_ssl_module --add-module=../nginx-rtmp-module-master
make
make install
```

### nginxの設定ファイルにrtmpの設定を追加

`/usr/local/nginx/conf/nginx.conf`の一番最後に以下を追加

```
rtmp {
   server {
      listen 1935;
      chunk_size 4096;

      application live {
         live on;
         record off;
      }
   }
}
```

`application`で指定する名称がURLの一部になります。
上記の設定だとURLは、`rtmp://<ip address>/live`

設定ができたら、nginxを起動します。

```
/usr/local/nginx/sbin/nginx
```

この状態でブラウザから`http://<ip address>/`にアクセスして、Nginxの起動してますページが表示されればOK。

## 配信サーバへ映像を送るクライアントを準備

本格的に配信をする人なら[LiveShell Pro](http://static-shell.cerevo.com/pro/ja/product.html)とか使って配信するかもしれませんが、今回はお試しなのでPC上でキャプチャ出来て、配信サーバにアップロードできるオープンソースのソフトを使います。

[Open Broadcaster Software](https://obsproject.com/)

Mac版をダウンロードして起動します。
起動するとこんな感じの画面が表示されると思います（デフォルトではデスクトップをキャプチャする）
![スクリーンショット 2015-05-18 10.25.59.png](https://qiita-image-store.s3.amazonaws.com/0/36184/1d131eba-61a9-99b7-30d4-55e49633cb4c.png "スクリーンショット 2015-05-18 10.25.59.png")

### 配信サーバの指定
右下のボタンの`設定`をクリックして設定画面を開きます。
次に設定画面の左側の`配信`を選択します。
![スクリーンショット 2015-05-18 10.21.04.png](https://qiita-image-store.s3.amazonaws.com/0/36184/993f6f57-c8e8-87e9-f2f7-d75cc0e758cd.png "スクリーンショット 2015-05-18 10.21.04.png")
`配信種別`でカスタムストリーミングサーバを選択して、URLに準備したサーバのURLを指定します。
`ストリームキー`には何らかの文字列を指定します（適当文字列でもOK）
ここで指定したストリームキーは後で映像を試聴する際のURLで使われます。

### 映像キャプチャの設定

OBSの最初の画面で`ソース`となっているコントロールで「＋」をクリックすると、追加するソースが表示されるので、`映像キャプチャデバイス`を選択します。
![スクリーンショット 2015-05-18 10.35.47.png](https://qiita-image-store.s3.amazonaws.com/0/36184/c4af09e8-a68a-47e1-6f72-100942fdc184.png "スクリーンショット 2015-05-18 10.35.47.png")

開かれたダイアログで、新規作成のままOKをクリックすると、Mac Book Proの場合は`FaceTime HD Camera`が選べるので、それを選択すると、カメラからの映像が表示されます。
![スクリーンショット 2015-05-18 10.36.28.png](https://qiita-image-store.s3.amazonaws.com/0/36184/6b9027ea-a58f-a285-9e92-086d8e65cf43.png "スクリーンショット 2015-05-18 10.36.28.png")
OKをクリックして設定を終了します。
![スクリーンショット 2015-05-18 10.37.32.png](https://qiita-image-store.s3.amazonaws.com/0/36184/8ba51259-6c06-9e10-077f-de4d1ecf474e.png "スクリーンショット 2015-05-18 10.37.32.png")
この状態だとソースが画面のキャプチャと映像デバイスの２箇所となっているので、ソースで不要な方を選んで「ー」をクリックして削除します。

### 音声キャプチャの設定

同様に`ソース`から`音声入力キャプチャ`を追加し、`Built-In Microphone`を追加します。
![スクリーンショット 2015-05-18 11.01.28.png](https://qiita-image-store.s3.amazonaws.com/0/36184/0de3472b-1591-00be-b9aa-57067e7673bf.png "スクリーンショット 2015-05-18 11.01.28.png")


# プレイヤーの準備

配信の準備はできたので、最後にプレイヤーを準備します。
[video.js v4.2.0からrtmpに対応（beta）](http://blog.videojs.com/post/60471080014/video-js-4-2-0-released-rtmp-css-designer-and)したので、こちらを使います。

jsファイルはCDNにホストされたものを使うので、プレイヤーと言っても以下の様なHTMLファイルを準備するだけです。

```
<!DOCTYPE html>
<html lang="en" class="">
<head>
  <link href="http://vjs.zencdn.net/4.2.0/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.2.0/video.js"></script>
</head>
<body>
  <video id="rtmp live test" class="video-js vjs-default-skin" controls
   preload="auto" width="640" height="264" data-setup='{}'>
    <source src="rtmp://<ip address>/live/test" 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>
```

srcに指定したURLの`test`は、先ほどOBSの`ストリームキー`に設定した文字列を指定します。
このファイルをS3などどこかのサーバに置いて、ブラウザで開きます。

# 配信

OBSで`配信開始`ボタンをクリックすると、配信が始まります。
プレイヤー側のブラウザで`再生`のアイコンをクリックして少し待つと、Live配信されている動画が表示されます。
（AU光のネットワークで、配信とプレーヤーのPCを分けてテストしたところ、遅延は3secぐらい）

# あとがき

以上で、お試しのリアルタイムの動画配信環境の構築とテストが出来ました。
実際にnginxのサーバがどれくらいの同時視聴に耐えられるかはわかりませんが、ブラウザ３つぐらい開いて試聴するぶんには、負荷の変化もさほどなく遅延も変わらない感じでした。

この記事は[こちら](http://d.hatena.ne.jp/sparkgene/20150518/1431920916)をqiita用に再編集したものです。