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 정보를 받아온 뒤 플레이어 옵션으로 전달합니다.

"use client";

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import { useEffect, useState } from "react";

export default function OneClickMultiDrmExample() {
  const [options, setOptions] = useState<any>(null);

  useEffect(() => {
    fetch("https://vpe-api.sgrsoft.com/api/drmTest")
      .then((res) => res.json())
      .then((data) => setOptions(data));
  }, []);

  if (!options) {
    return <div className="text-sm text-neutral-500">DRM 옵션 로딩 중...</div>;
  }

  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      options={options}
    />
  );
}

Ncloud DRM Helper 설치

npm i vpe-drm-helper

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

Ncloud DRM Server 구현

import express from 'express';
import vpeDrmHelper from '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}'); // ACCESS KEY, SECRET KEY 설정

// DRM 소스를 생성하는 API 엔드포인트
app.get('/drm-source', (req, res) => {
  const drmSource = NDRM.drmSourceHelper({
    dash: '{DASH 재생소스}',
    hls: '{HLS 재생소스}',
  }, '{contentId}'); // contentId 필수, VOD Station / LIVE Station에서 확인 및 설정 가능

  res.json(drmSource);
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

• 이 코드는 Express.js를 사용하여 간단한 서버를 설정하고 /drm-source 경로에서 DRM 소스를 생성하여 반환하는 API를 제공합니다.
• accessKey, secretKey, SITEID, DASH 재생 소스, HLS 재생 소스, contentId는 실제 값으로 대체해야 합니다.
• 이 서버를 실행하려면 Node.js와 npm이 설치되어 있어야 하며, vpe-drm-helper 패키지를 설치해야 합니다.

응답 JSON 구조

{
  "playlist": [
    {
      "drm": {
        "com.widevine.alpha": {
          "src": "https://8kmgeiox5271.edge.naverncp.com/dash/~Mm2B8LV1K~dMoZUnpjc4g__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_FHD_2Pass_30fps.mp4/manifest.mpd",
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "ow6caa/GO5/39BVtec1cnh3px0PFUX1OJWHi8D+/nNA=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiV0lERVZJTkUiLCJyZXNwb25zZUZvcm1hdCI6Im9yaWdpbmFsIiwidXNlcklkIjoidGVzdC11c2VyIn0="
          }
        },
        "com.microsoft.playready": {
          "src": "https://8kmgeiox5271.edge.naverncp.com/dash/~Mm2B8LV1K~dMoZUnpjc4g__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_FHD_2Pass_30fps.mp4/manifest.mpd",
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "ow6caa/GO5/39BVtec1cnh3px0PFUX1OJWHi8D+/nNA=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiUExBWVJFQURZIiwicmVzcG9uc2VGb3JtYXQiOiJvcmlnaW5hbCIsInVzZXJJZCI6InRlc3QtdXNlciJ9"
          }
        },
        "com.apple.fps": {
          "src": "https://8kmgeiox5271.edge.naverncp.com/hls/~Mm2B8LV1K~dMoZUnpjc4g__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_FHD_2Pass_30fps.mp4/index.m3u8",
          "certificateUri": "https://multi-drm.apigw.ntruss.com/api/v1/license/fairPlay",
          "certificateRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "PT8KABJiB0YAzIwfbVyDmJYloQfeCCQ8l51MkmB+9t0=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiRkFJUlBMQVkiLCJyZXNwb25zZUZvcm1hdCI6Im9yaWdpbmFsIiwidXNlcklkIjoidGVzdC11c2VyIn0=",
            "accept": "application/json"
          },
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "ow6caa/GO5/39BVtec1cnh3px0PFUX1OJWHi8D+/nNA=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiRkFJUlBMQVkiLCJyZXNwb25zZUZvcm1hdCI6Im9yaWdpbmFsIiwidXNlcklkIjoidGVzdC11c2VyIn0="
          }
        }
      },
      "poster": "https://2ardrvaj2252.edge.naverncp.com/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_01.jpg",
      "description": {
        "title": "네이버클라우드 테스트 영상",
        "created_at": "2024.07.13",
        "profile_name": "네이버클라우드",
        "profile_image": "https://player.vpe.naverncp.com/images/d127c8db642716d84b3201f1d152e52a.png"
      }
    }
  ],
  "aspectRatio": "16/9",
  "autostart": true,
  "muted": true
}

PallyCon DRM 연동

PallyCon DRM 연동을 빠르게 검증할 수 있는 테스트 엔드포인트를 제공합니다. 별도의 DRM 라이선스 발급 없이 Widevine, FairPlay, PlayReady를 즉시 테스트할 수 있습니다.

테스트 엔드포인트

아래 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이 자동으로 선택됩니다.

import { useEffect, useState } from "react";
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

const DRM_API = "https://vpe-api.sgrsoft.com/api/drmTestPallycon";

export function App() {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    fetch(DRM_API)
      .then((res) => res.json())
      .then((data) => setOptions(data));
  }, []);

  if (!options) return <div>DRM 설정 로딩 중...</div>;

  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={options}
    />
  );
}

정적 옵션으로 직접 설정

API 호출 없이 DRM 옵션을 코드에 직접 작성할 수도 있습니다.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        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,
      }}
    />
  );
}

DRM 유형별 브라우저 지원