はじめに

dash.jsでアダプティブストリーミングを行う方法を紹介します。（2020年5月現在）

動作環境

OS: Windows 10 Pro
Google Chrome: 81.0.4044.129
Mozilla Firefox: 75.0
Microsoft Edge: 81.0.416.64（Chromium版）
dashJS: 3.1.0

JavaScript 拡張API

dash.js では、下記のMSEやEMEの拡張APIが含まれております。そのため、これらの拡張APIを意識することなく再生することができます。

MSE

MSE = Media Source Extensions
アダプティブストリーミングを行うためのJavaScript API
W3C によって標準化
- https://www.w3.org/TR/media-source/

HTML5 video（Media Element）がアダプティブストリーミングにサポートしていないブラウザがあります。MSE（Media Source Extensions）では、サポートするためのHTML5拡張APIです。拡張APIのMediaSourceやSourceBufferオブジェクトを使用して、マニフェストファイルを解析してセグメントファイルを読み込むことを行っています。

EME

EME = Encrypted Media Extensions
HTMLMediaElement を拡張してDRM再生を制御するJavaScript API
W3C によって標準化
- https://w3.org/TR/encrypted-media/
CDMと対話するためのインタフェースを提供する。CDMが特定の何かに依存しない。
メディアファイル自体の復号化する機能はない。CDMが復号化する。

HTML5 video（Media Element）は標準でDRMがサポートされていません。EME（Encrypted Media Extensions）は、DRMの使用を可能にするHTML5拡張APIです。MediaKeysやMediaKeySessionオブジェクトを使用して、ライセンスサーバーからKeyを取得してメディアファイルを復号するCDMにリクエストします。

ライブラリの読み込み

dashJS
https://github.com/Dash-Industry-Forum/dash.js

<script src="../lib/dash.all.debug.js"></script>

DRMなし

デモはこちら

DRMなし

let player = dashjs.MediaPlayer().create();
player.initialize(document.getElementById('video'), '../../mpd/std/profile_live/Bullfinch.mpd', true);
player.updateSettings({
    'debug': {
        'logLevel': dashjs.Debug.LOG_LEVEL_INFO
    }
});

ブラウザ名	動作可否
Google Chrome	○
Mozilla Firefox	○
Microsoft Edge	○

initializeの第2引数にビデオリソースを指定します。

DRMあり

ClearKey

デモはこちら

ClearKey

player.initialize(document.getElementById('video'), '../../mpd/drm/clearkey/Bullfinch.mpd', true);
player.setProtectionData({
    'org.w3.clearkey': {
        'clearkeys': {
            'OCYfniLWkYVAQNXDwaqUeQ': 'jfUe14GofJhw1Sw0yde2eQ'
        }
    }
});

ClearKeyでは、setProtectionDataにClearyKeyのDRMシステム名、clearkeysにKeyID:Key を指定します。

ブラウザ名	動作可否
Google Chrome	○
Mozilla Firefox	○
Microsoft Edge	○

Widevine

デモはこちら

Widevine

player.initialize(document.getElementById('video'), '../../mpd/drm/widevine/Bullfinch.mpd', true);
player.setProtectionData({
    'com.widevine.alpha': {
        serverURL: 'https://widevine-proxy.appspot.com/proxy',
    }
});

Widevineでは、setProtectionDataにWidevineのDRMシステム名、serverURLにライセンスサーバーURLを指定します。

ブラウザ名	動作可否
Google Chrome	○
Mozilla Firefox	○
Microsoft Edge	○

PlayReady

デモはこちら

PlayReady

player.initialize(document.getElementById('video'), '../../mpd/drm/playready/Bullfinch.mpd', true);
player.setProtectionData({
    'com.microsoft.playready': {
        serverURL: 'https://test.playready.microsoft.com/service/rightsmanager.asmx?cfg=(kid:header,contentkey:jfUe14GofJhw1Sw0yde2eQ==)',
    }
});

PlayReadyでは、setProtectionDataにPlayReadyのDRMシステム名、serverURLにライセンスサーバーURLを指定します。

ブラウザ名	動作可否
Google Chrome	×
Mozilla Firefox	×
Microsoft Edge	○

マルチDRM(Widevine+PlayReady)

デモはこちら

マルチDRM

player.initialize(document.getElementById('video'), '../../mpd/drm/multi/Bullfinch.mpd', true);
player.setProtectionData({
    'com.widevine.alpha': {
        serverURL: 'https://widevine-proxy.appspot.com/proxy',
    },
    'com.microsoft.playready': {
        serverURL: 'https://test.playready.microsoft.com/service/rightsmanager.asmx?cfg=(kid:header,contentkey:O9ovQDRMfe9hQie5wPA+Jg==)',
    }
});

マルチDRMでは、setProtectionDataにDRMシステム名を複数指定します。ブラウザ側が対応しているDRMで再生を行います。

ブラウザ名	動作可否
Google Chrome	○
Mozilla Firefox	○
Microsoft Edge	○

おわりに

今回、dashJSによるアダプティブストリーミングの再生について纏めました。
メディアファイルの作成方法については別の投稿で紹介していますので
是非ご覧ください。ありがとうございました。

関連リンク

[MPEG-DASH] 初心者のためのWEBストリーミング入門
[MPEG-DASH] Fragmented MP4のファイル構造
[MPEG-DASH] MPDのファイル構造
[MPEG-DASH] DRMシステムの概要と種類
[MPEG-DASH] Bento4でDRMパッケージを行う
[MPEG-DASH] dashJSでアダプティブストリーミングを再生する（本稿）
[MPEG-DASH] videoJSでアダプティブストリーミングを再生する
[MPEG-DASH] パフォーマンスチューニングを行う

以上です。