콘텐츠 인증

Classic/VPC 환경에서 이용 가능합니다.

재생 소스에 Secure Token을 적용하고 One Click Multi DRM을 설정하는 방법을 설명합니다.

Secure Token

token 옵션으로 재생 소스에 Secure Token을 적용합니다.

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

// 동영상(MP4)
export function App() {
  const playerRef = useRef<PlayerHandle>(null);

  // 토큰 교체
  const handleTokenChange = () => {
    playerRef.current?.tokenChange("token=st=...~exp=...~acl=...");
  };

  return (
    <>
      <VpePlayer
        ref={playerRef}
        accessKey="YOUR_ACCESS_KEY"
        hls={Hls}
        dashjs={dashjs}
        platform="pub"
        options={{
          autostart: true,
          playlist: [
            { file: "https://CDN도메인/example_video_01.mp4" },
          ],
          token: "token=st=...~exp=...~acl=...", // Secure Token
        }}
      />
      <button onClick={handleTokenChange}>토큰 교체</button>
    </>
  );
}

One Click Multi DRM

playlist.drm 객체로 Multi 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": {
                certificateUrl: "{Certificate URL}",
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "Content-type": "application/x-www-form-urlencoded",
                  "pallycon-customdata-v2": "{FairPlay Token}",
                },
                src: "{hls url}",
              },
              "com.widevine.alpha": {
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{Widevine Token}",
                },
                src: "{dash url}",
              },
              "com.microsoft.playready": {
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{PlayReady Token}",
                },
                src: "{dash url}",
              },
            },
            poster: "https://example.com/poster.png",
          },
        ],
        autostart: false,
      }}
    />
  );
}

API 엔드포인트

Video Player Enhancement 서비스와 One Click Multi DRM 서비스를 연동하여 DRM을 적용할 수 있습니다. FairPlay는 FPS Certificate와 라이선스 서명을 각각 생성해야 합니다.

FPS Certificate Endpoint
GET https://multi-drm.apigw.ntruss.com/api/v1/license/fairplay

License Endpoint (FairPlay/Widevine/PlayReady)
POST https://multi-drm.apigw.ntruss.com/api/v1/license

DRM 테스트

DRM 테스트는 기본 실행 스크립트가 아닌 ncplayerDRM()으로 진행합니다.

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: {
              // DRM 설정
            },
          },
        ],
      }}
    />
  );
}