nginxでHLS動画をストリーミング

#はじめに
HLSの動画配信が普通にできるようなので
Vagrantを使ったMBPでの動画の作成から、配信、アクセスの仕方をnginx側からも見てみました。

#動画作成

##環境
###VirtualBox

![スクリーンショット 2015-02-18 0.15.31.png](https://qiita-image-store.s3.amazonaws.com/0/12362/94e6f9bc-1a7e-0710-e878-2c43873a1154.png)

>書きもらしていました。

ダウンロードしてインストール
https://www.virtualbox.org/wiki/Downloads

###Vagrant + CentOS（v6.5）
https://www.vagrantup.com/downloads

```vim
$ mkdir vagrant
$ cd vagrant/
$ vagrant init chef/centos-6.5
$ vagrant box add chef/centos-6.5
```

virtualboxを選びます
![スクリーンショット 2015-02-17 16.43.32.png](https://qiita-image-store.s3.amazonaws.com/0/12362/ad3bdf3a-905d-30d0-de3c-6725556b324c.png)

```vim
$ vagrant up
```

Vagrantの環境にffmpegをいれます。

sshでログイン。

```vim
$ vagrant ssh
```

scpを使う場合

```vim
$ vagrant ssh-config > ssh.config
$ scp -F ssh.config hogehoge.mp4 default:~/work/
$ scp -F ssh.config default:~/work/output.m3u8 .
```

###ffmpeg
ここに従って無心にインストール。root権限が必要なときはsudoで
https://trac.ffmpeg.org/wiki/CompilationGuide/Centos

#フロー
## MBP上での作業
sshでの接続設定

```vim
$ vagrant ssh-config > ssh.config
```

mp4の動画ファイルをVagrantへ転送

```vim
$ scp -F ssh.config /Volumes/Macintosh\ HD/Users/`[ユーザー名]`/Documents/input.mp4 default:~/work/
```

##Vagrant + CentOS上
~/work以下にinput.mp4がある状態です

ffmpegコマンドだけで input.mp4 を複数個のtsファイルに分割、プレイリスト：output.m3u8が作成されます。

```vim
$ ffmpeg -i input.mp4 -vcodec libx264 -b:v 800k -acodec libfdk_aac -b:a 128k -flags +loop-global_header -map 0 -bsf h264_mp4toannexb -f segment -segment_format mpegts -segment_time 10 -segment_list output.m3u8 stream%04d.ts
```

output.m3u8 ファイルの記述は

```
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:17
#EXTINF:11.766667,
stream0000.ts
#EXTINF:11.033333,
stream0001.ts
#EXTINF:9.633333,
stream0002.ts
#EXTINF:12.166667,
stream0003.ts
#EXTINF:11.600000,
stream0004.ts
#EXTINF:8.333333,
stream0005.ts
#EXTINF:6.733333,
stream0006.ts
#EXTINF:16.766667,
stream0007.ts
#EXTINF:8.066667,
stream0008.ts
#EXT-X-ENDLIST
```

work下にできたtsファイルやm3u8ファイルをホスト側に取り出すには

```
$ scp -F ssh.config default:~/work/* .
```

##nginx

```
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
```

上記MIMETYPEをmime.typeファイルに追加しようとしたら
どちらも入っていて、たいしてすることがなくなってしまいました。

webに公開するドキュメントルートフォルダに別にフォルダを用意して
 
* index.html
* output.m3u8
* stream0000.ts 〜 stream0008.ts

これらを置きます。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>HTTP Live Streaming Test</title>
  </head>
  <body>
    <header>
      <h1>HTTP Live Streaming Test</h1>
    </header>
    <div>
      <video width="1280" height="720" src="output.m3u8" preload="none" onclick="this.play()" controls />
    </div>
  </body>
</html>

```
こちらのままです
>http://rest-term.com/archives/3008/ 

#端末で視聴
共通して、Player上での巻き戻しができませんでした。

##MBP、iPod touch
 特に問題なし、録画した時と差異は感じませんでした。
##Android
Nexus7(2012)はちょっとスペックが足りないような
Butterflyは違和感なく。
端末によって個別対応が必要なようです。

#accessログ
10秒ごとにアクセスしています。負荷が結構たかそう。

```
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:03 +0900] "GET /test/output.m3u8 HTTP/1.1" 200 405 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" 
"-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:05 +0900] "GET /test/stream0000.ts HTTP/1.1" 200 1797468 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4
.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:05 +0900] "GET /test/stream0001.ts HTTP/1.1" 200 1303404 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4
.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:06 +0900] "GET /test/stream0002.ts HTTP/1.1" 200 1319008 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4
.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:17 +0900] "GET /test/stream0003.ts HTTP/1.1" 200 991700 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.
1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:28 +0900] "GET /test/stream0004.ts HTTP/1.1" 200 1967232 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:38 +0900] "GET /test/stream0005.ts HTTP/1.1" 200 949776 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:50 +0900] "GET /test/stream0006.ts HTTP/1.1" 200 1186092 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:26:59 +0900] "GET /test/stream0005.ts HTTP/1.1" 200 949776 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:27:01 +0900] "GET /test/stream0006.ts HTTP/1.1" 200 1186092 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:27:03 +0900] "GET /test/stream0004.ts HTTP/1.1" 200 1967232 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:27:03 +0900] "GET /test/stream0005.ts HTTP/1.1" 200 949776 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
xxx.xxx.xxx.xxx - - [13/Dec/2014:13:27:04 +0900] "GET /test/stream0006.ts HTTP/1.1" 200 1186092 "-" "HTC Streaming Player KDDI / 1.0 / HTL21 / 4.1.1" "-"
```

#参考URL

HTML5のvideoタグで利用するmp4の動画を作る時のTips
http://qiita.com/joker1007/items/def9d58ddb00fafc936d

Web およびモバイルに素晴らしい HLS 動画を配信する方法
https://zencoder.com/ja/hls-guide

http://www.fisproject.jp/2014/04/【node-js】ffmpegでhls配信をしてみる【mp4】/

NginxとFFmpegを利用したHTTP Live Streaming配信
http://rest-term.com/archives/3008/

Compile FFmpeg on CentOS
https://trac.ffmpeg.org/wiki/CompilationGuide/Centos

HTTPライブ ストリーミングの概要
https://developer.apple.com/jp/devcenter/ios/library/documentation/StreamingMediaGuide.pdf

HTTP Streaming Architecture
https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/HTTPStreamingArchitecture/HTTPStreamingArchitecture.html

ffmpegの使い方
http://tech.ckme.co.jp/ffmpeg.shtml

HLS Video on Demand streaming
http://razvantudorica.com/12/hls-video-on-demand-streaming/

#最後に
nginxはSPDYの調査で使っていましたがHLSが何もしなくても動く環境なのは驚きました。

課題としては

* tsファイルの置き場所、キャッシュ
* 閲覧端末によるプロファイルレベルの違うファイルの参照
* tsファイルおのおののプロテクション

など広げようと思うともっと知ることが多そうです。