こんにちは、田口です。今回は、HTTP Live Streaming（以下HLS）をなんとかFlashで再生する方法を見てみようと思います。

HLSの基本は「HTTP Live Streaming 動画配信のやり方 （概要）」の記事をご覧いただくとして、HLSの弱点の１つは、マルチプラットホームに欠ける点が大きなデメリットでした。最近のAdobeは、Adobe Primetimeという、動画配信プラットホームの提供を始めています。そこでは、HLS、MPEG-DASHもサポートしているようで、FlashでHLSの再生ができることが分かります。

しかしながら、動画プレーヤー用 SDKは一般に公開されておらず、簡単に試すことはできません。そして、動画プレイヤーを提供する、flowplayerやJW PlayerもFlashプレイヤーとしてHLS再生をサポートしていますが、残念ながら有償です。

今回は、flowplayerのHLSサイトを見ると、１つサンプルを見ることができます。



この動画が実際に、HLSで再生されているかブラウザのデベロッパーツールで見てみましょう。そうすると、m3u8ファイル、動画のセグメントファイルである、.tsファイルを読み込んでいることが分かります。Flashですので、プラグインが入っていれば、どのブラウザでも動作しますので、ブラウザ依存は起きにくいでしょう。



flowplayerのデモバーションでは、localhost上（自身のPC上）で、サンプルを動かすことができます。なにぶんlocalhostでしか動きませんので、レンタルサーバーなどで動きませんのでご注意ください。

このようにHLSをFlashで再生できるメリットは、Flashのプラグインが入っていればHLSを再生できること、複数の動画フォーマットを作る必要がないことです。sdkは有償ですが、複数フォーマット、ディスク容量を考慮するならば、おそらく元は取れるでしょう。

将来的には、動画の配信方式は、HLSとMPEG-DASHが主流になると言われ、DRMもプラグインを使わずにブラウザ内で処理できるようになるそうです。YoutubeやMicrosoft OneDriveでの動画再生は、（いつの間にかに）MPEG-DASHに切り替わっていることから、トレンドは変わりつつあるようです。

HTTP Live Streaming は、特別なサーバーアプリケーションを必要とせず、MIME設定を行えば簡単に配信できることを、HTTP Live Streaming 動画配信のやり方 （実践）で、説明しましたが、そのとき、Webサーバーは、Apacheをベースにしていたので、今回は、Windows ServerのIISから配信を試してみようと思います。

とはいっても、MIME設定するだけです。

サーバーを用意する
Windows Serverは、AmazonEC2のクラウドを利用しました。数時間程度の利用なら数百円程度で高スペックなサーバーを利用できるので、とても便利です。


IISでMIMEを設定する
IISは、インストール済みであることを前提として、MIMEの設定を追加します。サーバーマネージャーから、Webサイトの設定を行います。いくつか設定項目がある中から「MIMEの種類」を選択します。



MIMEタイプを追加する
「追加」を選択すると、種類を追加することができます。



ここで、下記２つを追加します。

ファイルの拡張子　.m3u8
MIMEの種類　application/x-mpegURL

ファイルの拡張子　.ts
MIMEの種類　video/MP2T



これで設定は完了です、あらかじめ動画用意すると、このような感じで再生できます。



サーバー側のネットワーク負荷をみると、常に負荷が掛かっている訳でなく、断面化された動画のセグメントファイルを、定期的に送信しているように見えます。このあたり、プログレッシブダウンロードと比べてみると面白いかもしれません。

今回は、HLSで代替ストリーミングをやってみようと思います。これはどういうものかというと、HLSを配信するサーバーが、障害などで停止して配信できなくなった時、バックアップのサーバーに自動的に切り替えを行うものです。とくに、こういった自動的な切り替えを「フェイルオーバー」と言います。

簡単にできるので、さっそく設定してみようと思います。

今回の想定は、配信サーバー２台（プライマリサーバー、バックアップサーバー）に、接続用サーバー１台です。そして、プライマリサーバー上から映像を配信している最中に、サーバーが停止して、バックアップサーバーに切り替わるというシナリオです。



代替ストリームの設定は、マスタインデックスファイルで行います。前回、アダプティブストリームの話をしたときに出てきたファイルと同じもので、記述は、下記のようになります。

BANDWIDTHの値は同じで、プライマリとバックアップで接続先の違うアドレスを追加します。設定はこれだけです。



動画の切り替わりが分かりやすいように、プライマリとバックアップの文字を書いておきます。

用意した動画

