---
title: "DRM の適用"
slug: "vpe-umd-drm"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
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の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) |