More than 5 years have passed since last update.

nginxAdvent Calendar 2014

@nofrmm

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

Last updated at 2015-02-17Posted at 2014-12-13

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

#動画作成

##環境
###VirtualBox

書きもらしていました。

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

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up