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

Pocket

こんにちは、落合です。

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

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

実現したいこと

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

参考にした文献

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

AWS から始める動画配信(SlideShare)

HTML5の対応状況:Can I use

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

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

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

awswebinaraws-14-638
          ※出典元: AWS から始める動画配信(SlideShare)

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

html-video
          ※出典元:HTML5の対応状況:Can I use

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

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

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

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

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

architecture
          ※出典元: AWS から始める動画配信(SlideShare)

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

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

AWS の設定

◯ S3

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

  • S3 バケットを作成する

これだけです。

ポイントとしては、

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

◯ CloudFront

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

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

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

aws1

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

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

aws2

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

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

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

aws3

これで、

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

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

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

◯ JWPLAYER本体の設置

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

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

上記を先に作成した 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 として作成します。

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

◯ 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 がもっと標準的になってきたら、この手順は必要なくなるとおもいます。
それでは、良いお年を!

Pocket

Comments are closed, but you can leave a trackback: Trackback URL.

Advent Calendar 2015の連載記事

  1. TECHSCORE Advent Calendar 2015
  2. Redshift と PostgreSQL に同時に JDBC 接続する
  3. Lombok で Spice up your Java!
  4. 画像を指定するだけ!非デザイナーでも簡単にそれっぽい配色ができるツールを作ってみた
  5. 新卒文系エンジニアの記録:配属半年間の失敗を振り返ってみた
  6. 非同期処理のすすめ
  7. ioDrive2の導入で支える、そのIOPS - 導入検討編.
  8. GoでパイプラインからSlackに通知する
  9. fuse でオレオレファイルシステムを作ってみた (Haskell で)
  10. Erlang はじめました
  11. ちょっと地味なビルドとリリースの話 (レガシーシステム改革、はじめの一歩)
  12. Java8 最速 boolean[] to Stream 選手権
  13. Google Apps の Directory API にてWebブラウザを介さずに認証する
  14. 風データをビジュアルに表現する
  15. マイクロフレームワーク「Ninja」を使ってみる
  16. 赤ちゃんvimmerからよちよちvimmerにクラスチェンジを果たすためのTips
  17. PostgreSQL FDW を作ってSQLでログ検索してみた
  18. Goで偽名ジェネレータを作りました
  19. 書き込み中に削除されたファイルを救出する
  20. 運用情報更新のススメ
  21. ちゃんと読んでくれましたか?
  22. Presto コネクターを実装する 第三回
  23. Ruby2.3を触ってみる
  24. Git 困ったときのtips集
  25. 5分で読む入門編:Java 8 ラムダ式 コレクション編(2)リストの検索
  26. CloudFront (+ S3) + JWPLAYER で様々なデバイスのブラウザから動画をストリーミング再生する