SlideShare a Scribd company logo
HLSについて私が知っている
ことを話します
moriyoshi
自己紹介
•ffmpeg大好き
•ffmpegが好きすぎてパッチを投げたがMichael
Niedermayerにマサカリを投げ返された
https://lists.ffmpeg.org/pipermail/ffmpeg-devel/2006-
December/008978.html
HLSとは
• HTTP Live Streaming の略
• ざっくり言うと、HTTPを使って一般的なインターネットラジオと同じ要
領で動画を配信する技術
• 2009年にAppleがiOS3に初めて搭載した。
• IETF Internet Draft
• Androidなどでのサポートもあり、モバイルデバイスではデファクトの
ストリーミング方式となっている
おっさんのためのHLSの歴史
• 1997年 Winamp登場
• プレイリストとしての .m3u 形式の誕生
• 1998年9月 Winamp2 登場
• プレイリストとしての .pls 形式が登場
• 1998年 SHOUTcast 誕生
• 動的年末なプレイリスト生成による簡易ストリーミング
おっさんのためのHLSの歴史
• 1999年 SoundJam MP
• MacOS9用の mp3 プレイヤー
• Stream playback capability
• 2000年 Apple が SoundJamMP 開発元の Casady & Greene, Inc. 買収
• 2001年1月 iTunes 1.0
• SoundJam MPがベース
おっさんのためのHLSの歴史
• 2009年 iOS 3
• HLS のサポート
• first internet draft 2009/5/1
• 2011年 Android 3.0 “Honeycomb”
• 初のHLSサポート (不安定)
HLSの概念図
MPEG2 TS segment
Playlist (.m3u8)
MPEG2 TS segment
MPEG2 TS segment
MPEG2 ts segment
MPEG2 ts segment
MPEG2 ts segment 動画のエンコード
RTMPなどでサーバに送信
プレイリストの生成
セグメント化
プレイリストの読み込み、
セグメントの読み込みと再生
HLSの構成要素
• MPEG2TS セグメント
MPEG2 Transport Stream形式のコンテナに格納された細切りにされ
た動画データ (ファイル)
コーデックはH.264 (動画) AAC (音声) が標準的
• .m3u8ファイル
セグメントファイルの場所、再生時間、再生順序などを記録したメタ
データファイル
.m3u8ファイル
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:63
#EXT-X-TARGETDURATION:10
#EXTINF:10.000,
livestream-63.ts
#EXTINF:9.999,
livestream-64.ts
#EXTINF:9.999,
livestream-65.ts
#EXTINF:9.999,
livestream-66.ts
セグメントの持続時間
セグメントの場所 (URL)
セグメントの場所 (URL)
セグメントの場所 (URL)
セグメントの場所 (URL)
HLSのしくみ
Segment #1
Playlist (.m3u8)
Segment #2
Segment #3
Segment #2
Playlist (.m3u8)
Segment #3
Segment #4
Segment #1
Segment #1
新しいセグメントの生成
プレイリストの再生成プレイリストの生成
どこかのタイミングでGCされる
HLSの特徴
• プロトコルがシンプル
• ただひたすらファイルをクライアントに送るだけで良い
• キャッシュフレンドリー
• Range requestsをサポートしなくてよい
• セグメントを丸ごとコンテンツキャッシュすればいいのでCDNにおいても扱い
やすい
ご家庭でHLSを始めるには
1. Webサーバを用意します
2. 動画ファイルをセグメントファイルに分割します
3. .m3u8ファイルを作ります
以上
ffmpegでセグメントファイルを作る
$ ffmpeg 
-i "moriyoshi.mp4“ 
-map 0 
-f ssegment 
-vcodec libx264 
-acodec aac -strict experimental 
-segment_list stream.m3u8 
-segment_time 4 
segment-%03d.ts
入力ファイル
入力と出力のマッピング。出力ファイルが2種類以上あるので指定が必須
TSファイルを生成したいのでstream segment 形式を選択
libx264を使ってH.264でエンコードする
音声コーデックはAAC
プレイリスト名
セグメントの持続時間。キーフレームが持続時間
より長い間隔になっているときはそちらが優先され
る。
キーフレームについて
• 動画のストリームにおいて、節目となっていてシークして再生が可能なフレーム
ご家庭でHLSのライブストリーミングを扱う
3つの方法
1. Adobe様のAdobe Media Serverを使う
• http://www.adobe.com/products/adobe-media-server-family.html
• かつてFlash Media Serverとして売っていた製品
• 中身はJava Servlet + Apacheの独自モジュールなのでがっかりしないように
• AWS Marketplaceから簡単に試せます
2. Red5 HLS プラグインを使う
• https://github.com/Red5/red5-hls-plugin
• Red5はJavaで書かれたメディアサーバー
• メンテナンスされていないXugglerというffmpegのラッパーを使っている
ご家庭でHLSのライブストリーミングを扱う
3つの方法
3. nginx-rtmp-moduleを使う
• https://github.com/arut/nginx-rtmp-module
• 設定が簡単 (AMSよりも!)
• Nginxの他のモジュールと合わせて利用できる
• 実績については知らない…
nginx-rtmp-moduleを使う
• コンパイラ、リンカ、PCREとOpenSSLの開発パッケージをインストール
しておく
• OpenRestyを落としてくる
• bundles ディレクトリに nginx-rtmp-module を GitHub から clone する。
ディレクトリ名を nginx-rtmp-module-0 などとする (OpenResty の
configure スクリプトの都合)
• ./configure –prefix={インストール場所} とかやって make && make
install
$ git clone https://github.com/arut/nginx-rtmp-module nginx-rtmp-
module-0
設定例 (RTMP部分)
rtmp {
server {
listen 1935;
access_log /var/log/nginx/rtmp.access.log;
application test {
live on;
hls on;
hls_path /var/lib/nginx/hls/test;
hls_fragment 8;
hls_playlist_length 16;
hls_cleanup on;
}
}
}
設定例 (HLS配信部分)
http {
include mime.types;
…
server {
listen 80;
…
location /.hls {
alias /var/lib/nginx/hls;
add_header Cache-Control no-cache;
}
}
}
http://example.com/.hls/test/{ストリーム名}.m3u8
配信URL
今日やりたくてできなかったこと (懺悔)
• MPEG-DASH
参考資料
• Lucas Gonze: A survey of playlist formats (November 17, 2003)
http://gonze.com/playlists/playlist-format-survey.html
• Michael Simon: The Complete iTunes History -- SoundJam MP to
iTunes 9 (November 09, 2009)
http://www.maclife.com/article/feature/complete_itunes_history_so
undjam_mp_itunes_9
• M3U and PLS Specification
http://forums.winamp.com/showthread.php?threadid=65772
• R. Pantos (Apple, Inc.): HTTP Live Streaming (May 1, 2009)
https://tools.ietf.org/html/draft-pantos-http-live-streaming-00
参考資料
• nginx-rtmp-module directive reference
https://github.com/arut/nginx-rtmp-module/wiki/Directives
ありがとうございました

