Applying DRM

Available in Classic and VPC

It describes the 2 integration methods: One Click Multi DRM and PallyCon DRM.

Integrate with One Click Multi DRM

With NAVER Cloud Platform's One Click Multi DRM, you can configure Widevine, PlayReady, and FairPlay all at once. The following example demonstrates how to inject options by calling the DRM test API.

Integrate with the DRM test API

Call the https://vpe-api.sgrsoft.com/api/drmTest endpoint to retrieve the DRM information, and then pass it to the player as options.

"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">Loading DRM options...</div>;
  }

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

Install Ncloud DRM Helper

npm i vpe-drm-helper

• Ncloud DRM Helper is used to generate DRM playback sources.
• Use an Ncloud API key.
• Create and use a dedicated API key for DRM with an Ncloud Sub Account.
• Always generate playback sources on the backend.

Implement Ncloud DRM Server

import express from 'express';
import vpeDrmHelper from 'vpe-drm-helper';

const app = express();
const port = 3000;

// Configure the DRM Helper
const NDRM = new vpeDrmHelper();
NDRM.isGov = false; // Set whether to use the government cloud (default: false)

NDRM.setUserId('test-user');                                        // Viewer ID
NDRM.setSiteId('{SITEID}');                                         // One Click Multi DRM site ID setting
NDRM.setApiKey('{Ncloud API accessKey}', '{Ncloud API secretKey}'); // Access key and secret key settings

// API endpoint for generating DRM playback sources
app.get('/drm-source', (req, res) => {
  const drmSource = NDRM.drmSourceHelper({
    dash: '{DASH playback source}',
    hls: '{HLS playback source}',
  }, '{contentId}'); // contentId required, view or configure this value in VOD Station or Live Station

  res.json(drmSource);
});

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

• This code uses Express.js to create a simple server and provides an API that generates and returns a DRM playback source at the /drm-source path.
• accessKey, secretKey, SITEID, DASH playback source, HLS playback source, and contentId should be replaced with your actual values.
• To run this server, install Node.js and npm, and then install the vpe-drm-helper package.

Response JSON structure

{
  "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": "NAVER Cloud test video",
        "created_at": "2024.07.13",
        "profile_name": "NAVER Cloud",
        "profile_image": "https://player.vpe.naverncp.com/images/d127c8db642716d84b3201f1d152e52a.png"
      }
    }
  ],
  "aspectRatio": "16/9",
  "autostart": true,
  "muted": true
}

Integrate with PallyCon DRM

Use the test endpoint to quickly verify your PallyCon DRM integration. You can immediately test Widevine, FairPlay, and PlayReady without issuing separate DRM licenses.

Test endpoint

Call the following APIs to receive player option JSON configured for Widevine, FairPlay, and PlayReady DRM.

GET https://vpe-api.sgrsoft.com/api/drmTestPallycon

Response example

{
  "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 test video",
        "created_at": "2024.07.13"
      }
    }
  ],
  "aspectRatio": "16/9",
  "autostart": true,
  "muted": true
}

Integrate with player

Pass the endpoint response directly to the player as configuration options to start DRM playback. Your browser automatically selects the appropriate DRM—Widevine for Chrome and Firefox, FairPlay for Safari, or PlayReady for Edge.

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>Loading DRM settings...</div>;

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

Configure manually using static options

You can also embed DRM options directly into your code without making API calls.

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 test video",
              created_at: "2024.07.13",
            },
          },
        ],
        aspectRatio: "16/9",
        autostart: true,
        muted: true,
      }}
    />
  );
}

Browser support by DRM type