html5 + javascriptでdrmつきmpeg-dashを再生させる

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（可変ビットレート）

mp4

mp4

mp4


この制御をJavaScriptで行う！

すごく便利なDASH用バッファ

mp4

mp4

mp4


・バイナリファイルを突っ込むだけで

再生可能にしてくれる

・同じ再生時刻の違うビットレートの

バイナリを入れても問題なし

ここらへんの仕組み＝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


ここの制御をJavaScriptで行う！① ② ③④

⑤

EME制御（長いのでコードは省略）

①DRM動画を読み込むと、EME処理開始のイベントが発生

②EMEの鍵リクエストAPIを呼ぶ

③EMEのイベントでライセンスサーバへのリクエスト内容が通知される

④HTTPリクエストで③の内容をライセンスサーバへ送る

⑤サーバから受け取ったライセンスをEMEのAPIに渡す

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

DRMつきMPEG-DASH

PlayReady用CDM


mp4

mp4

mp4


MSEとEMEを組み合わせるだけ

DRMつきMPEG-DASH

PlayReady用CDM


mp4

mp4

mp4


赤枠部分を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

トップレベル要素

開始時間

動画の長さ

　　

シーン、チャプター、広告を分ける



・AdaptationSet

音声 or 映像



・Representation

同じコンテンツを違うエンコードされたもの

スクリーンサイズ

動画ビットレート

コーデック

回線速度で切り替えるのはココ


html5 + javascriptでdrmつきmpeg-dashを再生させる

Technology