HTTP Live Streamingで動画を配信してみる
1 はじめに
HTTP Live Streamingとは、米アップルによって開発された動画配信技術です。
特徴として以下のものが挙げられます。
- 通常のHTTPサーバを利用
- ライブ/オンデマンドいずれにも対応
- ビットレートの異なる複数の代替ストリームをサポート
- クライアントはネットワーク帯域の変更に応じて、インテリジェントにストリーム切り替えが可能
- HTTPSを使用したメディアの暗号化とユーザ認証に対応
ネットワーク帯域の変化に対応して、クライアントが動的にストリー ムを選択できるということは、デバイスが、4G・WiFi間などを移動した場合でも、常に最適なストリームを供給することが可能ということであり、これはプログレッシブなダウンロードに比べても、相当に有利な条件と言えます。
再生は、クライアント側が、Safari（UIWebView）の場合は、videoタグのソースとして配信し、アップル関連のクライアントであれば、QTKit/AVFoundationフレームワーク（OS X）、MediaPlayer/AVFoundationフレームワーク（iOS）を利用してアプリ実装が可能です。
2 動画配信テクノロジー
ここで、各種の動画配信テクノロジーの中で、HTTP Live Streamingが、どのような位置付けになるか、改めて整理しておきたいと思います。
(1) 代表的な３つのテクノロジー
動画配信の代表的なテクノロジーは、次の３つです。
ストリーミング
- 専用プロトコル
- コンテンツがクライアントに残らず、セキュアな再生が可能
- 専用プレーヤーが必要
- NW/サーバ共に多くの資源を必要とする
HTTPダウンロード
- クライアントに依存しない
- Webサーバだけで配信可能
- コンテンツがクライアントに残るため保護が難しい
- 再生制御に制約が多い
- ライブ配信未対応
HTTPストリーミング
- 標準プレーヤー、プラグイン等で再生可能
- NW/サーバに多くの資源を要しない
- デバイス毎に配信フォーマットが異なる
(2) 各プラットフォームに対応する配信方式
そして、代表的な配信方式を一覧すると次のようになります。
| ストリーミング | HTTPダウンロード | HTTPストリーミング | |
|
HTML5
|
HLS
|
|
|
RTMP
|
HTML5
|
HDS
HLS
Silverlight
|
|
RTMP
MMS/RTSP
|
HTML5
|
HDS
HLS(注1)
Silverlight
|
|
RTMP
|
HTML5
|
HDS
HLS
Silverlight
|
参考：動画配信プラットフォーム on AWS 2014.05.22 Amazon Data Service Japan
上図の中の
HLSがHTTP Live Streamingです。
HTTPストリーミングの配信技術で、全てのプラットフォームに対応していると言えます。
(注1) QuickTime Player 10以上や、るMicrosoft Edge（Windows10）で再生可能です。InternetExplorerでは再生できません。
3 構成
HTTP Live Streamingの構成は、次の図で表現できます。
iPhoneなどのクライアントは、Webサーバに配置された動画ファイルにHTTP(HTTPS)でアクセスします（①）。
Webサーバ上の動画ファイルは、メディアセグメントファイル（.ts MPEG-2トランスポートストリームファイル)と、インデックスファイル（.M3U8 プレイリスト）からなります（②）。 クライアントがアクセス先として使用するURLは、インデックスファイル(.M3U8)であり、この中に各.tsをたどるための情報が格納されています。
上記のメディアセグメントファイル及び、インデックスファイルは、セグメンターによって作成されますが、これには 、ライブ配信用の「ストリームセグメンター（③）」と「ファイルセグメンター（④）」があります。
そして、ライブ配信の場合は、「メディアエンコーダー（⑤）」によって、オーディオビデオデバイスから取り込んだリアルタイムの信号を、エンコード・トランスポート用カプセル化し、ストリームセグメンターの入力とします。
Webサーバとして必要なのは、.M3U8ファイルと.tsファイルのMIMEタイプの関連付けだけで、通常、既存の設定で問題ありません。
4 配信用ファイルの作成
Webサーバ上に配置するファイルは、セグメンターによって生成しますが、今回は、ファイルセグメンターを利用したオンデマンド配信の要領を試してみました。
(1) HTTP Live Streaming Tools
ストリームセグメンター及び、ファイルセグメンターは、共にAppleデベロッパウェブサイトからダウンロートできるソフトウエアです。（iOSデベロッパプログラムの会員である必要があります）
https://developer.apple.com/streaming/
上記ページでDownloadのリンクをたどり、HTTP Live Streaming Toolsで検索するとdmgをダウンロードできます。
ダウンロードした、dmgをインストールすると下記のプログラムが配置されます。
/usr/local/bin/mediastreamsegmenter /usr/local/bin/mediafilesegmenter /usr/local/bin/mediasubtitlesegmenter /usr/local/bin/variantplaylistcreator /usr/local/bin/mediastreamvalidator /usr/local/bin/hlsreport.py /usr/local/bin/id3taggenerator
今回使用するのは、このうちのmediafilesegmenterです。
(2) mediafilesegmenter
変換しようとするソースが有効かどうかは、mediafilesegmenterで確認できます。
$ mediafilesegmenter -V source.mp4 "source.mp4" can be segmented
フォルダ（hls)を作成して、その中に、ts及びインデックスを作成するには、次のようになります。
$ mkdir hls $ mediafilesegmenter -f hls -i index.m3u8 -B media- source.mp4 $ ls -la hls total 80184 drwxr-xr-x 17 sin staff 578 6 4 08:33 . drwxr-xr-x 4 sin staff 136 6 4 08:33 .. -rw-rw-r-- 1 sin staff 3070 6 4 08:33 iframe_index.m3u8 -rw-r--r-- 1 sin staff 506 6 4 08:33 index.m3u8 -rw-r--r-- 1 sin staff 3287368 6 4 08:33 media-0.ts -rw-r--r-- 1 sin staff 2796876 6 4 08:33 media-1.ts -rw-r--r-- 1 sin staff 3602644 6 4 08:33 media-10.ts -rw-r--r-- 1 sin staff 2177980 6 4 08:33 media-11.ts -rw-r--r-- 1 sin staff 70312 6 4 08:33 media-12.ts -rw-r--r-- 1 sin staff 3657540 6 4 08:33 media-2.ts -rw-r--r-- 1 sin staff 4128856 6 4 08:33 media-3.ts -rw-r--r-- 1 sin staff 2971528 6 4 08:33 media-4.ts -rw-r--r-- 1 sin staff 2985816 6 4 08:33 media-5.ts -rw-r--r-- 1 sin staff 3830876 6 4 08:33 media-6.ts -rw-r--r-- 1 sin staff 3802112 6 4 08:33 media-7.ts -rw-r--r-- 1 sin staff 3884456 6 4 08:33 media-8.ts -rw-r--r-- 1 sin staff 3823168 6 4 08:33 media-9.ts
オプションで-B media-とすることで、media-連番のファイルが生成されています。
5 配信用ファイルの配置
AWSのS3にファイルを配置して、テストしてみました。
(1) index.html
ビデオ配信のページとなるindex.htmlを次のように作成します。
index.html
<!DOCTYPE html> <div> <h2>HTTP Live Streaming</h2> <video src="index.m3u8" width=640 height=360 controls></video> </div>
(2) S3へのアップロード
S3でhls-sampleという名前でバケットを作成し、セグメンターで生成したファイルとindex.htmlをアップロードしました。
続いて、静的なWebサイトのホスティングを有効にし、閲覧可能なようにポリシーを追加しました。
Backet Poricy
{
"Version": "2016-06-04",
"Statement": [
{
"Sid": "PublicReadForGetBucketObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::hls-sample/*"
}
]
}
(3) Safariでの表示
Static Website Hostingのエンドポイントに、Safariでアクセスすると、動画が再生できることを確認できます。
6 最後に
今回は、HTTP Live Streamingを使用して、基本的なHTTPストリーミングをやってみました。 次は、帯域に応じた配信や、HTTP Live Streamingのクライアント側も作成してみたいと思います。
※動画は、ATTRIBUTION LICENSE 3.0 で公開されている、Ricardo Mantilla氏のものを利用させて頂きました。
http://mazwai.com/#/videos/216
7 参考資料
HTTPライブ
ストリーミングの概要
How to set up HTTP Live Streaming (VOD) on Macbook using Apple's official tools
31 DECEMBER 2015