More Related Content

What's hot

WebRTC Build MCU on browser
WebRTC Build MCU on browserWebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
 
ライブストリーミングの基礎知識
ライブストリーミングの基礎知識ライブストリーミングの基礎知識
ライブストリーミングの基礎知識
kumaryu
 
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
画像処理ライブラリ OpenCV で 出来ること・出来ないこと画像処理ライブラリ OpenCV で 出来ること・出来ないこと
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
Norishige Fukushima
 
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
GREE VR Studio Lab
 
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみようSolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
Shinsuke Sugaya
 
目grep入門 +解説
目grep入門 +解説目grep入門 +解説
目grep入門 +解説
murachue
 
【Unite Tokyo 2019】AWS for Unity Developers
【Unite Tokyo 2019】AWS for Unity Developers【Unite Tokyo 2019】AWS for Unity Developers
【Unite Tokyo 2019】AWS for Unity Developers
UnityTechnologiesJapan002
 
猫でも分かるUE4のポストプロセスを使った演出・絵作り
猫でも分かるUE4のポストプロセスを使った演出・絵作り猫でも分かるUE4のポストプロセスを使った演出・絵作り
猫でも分かるUE4のポストプロセスを使った演出・絵作り
エピック・ゲームズ・ジャパン Epic Games Japan
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
 
UE4における大規模背景制作事例 描画特殊表現編
UE4における大規模背景制作事例 描画特殊表現編UE4における大規模背景制作事例 描画特殊表現編
UE4における大規模背景制作事例 描画特殊表現編
エピック・ゲームズ・ジャパン Epic Games Japan
 
Inside WebM
Inside WebMInside WebM
Inside WebM
mganeko
 
UE4のレイトレで出来ること/出来ないこと
UE4のレイトレで出来ること/出来ないことUE4のレイトレで出来ること/出来ないこと
UE4のレイトレで出来ること/出来ないこと
Satoshi Kodaira
 
.NET 7期待の新機能
.NET 7期待の新機能.NET 7期待の新機能
.NET 7期待の新機能
TomomitsuKusaba
 
UE4における大規模背景制作事例 最適化ワークフロー編
UE4における大規模背景制作事例 最適化ワークフロー編UE4における大規模背景制作事例 最適化ワークフロー編
UE4における大規模背景制作事例 最適化ワークフロー編
エピック・ゲームズ・ジャパン Epic Games Japan
 
豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)
豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)
豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)
エピック・ゲームズ・ジャパン Epic Games Japan
 
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
UnityTechnologiesJapan002
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
 
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
historia_Inc
 
