Classic/VPC環境で利用できます。
One Click Multi DRMと PallyCon DRMの2つの連携方法について説明します。
One Click Multi DRM連携
NAVERクラウドプラットフォームの One Click Multi DRMを使用することで、Widevine、PlayReady、FairPlayを一度に構成できます。以下のユースケースは、DRMテスト APIを呼び出してオプションを組み込む方法です。
DRMテスト API連携
https://vpe-api.sgrsoft.com/api/drmTest エンドポイントを呼び出して DRM情報を取得した後、プレイヤーのオプションに渡します。
参考
UMD環境での DRM再生時には、ncplayerDRM() 非同期関数を使用します。一般 new ncplayer() の代わりに使用することで、DRMライブラリが自動的にロードされます。
<div id="video1"></div>
<script>
document.addEventListener("DOMContentLoaded", async function() {
const res = await fetch("https://vpe-api.sgrsoft.com/api/drmTest");
const options = await res.json();
await ncplayerDRM("video1", options);
});
</script>
Ncloud DRM Helperのインストール
npm i vpe-drm-helper
- Ncloud DRM Helperは、DRM再生ソースを作成するために使用されます。
- Ncloud APIキーが使用されます。
- Ncloud Sub Accountを使用して、DRM専用 APIキーを作成・使用します。
- 再生ソースの作成タスクは、必ずバックエンドで行う必要があります。
Ncloud DRM Serverの実装
const express = require("express");
const vpeDrmHelper = require("vpe-drm-helper");
const app = express();
const port = 3000;
// DRM Helper設定
const NDRM = new vpeDrmHelper();
NDRM.isGov = false; // 公共官公庁向けクラウドプラットフォームの使用有無を設定(デフォルト値: false)
NDRM.setUserId("test-user"); // 視聴者 ID
NDRM.setSiteId("{SITEID}"); // One Click Multi DRM Site IDを設定
NDRM.setApiKey("{Ncloud API accessKey}", "{Ncloud API secretKey}");
// DRMソースを作成する APIエンドポイント
app.get("/drm-source", function(req, res) {
const drmSource = NDRM.drmSourceHelper(
{
dash: "{DASH再生ソース}",
hls: "{HLS再生ソース}",
},
"{contentId}" // contentIdが必須
);
res.json(drmSource);
});
app.listen(port, function() {
console.log("Server is running on http://localhost:" + port);
});
- このコードは、Express.jsを使用して簡単なサーバを設定し、
/drm-sourceパスから DRMソースを作成して返す APIを提供します。 accessKey,secretKey,SITEID, DASH再生ソース、HLS再生ソース、contentIdは、実際の値に置き換える必要があります。
注意
{SITEID}/{contentId}は、DRMライセンストークンの作成時に必要です。外部に漏洩しないでください。- APIキーは、DRM権限のみが追加されたキーを使用する必要があります。Master APIキーは絶対に使用しないでください。
UMDクライアント連携
バックエンド APIから DRMソースを取得し、プレイヤーに送信します。
<div id="video1"></div>
<script>
document.addEventListener("DOMContentLoaded", async function() {
// バックエンド APIから DRMソースを照会
const res = await fetch("/drm-source");
const drmSource = await res.json();
// DRMプレイヤーを作成
await ncplayerDRM("video1", {
playlist: [drmSource],
aspectRatio: "16/9",
autostart: true,
muted: true,
});
});
</script>
レスポンスの JSON構造
DRM Helperが作成する再生ソースの JSON構造です。各 DRMタイプごとに、ソース URL、ライセンス URL、認証ヘッダが含まれます。
{
"playlist": [
{
"drm": {
"com.widevine.alpha": {
"src": "https://example.edge.naverncp.com/dash/.../manifest.mpd",
"licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
"licenseRequestHeader": {
"x-ncp-region_code": "KR",
"x-ncp-iam-access-key": "...",
"x-ncp-apigw-timestamp": 1770471614859,
"x-ncp-apigw-signature-v2": "...",
"x-drm-token": "..."
}
},
"com.microsoft.playready": {
"src": "https://example.edge.naverncp.com/dash/.../manifest.mpd",
"licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
"licenseRequestHeader": { ... }
},
"com.apple.fps": {
"src": "https://example.edge.naverncp.com/hls/.../index.m3u8",
"certificateUri": "https://multi-drm.apigw.ntruss.com/api/v1/license/fairPlay",
"certificateRequestHeader": { ... },
"licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
"licenseRequestHeader": { ... }
}
},
"poster": "https://example.com/poster.jpg"
}
],
"aspectRatio": "16/9",
"autostart": true,
"muted": true
}
全 HTMLのユースケース(バックエンド連携)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VPE Player - One Click Multi DRM</title>
<!-- hls.js / dash.jsを VPEスクリプトよりも先にロード -->
<script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
<script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
<script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
<div id="video1" style="max-width: 800px; margin: 0 auto;"></div>
<script>
document.addEventListener("DOMContentLoaded", async function() {
// バックエンド APIから DRMソースを照会
const res = await fetch("/drm-source");
const options = await res.json();
// ncplayerDRM: DRM専用の非同期作成関数
await ncplayerDRM("video1", options);
});
</script>
</body>
</html>
PallyCon DRM連携
PallyCon DRMとの連携を迅速に検証できるテストエンドポイントを提供します。別途の DRMライセンスを発行することなく、Widevine、FairPlay、PlayReadyをすぐにテストできます。
注意
テストエンドポイントは PallyCon DEMO環境を使用しており、本番環境では使用できません。DRMは HTTPS環境でのみ動作します。
テストエンドポイント
以下の APIを呼び出すと、Widevine、FairPlay、PlayReady DRMが設定されたプレイヤーオプションの JSONをレスポンスします。
GET https://vpe-api.sgrsoft.com/api/drmTestPallycon
レスポンス例
{
"playlist": [
{
"drm": {
"com.apple.fps": {
"src": "https://contents.pallycon.com/bunny/hls/master.m3u8",
"certificateUri": "https://license-global.pallycon.com/ri/fpsKeyManager.do?siteId=DEMO",
"licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
"licenseRequestHeader": { ... }
},
"com.widevine.alpha": {
"src": "https://contents.pallycon.com/bunny/stream.mpd",
"licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
"licenseRequestHeader": { ... }
},
"com.microsoft.playready": {
"src": "https://contents.pallycon.com/bunny/stream.mpd",
"licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
"licenseRequestHeader": { ... }
}
},
"description": {
"title": "Pallyconテスト動画",
"created_at": "2024.07.13"
}
}
],
"aspectRatio": "16/9",
"autostart": true,
"muted": true
}
プレイヤー連携
エンドポイントから受け取ったレスポンスをそのままプレイヤーのオプションに渡すと、DRM再生が開始されます。ブラウザに応じて、Widevine(Chrome、Firefox)、FairPlay(Safari)、PlayReady(Edge)の中から適切な DRMが自動的に選択されます。
<div id="video1"></div>
<script>
var DRM_API = "https://vpe-api.sgrsoft.com/api/drmTestPallycon";
document.addEventListener("DOMContentLoaded", async function() {
var res = await fetch(DRM_API);
var options = await res.json();
await ncplayerDRM("video1", options);
});
</script>
静的オプションで直接設定
APIを呼び出さずに、コードに DRMオプションを直接作成することもできます。
<div id="video1"></div>
<script>
document.addEventListener("DOMContentLoaded", async function() {
await ncplayerDRM("video1", {
playlist: [
{
drm: {
"com.apple.fps": {
src: "https://contents.pallycon.com/bunny/hls/master.m3u8",
certificateUri: "https://license-global.pallycon.com/ri/fpsKeyManager.do?siteId=DEMO",
licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
licenseRequestHeader: {
"Content-type": "application/x-www-form-urlencoded",
"pallycon-customdata-v2": "{FairPlay Token}",
},
},
"com.widevine.alpha": {
src: "https://contents.pallycon.com/bunny/stream.mpd",
licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
licenseRequestHeader: {
"pallycon-customdata-v2": "{Widevine Token}",
},
},
"com.microsoft.playready": {
src: "https://contents.pallycon.com/bunny/stream.mpd",
licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
licenseRequestHeader: {
"pallycon-customdata-v2": "{PlayReady Token}",
},
},
},
description: {
title: "Pallyconテスト動画",
created_at: "2024.07.13",
},
},
],
aspectRatio: "16/9",
autostart: true,
muted: true,
});
});
</script>
全 HTMLのユースケース(テストエンドポイント)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VPE Player - PallyCon DRMテスト</title>
<!-- hls.js / dash.jsを VPEスクリプトよりも先にロード -->
<script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
<script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
<script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
<div id="video1" style="max-width: 800px; margin: 0 auto;"></div>
<script>
document.addEventListener("DOMContentLoaded", async function() {
var res = await fetch("https://vpe-api.sgrsoft.com/api/drmTestPallycon");
var options = await res.json();
await ncplayerDRM("video1", options);
});
</script>
</body>
</html>
DRMタイプ別ブラウザのサポート
| DRM | プロトコル | サポートブラウザ |
|---|---|---|
com.widevine.alpha |
DASH | Chrome, Firefox, Edge, Android |
com.apple.fps |
HLS | Safari(macOS, iOS) |
com.microsoft.playready |
DASH | Edge(Chromium) |