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

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

2. 何の話？
・動画配信界隈で話題の MPEG-DASHとは何なのか？どういう技術なのか？
→ 万人向け
・どうやって再生させるのか
→ エンジニア向け

3. 目次
1. MPEG-DASHって何
2. DASH再生を行う
3. DRMつきコンテンツを再生する
4. DRMつきMPEG-DASHを再生する
5. 関連ライブラリ

4. 1.MPEG-DASHって何

5. MPEG-DASHとは
・MPEG ・・・ ご存知エムペグ
・DASH ・・・ Dynamic Adaptive Streaming over HTTP
回線の速度に合わせて動的にコンテンツのビットレートを変える技術
✳ 遅い回線では低画質、速い回線では高画質

6. MPEG-DASHの利点
回線速い→高画質 回線遅い→低画質
ストリーミング中の回線ビットレート低下による動画停止などを軽減できる
単なるHTTPサーバで実装できる
再生用コンテンツURLが一つ

7. 2.DASH再生を行う

8. 通常のvideo再生
video要素の src に動画のパスを設定
<video src="sample.mp4"></video>
単純な一本の動画ならこれでOK

9. MPEG-DASHの場合
エンコード済みの動画ファイルがビットレートごとに存在する！
sample_512.mp4 ： 低ビットレート
sample_1024.mp4 ： 中
sample_2048.mp4 ： 高
これら三つを、ご家庭のインターネットの回線状況にあわせて
動的に切り替えながら再生する（JavaScript）

10. どうやって？

11. イメージ図：普通の再生（固定ビットレート）
ブラウザから動画に直アクセスしてvideo要素に表示
mp4

12. イメージ図：DASH再生
video要素と動画の間にバッファをかませる
mp4
mp4
mp4
DASH再生用
のバッファ

13. イメージ図：DASH（可変ビットレート）
mp4
mp4
mp4
DASH再生用
のバッファ
回線状況に応じて、バッファに入れる動画を変える

14. イメージ図：DASH（可変ビットレート）
mp4
mp4
mp4
DASH再生用
のバッファ
この制御をJavaScriptで行う！

15. すごく便利なDASH用バッファ
mp4
mp4
mp4
DASH再生用
のバッファ
・バイナリファイルを突っ込むだけで
再生可能にしてくれる
・同じ再生時刻の違うビットレートの
バイナリを入れても問題なし
ここらへんの仕組み＝MSE (Media Source Extensions)
名前：SourceBuffer

16. MSE制御
mp4
mp4
mp4
一本の可変ビットレート動画であるかのように再生できる
mp4

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. 3.DRMつきコンテンツを再生する

19. 暗号化されたコンテンツを復号する手段が必要
DRMつきmp4
HTML単体では
DRMコンテンツを再生できない
？

20. DRMつきmp4
HTML単体では
DRMコンテンツを再生できない
CDM (コンテンツ暗号解除モジュール) を使えば復号できる
CDM

21. いろいろあるCDM
PlayReady用CDM
CDMはDRMの種類によって中身が違う
・PlayReady
・Widevine
・Adobe Primetime
Widevine用CDM
Primetime用CDM

22. いろいろあるCDM
PlayReady用CDM
Widevine用CDM
Primetime用CDM
全部同じように使うためのAPI仕様 → EME

23. CDMとEME
PlayReady用CDM
EMEのおかげでDRMの種類によらず復号処理ができる
Widevine用CDM
Primetime用CDM
EME EME EME

24. どのように実装するのか

25. DRMつきmp4
EMEでのライセンス解決
CDM(EME)を使ってライセンスサーバから復号用の鍵を取得
PlayReady用CDM
EME
ライセンスサーバ
① ② ③
④
⑤

26. DRMつきmp4
EMEでのライセンス解決
CDM(EME)を使ってライセンスサーバから復号用の鍵を取得
PlayReady用CDM
EME
ライセンスサーバ
ここの制御をJavaScriptで行う！① ② ③
④
⑤

27. EME制御（長いのでコードは省略）
①DRM動画を読み込むと、EME処理開始のイベントが発生
②EMEの鍵リクエストAPIを呼ぶ
③EMEのイベントでライセンスサーバへのリクエスト内容が通知される
④HTTPリクエストで③の内容をライセンスサーバへ送る
⑤サーバから受け取ったライセンスをEMEのAPIに渡す

28. 4.DRMつきMPEG-DASHを再生させる

29. DRMつきMPEG-DASH
PlayReady用CDM
EME
ライセンスサーバ
mp4
mp4
mp4
DASH再生用
のバッファ
MSEとEMEを組み合わせるだけ

30. DRMつきMPEG-DASH
PlayReady用CDM
EME
ライセンスサーバ
mp4
mp4
mp4
DASH再生用
のバッファ
赤枠部分をJSで制御！ MSE
EME

31. MPDファイルの実態

32. 構成
MPD対応プレーヤー MPD
マニフェスト
MP4
MP4
MP4
サーバ

33. 構成
MPD対応プレーヤー MPD
マニフェスト
MP4
MP4
MP4
サーバ
HTML5
プレーヤから
アクセスされるもの
コンテンツの実体
HTTP

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. それぞれのタグの意味
・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. それぞれのタグの意味
・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. それぞれのタグの意味
・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. 関連ライブラリ

39. ライブラリ
・dash.js … https://github.com/Dash-Industry-Forum/dash.js/wiki
一番有名なMPEG-DASH再生ライブラリ
これを入れて素直に動いたら最高！
・bitdash … http://www.dash-player.com/
有償

40. 注意点
・MSE、EMEはバージョンがいくつもありバージョンごとにAPIの仕様が結構違う
ブラウザに実装されているバージョンに注意しましょう
例）MSE(2012年ころ)のappendメソッド
→ 最近のバージョンでは appendBufferメソッドになってる

41. まとめ
・JavaScriptをがんばって粘り強く実装する
・アダプティブストリーミングをする仕組みがMSE … バッファにつっこむ
・DRM処理をするAPIがEME … ライセンスサーバとのやりとり
・MSE + EME でDRMつきMPEG-DASH再生

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