HTTP Live Streaming | ビズバレースタッフブログ

HTTP Live Streaming でアダプティブストリーミングのやり方
2019年12月4日　k.taguchi

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

-

【正社員募集のお知らせ】

当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。

詳しくは【人材募集】のページをご覧ください。

※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。そちらからご応募お願い致します。

HTTP Live Streaming 動画配信のやり方（実践）
2019年11月26日　k.taguchi

前回は、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を指定しています。適宜、書き換えてください。

20130119-12

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

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にアクセスすると表示されます。（ただしタイムコード、シークバーの位置は正確に表示されませんでした。）

20130119-11

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

-

【求人情報】
映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。

※スマートホンでご覧いただいたる方はPCページのトップにリンクがございますのでそちらからお願い致します。

HTTP Live Streaming 動画配信のやり方（概要）
　k.taguchi

HTTP Live Streaming（以下 HLS）とは、Appleが開発した、動画配信のテクノロジーで、iPhoneなどで動画をストリーム再生したい場合、利用される形式です。

HSLは、特別なストリーミングサーバーを必要とせず、通常のWebサーバーから配信できるため、レンタルサーバーでも、その気になれば、少しの設定で配信することは可能です。

HLSの動作デバイスは

MacOS X10.6以降のSafariブラウザ
iOS3.0以降
Android3.0以降

Windowsでは、VLC media playerで（一応）動作しますが、IE、Chrome、Firefox、そしてMacOSでもChrome、Firefoxといったメジャーなブラウザでは、動作しません。

※追記 2014/7/25 FlashでHLSを再生できるようにしたベンダーがでてきています。（有償です）

HLSの特徴として、通信速度に応じて映像画質を変えるアダプティブストリーミングで再生することができます。これは、ビットレート・画面サイズの異なる同一の動画を複数作り、クライアント側の通信速度に応じて、再生しながら切り替えるストリーミングのことを言います。

同じWebサーバーからの配信で、HLSとの比較に、プログレッシブダウンロードの動画ストリームがあります。この場合、別のビットレートの動画に切り替えることができないため、柔軟性の面で、HLSのほうが優れています。逆に、HLSのネックは、再生環境が限られるといった所でしょうか。

HLS動画の仕組み
HLSの動画フォーマットは、MPEG TS（映像コーデックH.264）、AAC（音声）です。そして、１つの動画は、10秒ごとに分割された、細切れのファイル（.ts）になり（※ これをメディアセグメントファイルと言います。）、目次に相当するプレイリストファイル（.m3u8）の２つから構成されます。

ファイルが分割されているので、プレイリストの再生指示により、どのファイルからも読み込むことができ、プレイリストの指定順に、次々とファイルが読み込まれます。見た目には、ファイルが分割されていても、スムーズに一体として再生されます。

１つ１つのファイルは、プログレッシブダウンロードのように読み込まれるため、10秒を超えてあまり長い分割だと、再生に時間がかかったり、細かすぎるとサーバーに負担がかかるため、推奨は10秒になっています。

またベンダー製品のAdobe Media Server、Wowza Media Serverでは、HLSをサポートしています。通常のWebサーバーで配信できるなら、ストリーミングサーバーは、必要なさそうですが、ファイルをあらかじめ分割せず配信できたり、Flashなど別の配信フォーマットにも１つの動画ファイルで対応できるといった、特徴があります。

Appleのサイトでは、HSLについてのドキュメントが公開されているので、気になる方は、一読しておくといいでしょう。また、サンプル動画のURLも記載されているので、参考になると思います。
HTTP Live Streamingの概要 (PDFファイル)

次回は、実際に作ってみようと思います。
HTTP Live Streaming 動画配信のやり方（実践）

参考
「FlashでHLS（HTTP Live Streaming）を再生するには・・・ただし有償」
https://bizvalley.co.jp/blog/7055.html

-

【求人情報】
映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。

※スマートホンでご覧いただいたる方はPCページのトップにリンクがございますのでそちらからお願い致します。

Windows IISを使ってHTTP Live Streaming を配信する方法
2019年11月25日　k.taguchi

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

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

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

20130210-05

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

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

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

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

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

20130210-03

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

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

20130210-04

【正社員募集のお知らせ】

当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。

詳しくは【人材募集】のページをご覧ください。

※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。そちらからご応募お願い致します。

FlashでHLS（HTTP Live Streaming）を再生するには・・・ただし有償
2014年7月25日　k.taguchi

こんにちは、田口です。今回は、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に切り替わっていることから、トレンドは変わりつつあるようです。

-

【正社員募集のお知らせ】
当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。
詳しくは【人材募集】のページをご覧ください。※モバイルページでご覧の方はPC版のTOPにリンクがございます。