動画配信の基礎知識
動画配信の基礎知識動画配信の基礎知識
動画配信の基礎知識
Daiyu Hatakeyama
 
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメントヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
historia_Inc
 

What's hot (20)

WebRTC Build MCU on browser
WebRTC Build MCU on browserWebRTC Build MCU on browser
WebRTC Build MCU on browser
 
ライブストリーミングの基礎知識
ライブストリーミングの基礎知識ライブストリーミングの基礎知識
ライブストリーミングの基礎知識
 
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
画像処理ライブラリ OpenCV で 出来ること・出来ないこと画像処理ライブラリ OpenCV で 出来ること・出来ないこと
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
 
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
 
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみようSolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
 
目grep入門 +解説
目grep入門 +解説目grep入門 +解説
目grep入門 +解説
 
【Unite Tokyo 2019】AWS for Unity Developers
【Unite Tokyo 2019】AWS for Unity Developers【Unite Tokyo 2019】AWS for Unity Developers
【Unite Tokyo 2019】AWS for Unity Developers
 
猫でも分かるUE4のポストプロセスを使った演出・絵作り
猫でも分かるUE4のポストプロセスを使った演出・絵作り猫でも分かるUE4のポストプロセスを使った演出・絵作り
猫でも分かるUE4のポストプロセスを使った演出・絵作り
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
UE4における大規模背景制作事例 描画特殊表現編
UE4における大規模背景制作事例 描画特殊表現編UE4における大規模背景制作事例 描画特殊表現編
UE4における大規模背景制作事例 描画特殊表現編
 
Inside WebM
Inside WebMInside WebM
Inside WebM
 
UE4のレイトレで出来ること/出来ないこと
UE4のレイトレで出来ること/出来ないことUE4のレイトレで出来ること/出来ないこと
UE4のレイトレで出来ること/出来ないこと
 
.NET 7期待の新機能
.NET 7期待の新機能.NET 7期待の新機能
.NET 7期待の新機能
 
UE4における大規模背景制作事例 最適化ワークフロー編
UE4における大規模背景制作事例 最適化ワークフロー編UE4における大規模背景制作事例 最適化ワークフロー編
UE4における大規模背景制作事例 最適化ワークフロー編
 
豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)
豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)
豚×京都 ~UE4でなろう破壊神~ (UE4 VFX Art Dive)
 
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
【Unite Tokyo 2019】バンダイナムコスタジオ流Unityの使い方
 
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
 
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
 
動画配信の基礎知識
動画配信の基礎知識動画配信の基礎知識
動画配信の基礎知識
 
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメントヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
ヒストリア HelixCore(Perforce) 運用レギュレーションドキュメント
 

Viewers also liked

真Drone入門
真Drone入門真Drone入門
真Drone入門
Yutaka Matsubara
 
The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...
The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...
The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...
Tomohisa Ishikawa, CISSP, CSSLP, CISA, CISM, CFE
 
ストリーミングのげんざい
ストリーミングのげんざいストリーミングのげんざい
ストリーミングのげんざい
Tetsuya Morimoto
 
capybara で快適なテスト生活を
capybara で快適なテスト生活をcapybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
 
OAuth2.0によるWeb APIの保護
OAuth2.0によるWeb APIの保護OAuth2.0によるWeb APIの保護
OAuth2.0によるWeb APIの保護
Naohiro Fujie
 
AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話
Yuji Hato
 
AbemaTV デザインのBefore & After
AbemaTV デザインのBefore & AfterAbemaTV デザインのBefore & After
AbemaTV デザインのBefore & After
Shunsuke Matsumoto
 

Viewers also liked (7)

真Drone入門
真Drone入門真Drone入門
真Drone入門
 
The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...
The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...
The Social-Engineer Village at DEF CON 24 : Does Cultural Differences Become ...
 
ストリーミングのげんざい
ストリーミングのげんざいストリーミングのげんざい
ストリーミングのげんざい
 
capybara で快適なテスト生活を
capybara で快適なテスト生活をcapybara で快適なテスト生活を
capybara で快適なテスト生活を
 
OAuth2.0によるWeb APIの保護
OAuth2.0によるWeb APIの保護OAuth2.0によるWeb APIの保護
OAuth2.0によるWeb APIの保護
 
AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話AbemaTV モバイルアプリの開発体制と開発プロセスの話
AbemaTV モバイルアプリの開発体制と開発プロセスの話
 
AbemaTV デザインのBefore & After
AbemaTV デザインのBefore & AfterAbemaTV デザインのBefore & After
AbemaTV デザインのBefore & After
 

More from Moriyoshi Koizumi

Goをカンストさせる話
Goをカンストさせる話Goをカンストさせる話
Goをカンストさせる話
Moriyoshi Koizumi
 
