Classic/VPC 환경에서 이용 가능합니다.
One Click Multi DRM과 PallyCon DRM 두 가지 연동 방식을 설명합니다.
One Click Multi DRM 연동
네이버 클라우드 플랫폼의 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"); // 시청자 아이디
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) |