Content certification

Available in Classic and VPC

It explains how to apply Secure Token to the playback source and configure One Click Multi DRM.

Secure Token

Using the token option, apply Secure Token to the playback source.

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

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

  // Token replacement
  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://CDNdomain/example_video_01.mp4" },
          ],
          token: "token=st=...~exp=...~acl=...", // Secure Token
        }}
      />
      <button onClick={handleTokenChange}>Token replacement</button>
    </>
  );
}

One Click Multi DRM

Use this playlist.drm object to configure 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 endpoint

You can apply DRM by integrating the Video Player Enhancement service with the One Click Multi DRM service. FairPlay requires generating both an FPS certificate and a license signature separately.

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 test

DRM testing is conducted using ncplayerDRM() instead of the default execution script.

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