(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

では、実際に確認をしてみましょう。



動画解説
（開始時）
ブラウザからは接続用サーバーにアクセスを行います、そうするとマスタインデックスファイルの記述順から、プライマリサーバーに接続され映像が再生されます。この状態では、バックアップサーバーは、何もせず待機しているだけです。


再生開始時は、読み込み順によりプライマリサーバーに接続

（0分25秒）
次に、プライマリサーバーに異常が発生したと想定して、Webサーバーを停止させます。
※ちなみにWebサーバーは、LinuxのDebianです。



（1分20秒）
しばらくすると、映像がバックアップサーバー側に切り替わります。これがフェイルオーバーです。


映像が止まることなく切り替る

サーバーが停止しても、クライアント側は、バッファに溜まっている映像データがあるので、すぐには止まりません。その間にバックアップサーバーに接続が切り替わると、停止することなく再生が続きます。

プライマリサーバーは、停止状態から起動状態に復帰させても、再生中に切り替わったバックアップサーバーから戻ることはありません。再度 接続し直す必要があります。

このような代替ストリームの設定は、簡単にできる１つの保険みたいなものです。バックアップサーバーは、普段は接続されない予備機にあたるため、費用を考慮する必要があるでしょう。

そして、サーバーの負荷分散がされているわけではないので、基本は１台のサーバーでストリームを行います。負荷分散させるには、ロードバランサーやＣＤＮ（コンテンツデリバリネットワーク）を利用する必要があります。

次回は、WindowsのIISを使ったHTTP Live Streaming の仕方について説明いたします。
https://bizvalley.co.jp/blog/1471.html

HTTP Live Streaming（HLS）の特徴に、アダプティブストリーミングができることを、概要で少し触ましたが、今回は、実際にアダプティブストリーミングを試してみようと思います。

まず、アダプティブストリーミングについて説明します。アダプティブという言葉は、日本語に訳すと「適応」とか「順応」という意味になります。何に適応するのかと言うと、再生端末の「通信速度」です。いまどきの映像視聴は、固定回線だけでなく、LTE、wifiなど無線回線で見ることも多くなってきました。そこで問題となるのが、通信速度が遅かったり安定しない場合、映像が途中で止まりがちになることです。

アダプティブストリーミングは、多少画質を下げてでも、なるべく再生を止めないようにする技術で、ビットレートの異なる動画を複数用意すると、通信速度に応じて、適切な動画に切り替えながら再生を行います。

また、HTTP Live Streaming のほか、同様の機能を持つストリーミング技術に、Adobe Dynamic Streaming、Microsoft Smooth Streaming があります。


アダプティブストリーミングで配信する1つ1つの動画は、特別な設定はなく単独でも再生できるHLS動画です。必要なのは、それらをまとめるファイルで、マスタインデックスファイルと呼ばれ、それぞれのプレイリストファイル（m3u8）を束ねるファイル（m3u8）になります。拡張子は同じですが、中身の記述がちょっと異なります。


マスタインデックスファイルには、それぞれのプレイリストファイルへのURL指定と、BANDWIDTHを指定します。ここでは、240k、640k、1840kの３つを指定しています。設定はこれだけです。


index.m3u8ファイルの記述例

動作確認をするには、通信速度を自由に変えられることと、通信量も確認したいので、「Entonnoir」と「Little Snitch」という接続監視アプリケーションをMacにインストールしました。



あと、動画の切り替わりが分かり易いように、
各動画にビットレート240kbps（赤色）、640kbps（黄色）、1840kbps（白色）の文字を付けておきます。

用意した動画　 (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org


では、実際に動作させてみましょう。

検証デモ


動画解説
（開始時）
ビットレートは、240kbpsからスタートします。ここから、データを一気に受信して10秒程度で、1840kbpsの動画に切り替わります。

（1分50秒）
ある程度まで再生を続けると、規則正しく通信・非通信状態と切り替わりながら再生していることが分かります。


（1分55秒）
ここで、回線速度を 50kbyte/sに制限をかけます。ここから、受信速度がガクンと下がり、1840kの動画で溜めておいたバッファが尽きた 2分34秒に 240kbpsの動画に切り替わります。帯域が変化しても、すぐに切り替わるわけでなく、バッファがなくなるまでは耐えて、なくなるまでに回復できれば事なきを得る感じでしょうか。


1840kから240kに切り替わる

帯域制限を解除すると、再び 1840kbpsの動画に切り替わります。


240kから1840kに切り替わる

再び、50kByte/sの制限をかけ、250kbpsの動画に切り替えます。


再び240kにする

つぎに、少し制限を緩和させ200kByte/sにすると、中間の640kbpsの動画に切り替わります。


240kから640kに切り替わる

最後に、制限を解除させて1840kbpsにして終了。


640kから1840kbpsに。

このように、アダプティブストリーミングは、通信速度に応じて動画が切り替わります。
また回線速度を640kbpsにぴったり合わせれば、640kの動画に切り替わるかと言うと、そうでもなく、ある程度のマージンが必要です。

アダプティブストリーミングは、なるべく再生を止めないというメリットがありますが、デメリットは、複数の動画を用意する必要があるため、その作業量と、動画をアップロードするサーバーのディスク容量を消耗します。その兼ね合いを、考慮したうえで利用するかどうか、決めると良いかもしれません。

次回は、HTTP Live Streaming 代替ストリームについて説明いたします。https://bizvalley.co.jp/blog/1362.html

前回は、HTTP Live Streamingの概要について、書きましたので今回は、実際に作ってみましょう。

動画を用意する

HLSで配信する動画として、「Big Buck Bunny」を素材にします。この動画は、Creative Commonsのライセンスでクレジットを表示すれば、商用、二次的著作物でも利用できる使い勝手の良い動画です。たまに見かける動画ですね。


(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

ダウンロード
http://www.bigbuckbunny.org/index.php/download/

1280x720のMP4ファイルをダウンロードします。

エンコードする

今回は、WiFiをターゲットとして下記のようにしました。

コンテナフォーマット　MPEG-2 TS
映像　H.264
音声　ACC
サイズ　640 x 360
オーディオサンプルレート　22.05 kHz
オーディオビットレート　40 kbps
ビデオビットレート　1200 kbps
キーフレーム　90
フレームレート　24（元映像のフレームレート）

エンコーダーは、コマンドラインのffmpegなど何でも良いですが、Xmedia Recodeを利用しました。









エンコードすると、tsファイルができあがります。

セグメンターで映像を分割する

動画を分割するには、セグメンターを利用します。ここでは「httpsegmenter」を利用します。



Windowsで作業しているため、ready binary for Windows の「segmenter-r6.7z」をダウンロードします。ただ、7zで圧縮されているので、7-Zipなどのファイルアーカイバで解凍して、C:\segmenter-r6 （Cドライブ直下）に配置します。



tsファイルは、Cドライブにmvフォルダを作りコピーします。

コマンドプロンプトで、mvフォルダに移動して、次のパラメータを付けて、segmenter.exeを実行します。

（例）
C:\segmenter-r6\segmenter.exe big_buck_bunny_720p_surround.ts 10 bunny bunny.m3u8 http://localhost/

（意味）
segmenter.exe [指定するMPEG-TSファイル] [セグメント間隔（秒数）] [出力するMPEG-TSファイルのプレフィックス] [出力するm3u8ファイル] [httpプレフィックス]

httpプレフィックスは、動画 .tsファイルへのパスを記載します。ここでは、例として、localhostを指定しています。適宜、書き換えてください。



実行すると、動画がバラバラと分割されます。


m3u8のプレイリストファイルの中身を見ると、一連の動画がリスト化され、httpプレフィックスで指定したパスに、tsファイルが付いていることがわかります。※ 相対パスでも動作します。



作成した、bunny.m3u8と、分割されたtsファイルを、Webサーバーにアップロードします。

Webサーバー MIME タイプの設定

.htaccessファイルを作り下記２行を追加します。

AddType application/x-mpegURL .m3u8
AddType video/MP2T .ts

※ VPSなど、直接Apacheに設定を加える場合は、httpd.conf などのファイルを編集してください。

iPadで確認

すべて整いましたので、動作確認をとります。アップロードしたbunny.m3u8ファイルにアクセスします。この場合は、http://localhost/bunny.m3u8　になります。Windowsで確認したい場合は、VLC media playerや、SMPlayerでm3u8にアクセスすると表示されます。（ただしタイムコード、シークバーの位置は正確に表示されませんでした。）


iPadで、再生されましたね。ただMacのSafariでは、直接bunny.m3u8にアクセスしても再生されません。HTML5 Videoにすると再生できるようになります。

（参考）
<html>
<head>
<title>HTTP Live Streaming サンプル</title>
</head>
<body>
<video controls>
<source src="bunny.m3u8">
</video>
</body>
</html>

いかがでしたでしょうか？。
少し長くなりましたが、作業自体は、簡単なものです。さらにパラメータのチューニングをすることで、もっと良くなると思いますので、試してみてください。

次回は、「HTTP Live Streaming でアダプティブストリーミングのやり方」について説明いたします。https://bizvalley.co.jp/blog/1215.html