PHP7を魔改造した話
PHP7を魔改造した話PHP7を魔改造した話
PHP7を魔改造した話
Moriyoshi Koizumi
 
Authentication, Authorization, OAuth, OpenID Connect and Pyramid
Authentication, Authorization, OAuth, OpenID Connect and PyramidAuthentication, Authorization, OAuth, OpenID Connect and Pyramid
Authentication, Authorization, OAuth, OpenID Connect and Pyramid
Moriyoshi Koizumi
 
All I know about rsc.io/c2go
All I know about rsc.io/c2goAll I know about rsc.io/c2go
All I know about rsc.io/c2go
Moriyoshi Koizumi
 
Pyramidのrendererをカスタマイズする
PyramidのrendererをカスタマイズするPyramidのrendererをカスタマイズする
Pyramidのrendererをカスタマイズする
Moriyoshi Koizumi
 
Hacking Go Compiler Internals / GoCon 2014 Autumn
Hacking Go Compiler Internals / GoCon 2014 AutumnHacking Go Compiler Internals / GoCon 2014 Autumn
Hacking Go Compiler Internals / GoCon 2014 Autumn
Moriyoshi Koizumi
 
Uguisudani
UguisudaniUguisudani
Uguisudani
Moriyoshi Koizumi
 
よいことも悪いこともぜんぶPHPが教えてくれた
よいことも悪いこともぜんぶPHPが教えてくれたよいことも悪いこともぜんぶPHPが教えてくれた
よいことも悪いこともぜんぶPHPが教えてくれた
Moriyoshi Koizumi
 
Ik in action
Ik in actionIk in action
Ik in action
Moriyoshi Koizumi
 
mod_himoteからはじめよう
mod_himoteからはじめようmod_himoteからはじめよう
mod_himoteからはじめよう
Moriyoshi Koizumi
 
HPHPは約束の地なのか
HPHPは約束の地なのかHPHPは約束の地なのか
HPHPは約束の地なのか
Moriyoshi Koizumi
 
Phjosh(仮)プロジェクト
Phjosh(仮)プロジェクトPhjosh(仮)プロジェクト
Phjosh(仮)プロジェクト
Moriyoshi Koizumi
 

More from Moriyoshi Koizumi (20)

Goをカンストさせる話
Goをカンストさせる話Goをカンストさせる話
Goをカンストさせる話
 
PHP7を魔改造した話
PHP7を魔改造した話PHP7を魔改造した話
PHP7を魔改造した話
 
Authentication, Authorization, OAuth, OpenID Connect and Pyramid
Authentication, Authorization, OAuth, OpenID Connect and PyramidAuthentication, Authorization, OAuth, OpenID Connect and Pyramid
Authentication, Authorization, OAuth, OpenID Connect and Pyramid
 
All I know about rsc.io/c2go
All I know about rsc.io/c2goAll I know about rsc.io/c2go
All I know about rsc.io/c2go
 
Pyramidのrendererをカスタマイズする
PyramidのrendererをカスタマイズするPyramidのrendererをカスタマイズする
Pyramidのrendererをカスタマイズする
 
Hacking Go Compiler Internals / GoCon 2014 Autumn
Hacking Go Compiler Internals / GoCon 2014 AutumnHacking Go Compiler Internals / GoCon 2014 Autumn
Hacking Go Compiler Internals / GoCon 2014 Autumn
 
Uguisudani
UguisudaniUguisudani
Uguisudani
 
よいことも悪いこともぜんぶPHPが教えてくれた
よいことも悪いこともぜんぶPHPが教えてくれたよいことも悪いこともぜんぶPHPが教えてくれた
よいことも悪いこともぜんぶPHPが教えてくれた
 
Ik in action
Ik in actionIk in action
Ik in action
 
Nginx lua
Nginx luaNginx lua
Nginx lua
 
Haxeについて
HaxeについてHaxeについて
Haxeについて
 
Gocon2013
Gocon2013Gocon2013
Gocon2013
 
PHP language update 201211
PHP language update 201211PHP language update 201211
PHP language update 201211
 
mod_himoteからはじめよう
mod_himoteからはじめようmod_himoteからはじめよう
mod_himoteからはじめよう
 
HPHPは約束の地なのか
HPHPは約束の地なのかHPHPは約束の地なのか
HPHPは約束の地なのか
 
Pyfes201110
Pyfes201110Pyfes201110
Pyfes201110
 
Phjosh(仮)プロジェクト
Phjosh(仮)プロジェクトPhjosh(仮)プロジェクト
Phjosh(仮)プロジェクト
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
ctypes拡張モジュール
ctypes拡張モジュールctypes拡張モジュール
ctypes拡張モジュール
 

HLSについて知っていることを話します