---
title: "DRM 적용"
slug: "vpe-umd-drm"
updated: 2026-09-17T09:08:03Z
published: 2026-09-17T09:08:03Z
canonical: "guide.ncloud-docs.com/vpe-umd-drm"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DRM 적용

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) |