One Click Multi DRM

Naver Cloud Platform의 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>

[Backend] Ncloud DRM Helper 설치

npm i vpe-drm-helper

Ncloud DRM Helper는 DRM 재생소스를 생성하는데 사용됩니다.
Ncloud API Key가 사용됩니다.
Ncloud Sub Account를 사용하여 DRM 전용 API Key를 생성하여 사용합니다.
재생소스 생성 작업은 반드시 Backend에서 처리해야 합니다.

[Backend] 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>
    <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>