Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる

18,877 views

Published on

動画配信界隈で話題のMPEFG-DASHとは一体どういう技術なのか?どうやって再生させるか?等について紹介します。

Published in: Technology
  • Login to see the comments

HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる

  1. 1. HTML5 + JavaScriptで DRMつきMPEG-DASHを再生させる
  2. 2. 何の話? ・動画配信界隈で話題の MPEG-DASHとは何なのか?どういう技術なのか?  → 万人向け ・どうやって再生させるのか  → エンジニア向け
  3. 3. 目次 1. MPEG-DASHって何 2. DASH再生を行う 3. DRMつきコンテンツを再生する 4. DRMつきMPEG-DASHを再生する 5. 関連ライブラリ
  4. 4. 1.MPEG-DASHって何
  5. 5. MPEG-DASHとは ・MPEG ・・・ ご存知エムペグ ・DASH ・・・ Dynamic Adaptive Streaming over HTTP 回線の速度に合わせて動的にコンテンツのビットレートを変える技術 ✳ 遅い回線では低画質、速い回線では高画質
  6. 6. MPEG-DASHの利点 回線速い→高画質 回線遅い→低画質 ストリーミング中の回線ビットレート低下による動画停止などを軽減できる 単なるHTTPサーバで実装できる 再生用コンテンツURLが一つ
  7. 7. 2.DASH再生を行う
  8. 8. 通常のvideo再生 video要素の src に動画のパスを設定 <video src="sample.mp4"></video> 単純な一本の動画ならこれでOK
  9. 9. MPEG-DASHの場合 エンコード済みの動画ファイルがビットレートごとに存在する! sample_512.mp4 : 低ビットレート sample_1024.mp4 : 中 sample_2048.mp4 : 高 これら三つを、ご家庭のインターネットの回線状況にあわせて 動的に切り替えながら再生する(JavaScript)
  10. 10. どうやって?
  11. 11. イメージ図:普通の再生(固定ビットレート) ブラウザから動画に直アクセスしてvideo要素に表示 mp4
  12. 12. イメージ図:DASH再生 video要素と動画の間にバッファをかませる mp4 mp4 mp4 DASH再生用 のバッファ
  13. 13. イメージ図:DASH(可変ビットレート) mp4 mp4 mp4 DASH再生用 のバッファ 回線状況に応じて、バッファに入れる動画を変える
  14. 14. イメージ図:DASH(可変ビットレート) mp4 mp4 mp4 DASH再生用 のバッファ この制御をJavaScriptで行う!
  15. 15. すごく便利なDASH用バッファ mp4 mp4 mp4 DASH再生用 のバッファ ・バイナリファイルを突っ込むだけで 再生可能にしてくれる ・同じ再生時刻の違うビットレートの バイナリを入れても問題なし ここらへんの仕組み=MSE (Media Source Extensions) 名前:SourceBuffer
  16. 16. MSE制御 mp4 mp4 mp4 一本の可変ビットレート動画であるかのように再生できる mp4
  17. 17. MSE制御サンプルコード(JavaScript) ①HTTPリクエストでmp4ファイル取得 ②バッファオブジェクトのメソッド呼び出してバイナリを読み込ませる var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "arraybuffer"; xhr.setRequestHeader("Range", “bytes=" + rangeStart + "-" + rangeEnd); xhr.send(null); sourceBuffer.append(new Uint8Array(response));
  18. 18. 3.DRMつきコンテンツを再生する
  19. 19. 暗号化されたコンテンツを復号する手段が必要 DRMつきmp4 HTML単体では DRMコンテンツを再生できない ?
  20. 20. DRMつきmp4 HTML単体では DRMコンテンツを再生できない CDM (コンテンツ暗号解除モジュール) を使えば復号できる CDM
  21. 21. いろいろあるCDM PlayReady用CDM CDMはDRMの種類によって中身が違う ・PlayReady ・Widevine ・Adobe Primetime Widevine用CDM Primetime用CDM
  22. 22. いろいろあるCDM PlayReady用CDM Widevine用CDM Primetime用CDM 全部同じように使うためのAPI仕様 → EME
  23. 23. CDMとEME PlayReady用CDM EMEのおかげでDRMの種類によらず復号処理ができる Widevine用CDM Primetime用CDM EME EME EME
  24. 24. どのように実装するのか
  25. 25. DRMつきmp4 EMEでのライセンス解決 CDM(EME)を使ってライセンスサーバから復号用の鍵を取得 PlayReady用CDM EME ライセンスサーバ ① ② ③ ④ ⑤
  26. 26. DRMつきmp4 EMEでのライセンス解決 CDM(EME)を使ってライセンスサーバから復号用の鍵を取得 PlayReady用CDM EME ライセンスサーバ ここの制御をJavaScriptで行う!① ② ③ ④ ⑤
  27. 27. EME制御(長いのでコードは省略) ①DRM動画を読み込むと、EME処理開始のイベントが発生 ②EMEの鍵リクエストAPIを呼ぶ ③EMEのイベントでライセンスサーバへのリクエスト内容が通知される ④HTTPリクエストで③の内容をライセンスサーバへ送る ⑤サーバから受け取ったライセンスをEMEのAPIに渡す
  28. 28. 4.DRMつきMPEG-DASHを再生させる
  29. 29. DRMつきMPEG-DASH PlayReady用CDM EME ライセンスサーバ mp4 mp4 mp4 DASH再生用 のバッファ MSEとEMEを組み合わせるだけ
  30. 30. DRMつきMPEG-DASH PlayReady用CDM EME ライセンスサーバ mp4 mp4 mp4 DASH再生用 のバッファ 赤枠部分をJSで制御! MSE EME
  31. 31. MPDファイルの実態
  32. 32. 構成 MPD対応プレーヤー MPD マニフェスト MP4 MP4 MP4 サーバ
  33. 33. 構成 MPD対応プレーヤー MPD マニフェスト MP4 MP4 MP4 サーバ HTML5 プレーヤから アクセスされるもの コンテンツの実体 HTTP
  34. 34. MPEG-DASHの実体 → XMLファイル <?xml version="1.0" encoding="utf-8"?> <MPD> <Period> <AdaptationSet> <Representation> <BaseURL>audio_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_3.mp4</BaseURL> </Representation> </AdaptationSet> <AdaptationSet> <Representation>
  35. 35. それぞれのタグの意味 ・Period トップレベル要素 開始時間 動画の長さ    シーン、チャプター、広告を分ける <?xml version="1.0" encoding="utf-8"?> <MPD> <Period> <AdaptationSet> <Representation> <BaseURL>audio_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_3.mp4</BaseURL> </Representation> </AdaptationSet> <AdaptationSet> <Representation>
  36. 36. それぞれのタグの意味 ・AdaptationSet 音声 or 映像 <?xml version="1.0" encoding="utf-8"?> <MPD> <Period> <AdaptationSet> <Representation> <BaseURL>audio_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_3.mp4</BaseURL> </Representation> </AdaptationSet> <AdaptationSet> <Representation>
  37. 37. それぞれのタグの意味 ・Representation 同じコンテンツを違うエンコードされたもの スクリーンサイズ 動画ビットレート コーデック 回線速度で切り替えるのはココ <?xml version="1.0" encoding="utf-8"?> <MPD> <Period> <AdaptationSet> <Representation> <BaseURL>audio_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>audio_3.mp4</BaseURL> </Representation> </AdaptationSet> <AdaptationSet> <Representation>
  38. 38. 関連ライブラリ
  39. 39. ライブラリ ・dash.js … https://github.com/Dash-Industry-Forum/dash.js/wiki  一番有名なMPEG-DASH再生ライブラリ  これを入れて素直に動いたら最高! ・bitdash … http://www.dash-player.com/  有償
  40. 40. 注意点 ・MSE、EMEはバージョンがいくつもありバージョンごとにAPIの仕様が結構違う   ブラウザに実装されているバージョンに注意しましょう  例)MSE(2012年ころ)のappendメソッド   → 最近のバージョンでは appendBufferメソッドになってる
  41. 41. まとめ ・JavaScriptをがんばって粘り強く実装する ・アダプティブストリーミングをする仕組みがMSE … バッファにつっこむ ・DRM処理をするAPIがEME … ライセンスサーバとのやりとり ・MSE + EME でDRMつきMPEG-DASH再生
  42. 42. 参考資料 W3C MSE (latest) … http://www.w3.org/TR/media-source/ W3C EME (latest) … http://www.w3.org/TR/encrypted-media/ MS公式サイトPlayReady + EME 処理例 … https://msdn.microsoft.com/en- us/library/windows/apps/dn468979.aspx

×