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 적용

Prev Next
This content is currently unavailable in English. You are viewing the default (Korean) version.

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)
Business Registration Number: 129-86-31394 E-commerce Permit Number:No. 2009-GyeonggiSeongnam-0510
CEO: Kim Yuwon Address: NAVER Green Factory 17th–26th Floors, Buljeong-ro 6, Bundang-gu, Seongnam-si, Gyeonggi-do 13561, Republic of Korea. Customer Support Number: 1544-5876
© NAVER Cloud Corp. All Rights Reserved.