はじめに

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

動画作成

環境

VirtualBox

書きもらしていました。

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

Vagrant + CentOS（v6.5）

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

virtualboxを選びます

$ vagrant up

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

sshでログイン。

$ vagrant ssh

scpを使う場合

$ 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での接続設定

$ vagrant ssh-config > ssh.config

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

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

Vagrant + CentOS上

~/work以下にinput.mp4がある状態です

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

$ 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

これらを置きます。

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

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ファイルおのおののプロテクション

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

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