[MPEG-DASH] dashJSでアダプティブストリーミングを再生する

# はじめに

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

```Markdown:動作環境
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](#mse)や[EME](#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）](https://en.wikipedia.org/wiki/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）](https://en.wikipedia.org/wiki/Encrypted_Media_Extensions)は、DRMの使用を可能にするHTML5拡張APIです。`MediaKeys`や`MediaKeySession`オブジェクトを使用して、ライセンスサーバーからKeyを取得してメディアファイルを復号するCDMにリクエストします。

# ライブラリの読み込み

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

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

# DRMなし

[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/player/std_dashjs/)

```JavaScript: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
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/player/drm_clearKey/)

```JavaScript: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
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/player/drm_widevine/)

```JavaScript: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
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/player/drm_playready/)

```JavaScript: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) 
[デモはこちら](https://yunbow.github.io/sample-mpeg-dash/player/drm_multi/)

```JavaScript:マルチ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ストリーミング入門](https://qiita.com/yun_bow/items/a97ad78615c6ca3a75bb)
- [[MPEG-DASH] Fragmented MP4のファイル構造](https://qiita.com/yun_bow/items/a33266b78d5aab807c71)
- [[MPEG-DASH] MPDのファイル構造](https://qiita.com/yun_bow/items/780e49531174272e7c44)
- [[MPEG-DASH] DRMシステムの概要と種類](https://qiita.com/yun_bow/items/e573f4754579d1627a13)
- [[MPEG-DASH] Bento4でDRMパッケージを行う](https://qiita.com/yun_bow/items/77b86d75e15f245f265b)
- [MPEG-DASH] dashJSでアダプティブストリーミングを再生する（本稿）
- [[MPEG-DASH] videoJSでアダプティブストリーミングを再生する](https://qiita.com/yun_bow/items/3cdcb0a4f961d6e1e06d)
- [[MPEG-DASH] パフォーマンスチューニングを行う](https://qiita.com/yun_bow/items/e4e37265643a661021ec)

以上です。