콘텐츠 인증

The latest service changes have not yet been reflected in this content. We will update the content as soon as possible. Please refer to the Korean version for information on the latest updates.

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