CloudFront (+ S3) + JWPLAYER で様々なデバイスのブラウザから動画をストリーミング再生する

こんにちは、落合です。

これは TECHSCORE Advent Calendar 2015 の最後の記事です。

去年は、こちらの記事で、オンプレミスな環境で動画のストリーミング再生の環境を構築しました。
今回は、更に進化させるべく、AWS を使ってクラウドで実現したいと思います！

実現したいこと

クラウドで動画配信する環境のネットワーク流量やディスク容量等のキャパシティ設計をしたくない。
- なので、今回は AWS を利用する。
Linux,Mac,iPhone,Android の主要ブラウザで再生したい。（あっ Windows もね。）
HTML5 が未対応なら、Flash に自動的に fallback して再生する。

参考にした文献

本記事は、下記サイトの内容を引用しながら記載していきますので、先にご紹介させていただきます。

AWS から始める動画配信（SlideShare）

HTML5の対応状況：Can I use

主要ブラウザ（デバイス別）のストリーミング再生の対応状況

構築に入る前に、ストリーミング再生の各デバイスの対応状況の ”今” を知る必要があったのでまとめます。

◯ 再生クライアントデバイスサポート状況

　　　　　　　　　　※出典元： AWS から始める動画配信（SlideShare）

◯ HTML5(のvideo要素)対応状況

　　　　　　　　　　※出典元：HTML5の対応状況：Can I use

上記のことをまとめると、

iPhone は対応しているものが少ない。
HTML5 や HLS は対応しているデバイスは多い。
HTML5は、”新しい” 主要なブラウザなら、ほぼ対応してる。
- 反対に、ちょっと古いブラウザは非対応で不安である。
HTML5 への対応は、今後さらに標準的になる。

ということが言えそうです。

AWS のアーキテクチャを考える

これまでの調査結果をふまえると、下記の図のようなアーキテクチャにすれば私がやりたいことは実現できます。
（他の実現方法も、先ほどの SlideShare にいろいろ紹介されています。）

　　　　　　　　　　※出典元： AWS から始める動画配信（SlideShare）

この図の中で今回の特記事項としては、以下のとおりです。

図中の ”Elastic Transcoder” については、本記事では触れません。
マルチデバイス対応には、JWPLAYER（version 7.1.4）無償版を利用します。

AWS の設定

◯ S3

こちらは、WEBで検索すれば沢山でてきますので、詳細は割愛します。
やることとしては、

S3 バケットを作成する

これだけです。

ポイントとしては、

パーミッションの設定は CloudFront 側の設定でやってしまうので、ここでは何も触らなくてよいです。
- つまり、[Properties] の [Permissions]　は触らないということです。

◯ CloudFront

CloudFront を使って S3上のコンテンツにアクセスさせるには、AWS の公式Document などを確認いただければと思います。

ここでは、ポイントだけを説明します。

1. AWSマネージメントコンソールから、CloudFront を選択

2. WEB distribution の [Get Started] を押下します。

※ここの RTMP distribution は今回は一切利用しません。

3. 以下の赤文字のところのように、

[Origin Domain Name] で、先の S3 を指定し、

赤枠のようにして S3 のパーミッションを設定します。
（他はデフォルトです。）

これで、

外部から直接 S3 のコンテンツにはアクセス不可
外部からは、CloudFront を経由して S3 のコンテンツにアクセス可能

という設定が完了しました。

S3バケットにアップロード

◯ JWPLAYER本体の設置

JWPLAYER公式のこちらから、jwplayer-7.1.4.zip　を　download します。

中身を展開すると、以下のものがあります。

jwplayer.js
jwplayer.flash.swf
1.js
provider.shaka.js
provider.youtube.js
provider.cast.js
/skins/beelden.css
/skins/bekle.css
/skins/five.css
/skins/glow.css
/skins/roundster.css
/skins/seven.css
/skins/six.css
/skins/stormtrooper.css
/skins/vapor.css

jwplayer.js

jwplayer.flash.swf

1.js

provider.shaka.js

provider.youtube.js

provider.cast.js

/skins/beelden.css

/skins/bekle.css

/skins/five.css

/skins/glow.css

/skins/roundster.css

/skins/seven.css

/skins/six.css

