動画配信サービスをブラウザで提供されている方は多くいらっしゃるかと思いますが、配信コンテンツの保護のためにDRMに対応する際、初めての方にとっては「どこに何を書けばいいのか」が分かりにくいと感じる方も多いのではないでしょうか。本記事では、オープンソースのHTML5プレイヤー『Shaka Player』を例に取り、DRMコンテンツ再生のフロントエンド側の実装の流れをステップごとに解説いたします。バックエンド（ライセンスサーバーの構築・運用）については概念の紹介に留め、まずはブラウザ側の仕組みを理解することを目標とします。初めてDRM配信をされるエンジニアの方に、ぜひ参考にしていただければ幸いです。
DRMとは？ブラウザでのコンテンツ保護の仕組み
なぜDRM対応が必要なのか
DRM（Digital Rights Management）とは、デジタルコンテンツを不正なコピーから保護するための技術です。映画・スポーツ・ライブ配信など、権利保護が求められる映像コンテンツを配信する場合、著作権者や配信プラットフォームとの契約上、DRM対応が必須条件となるケースが多くあります。
NetflixやAmazon Prime Video、Disney+などの大手サービスでもDRMは採用されており、現在のインターネット動画配信においては事実上の標準技術といえます。
DRMについて、もう少し詳しく知りたい方は以下の記事を参照ください。
DRMコンテンツ再生の流れ
ブラウザでDRMコンテンツを再生する際には、以下の流れで処理が行われます。
再生ページを表示した際に、コンテンツを読み込みます。その際、プレイヤーがDRMコンテンツを読み込み、DRMの設定に基づき再生のための処理を行います。次にDRM暗号化されたコンテンツを復号するために「ライセンス」と呼ばれるものをリクエストします。無事にライセンスが取得できたら、DRMコンテンツが再生できます。
主要な3つのDRMシステム
ブラウザ向けのDRMには、主に以下の3種類があります。
| DRMシステム | 開発元 | 主な対応ブラウザ・環境 |
|---|---|---|
| Widevine | Chrome、Firefox、Edge（Chromiumベース）、Android | |
| PlayReady | Microsoft | Edge、Xbox |
| FairPlay Streaming | Apple | Safari（macOS・iOS） |
現在の主要ブラウザをカバーするためには、この3種類すべてに対応した「マルチDRM」での実装が一般的です。Shaka Playerはこれら3種類のDRMすべてに対応しており、マルチDRM環境の構築に適したプレイヤーです。
Shaka PlayerでDRMコンテンツ再生を実現する
皆様の中には、「なぜ わざわざ動画プレイヤーライブラリを使う必要があるのか」と思われる方もいらっしゃるかと思います。確かに、<video>タグを用いれば、MP4などはそのまま再生が可能です。しかし、動画配信において、特にDRMの処理をする場合は、HTML5のデフォルトの機能でカバーし切れない複雑な処理が多々必要となり、それらを一から ご自身で実装されるのは現実的ではありません。
世の中にある種々の動画プレイヤーライブラリは、それらの複雑な処理を開発者が簡単に実装できるようにしてくれているため、簡便で高品質な動画配信サービスを実現するためには これら動画プレイヤーライブラリを使用されるのが良いです。Shaka Playerは、その中でも無料で利用できるオープンソースの動画プレイヤーライブラリであり、信頼性も高いためオススメのHTML5プレイヤーの一つです。
Shaka Playerとは
Shaka Playerは、Googleが開発しているオープンソースのHTML5向けの動画プレイヤーライブラリです。JavaScriptで実装されており、追加のプラグインなしでブラウザ上で高機能な動画再生が可能です。Shaka Playerはオープンソースとして公開されており、GitHubから無料で取得できます。
公式リポジトリ：https://github.com/shaka-project/shaka-player
Shaka Playerを商用利用するにあたっての注意点
Shaka Playerのライセンスについて
Shaka Playerは無料で商用利用することは可能ですが、ライセンスは『Apache License 2.0』となります。動画配信サービスのWebサイトのソースコードにShaka Playerを同梱すると想定した場合、次の義務が発生いたします。
- Shaka Playerを利用していることをサービスのどこかに明示しておく
- Shaka Playerの著作権・帰属表示、MIT由来表示、免責条項を削除していないことを確認
- Shaka Player本体のソースコードを改変した場合、その旨を明示しておく
など
その他詳細についてはShaka Playerのライセンスを ご確認ください。
Shaka Playerのライセンスについて：https://github.com/shaka-project/shaka-player/blob/main/LICENSE
オープンソースのサポートについて
オープンソースである点が挙げられます。ご存じの方は良いのですが、オープンソースの場合はプレイヤーで発生した問題は自分で解決しなければならないため、技術力はある程度必要となります。ですが、無料で使える上に信頼性も高いため、多くのサービスで利用されている人気のプレイヤーです。
では、どのようにShaka PlayerでDRM再生部分を実装するのか、見ていきましょう。
基本的なセットアップ
Shaka Playerの初期化は、HTMLの<video>タグとJavaScriptで行います。まずHTMLにプレイヤーライブラリを読み込み、<video>要素を配置します。実装のポイントとして、<video>要素にはidを付与し、JavaScript側から参照できるようにします。Shaka PlayerはネイティブのHTMLVideoElementをラップして動作するため、特別なカスタム要素は不要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>sample</title>
<script src="<shaka player source path>"></script>
</head>
<body>
<!-- Video要素 -->
<div style="text-align: center;">
<video id="video" width="640" controls autoplay muted></video>
</div>
<!-- Shaka PlayerのJavaScript実装 -->
<script type="text/javascript">
// ～後述～ //
</script>
</body>
</html>JavaScriptの実装
次にJavaScriptの実装を見ていきましょう。コードは以下のようになりますが、一番重要な「プレイヤーの初期化設定（function initPlayer()）」の部分について解説していきます。
<!-- Shaka PlayerのJavaScript実装 -->
<script type="text/javascript">
// DRMコンテンツURL
const contents_url = "<contents url>";
// プレイヤーの起動
function initApp() {
shaka.polyfill.installAll();
shaka.polyfill.PatchedMediaKeysApple.install();
if (shaka.Player.isBrowserSupported()) {
initPlayer();
} else {
console.error("browswer not support.");
}
}
// プレイヤーの初期化設定
function initPlayer() {
// "video"は<video>タグで設定した"id"
const video = document.getElementById("video");
const player = new shaka.Player(video);
try {
// プレイヤーの設定
player.configure({
drm: {
servers: {
"com.widevine.alpha": "<widevine license server url>",
"com.microsoft.playready": "<playready license server url>",
"com.apple.fps": "<fps license server url>",
},
advanced: {
"com.apple.fps": {
serverCertificateUri: "<fps certificate url>",
},
},
initDataTransform: initDataTransform,
},
});
player.addEventListener('error', onErrorEvent);
// プレイヤーのロード
player.load(contents_url)
.then(function() { console.log("loaded."); })
.catch(function (error) { onError(error); });
} catch (e) {
onError(e);
}
}
// FairPlay Streaming向けの特殊処理
function initDataTransform(initData, initDataType, drmInfo) {
if (initDataType != "skd") {
return initData;
}
const skdUri = shaka.util.StringUtils.fromBytesAutoDetect(initData);
const contentId = skdUri.substring(6);
const cert = drmInfo.serverCertificate;
return shaka.util.FairPlayUtils.initDataTransform(initData, contentId, cert);
}
function onErrorEvent(event) {
onError(event.detail);
}
function onError(error) {
console.error("Error code", error.code, "object", error);
}
document.addEventListener("DOMContentLoaded", initApp);
</script>initPlayer()では、Shaka Playerの初期化設定を行っています。player.configureの引数のdrmに注目してみると、主にURLを設定していることが分かります。前述したDRM動画再生の流れ、の箇所にあるように、DRMコンテンツ再生の際にライセンスをリクエストしますので、drm.serversの部分にライセンスリクエスト先のURLを記載いたします。
drm.advancedの箇所を見ますと、FairPlay Streaming（FPS）のみ、もう一つ別のURLを設定しています。こちらは、FPSの仕組みとして、ライセンスを他人などに読み取られないように保護するための証明書を取得するためのものです。Widevineも同じく証明書を取得し、ライセンスを保護する仕組みがございますが、同じライセンスリクエストURLに対して行いますので、URLは１つのみとなります。PlayReadyは仕組みとして、デバイスに内蔵された証明書を使用するため関係はありません。
JavaScriptの実装部分としては、基本的に以上となり、もう一つfunction initDataTransform()がありますが、こちらはFPS向けの特殊処理となり説明は長くなりますので、ここでは とりあえず おまじないとしておいてください。また、ライセンスリクエストにヘッダーをつけたり、リクエストボディをカスタムしたい場合は、Shaka Playerの機能を使用して実現することも可能ですが、ここでは詳細は省きます。
さいごに
本記事では、Shaka PlayerによるDRMコンテンツ配信のフロントエンド実装の流れを解説しました。DRMコンテンツを再生するためには様々な処理が必要となりますが、Shaka Playerは その複雑な処理を開発者にとって扱いやすい形に抽象化してくれるライブラリです。
DRM対応を本格的に進めるにあたり、フロントエンドの実装と合わせてバックエンド側の実装も必要となります。DRMは最初のハードルが高く感じられますが、基本的な流れを理解すれば着実に実装を進められます。本記事がその第一歩になれば幸いです。
また、弊社の『Multi DRM Kit』はサポートが充実しており、実際に動作確認できるサンプルコードも用意されています。Shaka Playerとの連携例も含まれているため、実装イメージをつかむ際の参考となるかと思いますので、是非とも ご検討ください。
導入が簡単で信頼性の高いマルチDRMサービス
DRMが初めての方でも動画配信が初めての方でもお気軽にお問い合わせください。