View
2.788
Download
1
Category
Preview:
Citation preview
HTML5 + JavaScriptでDRMつきMPEG-DASHを再生させる
何の話？
・動画配信界隈で話題の MPEG-DASHとは何なのか？どういう技術なのか？
→ 万人向け
・どうやって再生させるのか
→ エンジニア向け
目次
1. MPEG-DASHって何
2. DASH再生を行う
3. DRMつきコンテンツを再生する
4. DRMつきMPEG-DASHを再生する
5. 関連ライブラリ
1.MPEG-DASHって何
MPEG-DASHとは
・MPEG ・・・ ご存知エムペグ
・DASH ・・・ Dynamic Adaptive Streaming over HTTP
回線の速度に合わせて動的にコンテンツのビットレートを変える技術
✳� 遅い回線では低画質、速い回線では高画質
MPEG-DASHの利点
回線速い→高画質 回線遅い→低画質
ストリーミング中の回線ビットレート低下による動画停止などを軽減できる
単なるHTTPサーバで実装できる
再生用コンテンツURLが一つ
2.DASH再生を行う
通常のvideo再生
video要素の src に動画のパスを設定
<video src="sample.mp4"></video>
単純な一本の動画ならこれでOK
MPEG-DASHの場合
エンコード済みの動画ファイルがビットレートごとに存在する！
sample_512.mp4 ： 低ビットレートsample_1024.mp4 ： 中sample_2048.mp4 ： 高
これら三つを、ご家庭のインターネットの回線状況にあわせて
動的に切り替えながら再生する（JavaScript）
どうやって？
イメージ図：普通の再生（固定ビットレート）
ブラウザから動画に直アクセスしてvideo要素に表示
mp4
イメージ図：DASH再生
video要素と動画の間にバッファをかませる
mp4
mp4
mp4
DASH再生用のバッファ
イメージ図：DASH（可変ビットレート）
mp4
mp4
mp4
DASH再生用のバッファ
回線状況に応じて、バッファに入れる動画を変える
イメージ図：DASH（可変ビットレート）
mp4
mp4
mp4
DASH再生用のバッファ
この制御をJavaScriptで行う！
すごく便利なDASH用バッファ
mp4
mp4
mp4
DASH再生用のバッファ
・バイナリファイルを突っ込むだけで
再生可能にしてくれる
・同じ再生時刻の違うビットレートの
バイナリを入れても問題なし
ここらへんの仕組み＝MSE (Media Source Extensions)
名前：SourceBuffer
MSE制御
mp4
mp4
mp4
一本の可変ビットレート動画であるかのように再生できる
mp4
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));
3.DRMつきコンテンツを再生する
暗号化されたコンテンツを復号する手段が必要
DRMつきmp4
HTML単体ではDRMコンテンツを再生できない
？
DRMつきmp4
HTML単体ではDRMコンテンツを再生できない
CDM (コンテンツ暗号解除モジュール) を使えば復号できる
CDM
いろいろあるCDM
PlayReady用CDM
CDMはDRMの種類によって中身が違う
・PlayReady
・Widevine
・Adobe PrimetimeWidevine用CDM
Primetime用CDM
いろいろあるCDM
PlayReady用CDM
Widevine用CDM
Primetime用CDM
全部同じように使うためのAPI仕様 → EME
CDMとEME
PlayReady用CDM
EMEのおかげでDRMの種類によらず復号処理ができる
Widevine用CDM Primetime用CDM
EME EME EME
どのように実装するのか
DRMつきmp4
EMEでのライセンス解決
CDM(EME)を使ってライセンスサーバから復号用の鍵を取得
PlayReady用CDM
EMEライセンスサーバ
① ② ③④
⑤
DRMつきmp4
EMEでのライセンス解決
CDM(EME)を使ってライセンスサーバから復号用の鍵を取得
PlayReady用CDM
EMEライセンスサーバ
ここの制御をJavaScriptで行う！① ② ③④
⑤
EME制御（長いのでコードは省略）
①DRM動画を読み込むと、EME処理開始のイベントが発生
②EMEの鍵リクエストAPIを呼ぶ
③EMEのイベントでライセンスサーバへのリクエスト内容が通知される
④HTTPリクエストで③の内容をライセンスサーバへ送る
⑤サーバから受け取ったライセンスをEMEのAPIに渡す
4.DRMつきMPEG-DASHを再生させる
DRMつきMPEG-DASH
PlayReady用CDM
EMEライセンスサーバ
mp4
mp4
mp4
DASH再生用のバッファ
MSEとEMEを組み合わせるだけ
DRMつきMPEG-DASH
PlayReady用CDM
EMEライセンスサーバ
mp4
mp4
mp4
DASH再生用のバッファ
赤枠部分をJSで制御！ MSE
EME
MPDファイルの実態
構成
MPD対応プレーヤー MPDマニフェスト
MP4
MP4
MP4
サーバ
構成
MPD対応プレーヤー MPDマニフェスト
MP4
MP4
MP4
サーバ
HTML5 プレーヤからアクセスされるもの
コンテンツの実体
HTTP
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> <BaseURL>video_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_3.mp4</BaseURL> </Representation> </AdaptationSet> </Period></MPD>
それぞれのタグの意味
・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> <BaseURL>video_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_3.mp4</BaseURL> </Representation> </AdaptationSet> </Period></MPD>
それぞれのタグの意味
・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> <BaseURL>video_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_3.mp4</BaseURL> </Representation> </AdaptationSet> </Period></MPD>
それぞれのタグの意味
・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> <BaseURL>video_1.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_2.mp4</BaseURL> </Representation> <Representation> <BaseURL>video_3.mp4</BaseURL> </Representation> </AdaptationSet> </Period></MPD>
関連ライブラリ
ライブラリ
・dash.js … https://github.com/Dash-Industry-Forum/dash.js/wiki
一番有名なMPEG-DASH再生ライブラリ
これを入れて素直に動いたら最高！
・bitdash … http://www.dash-player.com/
有償
注意点
・MSE、EMEはバージョンがいくつもありバージョンごとにAPIの仕様が結構違う
ブラウザに実装されているバージョンに注意しましょう
例）MSE(2012年ころ)のappendメソッド
→ 最近のバージョンでは appendBufferメソッドになってる
まとめ
・JavaScriptをがんばって粘り強く実装する
・アダプティブストリーミングをする仕組みがMSE … バッファにつっこむ
・DRM処理をするAPIがEME … ライセンスサーバとのやりとり
・MSE + EME でDRMつきMPEG-DASH再生
参考資料
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
Recommended