/skins/stormtrooper.css

/skins/vapor.css

上記を先に作成した S3 (CloudFrontからアクセスできる場所)にUPLOADします。
プラグインや不要なものもありますが、ここでは、全部UPLOADしました。

◯ 動画ファイルの設置

好きなところに置いください。
（私は、せっかくなので先ほどのJWPLAYER本体を設置した S3バケットにディレクトリを作ってその中に mp4 ファイルを置きました。）

ちなみに、HLS(m3u8)でも再生できますので、お好みでどうぞ。

JWPLAYER の設定

◯ JWPLAYERを読み込むためのHTMLファイル作成

JWPLAYERについての詳細は、こちらの公式ページを参考にしてください。
ドキュメントをみてると、様々なオプションが使えて楽しいですが、
ここでは、冒頭の、

HTML5 が使えない時に Flash へ自動的に fallback できて、さらに、いろんなデバイスから再生できる！

というのを実現するための最小限のHTML(JS)のコードにしています。

また、HTML(JS)のコードの作成は、
こちらの、AWSのチュートリアルを参考にして、JWPLAYER が CloudFront 上で動作するためのHTML(JS)を作成しました。

記事が少々古いので、少々手を加えてると、以下のようになりました。（あまり変わってないですかね。）

ここでは、以下の内容で、 sample-streaming-video.html として作成します。

<html>
  <head>
    <!-- JS jwplayer 7.1.4 -->
    <script type="text/javascript" src="https:/クラウドフロントのドメインネーム/jwplayer.js"></script>
    <!-- JWplayer Licence - put your licence here -->
    <script type="text/javascript">jwplayer.key='jwplayerライセンス(無償版/有償版)';</script>
  </head>
<body>
  <div id="my-video"></div>
  <script type="text/javascript">
    jwplayer("my-video").setup({
    file: "https://再生する動画コンテンツがあるドメインネーム/(ディレクトリ)/動画ファイル名",
    width: "580",
    height: "370",
    androidhls: true
    });
  </script>
</body>
</html>

<html>

<head>

</head>

<body>

jwplayer("my-video").setup({

file: "https://再生する動画コンテンツがあるドメインネーム/(ディレクトリ)/動画ファイル名",

width: "580",

height: "370",

androidhls: true

});

</script>

</body>

</html>

上記のサンプルコードの以下の箇所はそれぞれ、先ほど S3 にアップロードした場所を指定することになります（実際に指定するドメインはCloudFront）。

<script src="https://クラウドフロントのドメインネーム/jwplayer.js" type="text/javascript"></script>

1	<script src="https://クラウドフロントのドメインネーム/jwplayer.js" type="text/javascript"></script>

 file: "https://再生する動画コンテンツがあるドメインネーム/(ディレクトリ)/動画ファイル名",

1	file: "https://再生する動画コンテンツがあるドメインネーム/(ディレクトリ)/動画ファイル名",

◯ sample-streaming-video.html の設置

特に言うことはありません。
動画をストリーミング再生したいお好きなドメインのサイトに、このhtmlファイルを置いてください。

確認してみる

さてこれで、準備ができました。

"http://sample-streaming-video.html を設置したサイトのドメイン/sample-streaming-video.html"

にアクセスしてみてください。

どうですか？　
　動画が再生されましたか？
　iPhone ではどうでしょうか？
　Android ではどうでしょうか？
　Flash がインストールされている Windows ではどうでしょうか？
　Flash がインストールされていない Mac ではどうでしょうか？

まとめ

現在、様々なデバイスで動画をストリーミング再生するには、HTML5 での実装が良いが、技術的に枯れている Flash に fallback も可能にしたほうが、古いブラウザでも安心できる。
実現手段がいろいろありすぎて難しい。実装方法を選択するには、ストリーミング再生の各デバイスの対応状況の ”今” を知る必要がある。
このような時代の変化に対応するには、 JWPLAYER などの再生ツールを利用すると楽である。
AWS を利用すれば、動画のストリーミング再生というキャパシティプランニングが必要になる（リソースの消費が激しい可能性が高い）設計場面において、それほど気にしなくてよくなる。

最後に、
HTML5 がもっと標準的になってきたら、この手順は必要なくなるとおもいます。
それでは、良いお年を！