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.

<div id="video1"></div>

<script>
document.addEventListener("DOMContentLoaded", async function() {
  const res = await fetch("https://vpe-api.sgrsoft.com/api/drmTest");
  const options = await res.json();

  await ncplayerDRM("video1", options);
});
</script>

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

const express = require("express");
const vpeDrmHelper = require("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}");

// API endpoint for generating DRM playback sources
app.get("/drm-source", function(req, res) {
  const drmSource = NDRM.drmSourceHelper(
    {
      dash: "{DASH playback source}",
      hls: "{HLS playback source}",
    },
    "{contentId}" // contentId required
  );

  res.json(drmSource);
});

app.listen(port, function() {
  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.

Integrate with the UMD client

Retrieve the DRM playback source from the backend API and pass it to the player.

<div id="video1"></div>

<script>
document.addEventListener("DOMContentLoaded", async function() {
  // Retrieve the DRM playback source from the backend API
  const res = await fetch("/drm-source");
  const drmSource = await res.json();

  // Create the DRM player
  await ncplayerDRM("video1", {
    playlist: [drmSource],
    aspectRatio: "16/9",
    autostart: true,
    muted: true,
  });
});
</script>

Response JSON structure

The DRM Helper generates the playback source JSON. Each DRM type includes a playback source URL, a license URL, and authentication headers.

{
  "playlist": [
    {
      "drm": {
        "com.widevine.alpha": {
          "src": "https://example.edge.naverncp.com/dash/.../manifest.mpd",
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "...",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "...",
            "x-drm-token": "..."
          }
        },
        "com.microsoft.playready": {
          "src": "https://example.edge.naverncp.com/dash/.../manifest.mpd",
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": { ... }
        },
        "com.apple.fps": {
          "src": "https://example.edge.naverncp.com/hls/.../index.m3u8",
          "certificateUri": "https://multi-drm.apigw.ntruss.com/api/v1/license/fairPlay",
          "certificateRequestHeader": { ... },
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": { ... }
        }
      },
      "poster": "https://example.com/poster.jpg"
    }
  ],
  "aspectRatio": "16/9",
  "autostart": true,
  "muted": true
}

Full HTML example (backend Integration)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VPE Player - One Click Multi DRM</title>

  <!-- Load hls.js/dash.js before the VPE script -->
  <script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
  <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
  <div id="video1" style="max-width: 800px; margin: 0 auto;"></div>

  <script>
    document.addEventListener("DOMContentLoaded", async function() {
      // Retrieve the DRM playback source from the backend API
      const res = await fetch("/drm-source");
      const options = await res.json();

      // ncplayerDRM: DRM-specific asynchronous creation function
      await ncplayerDRM("video1", options);
    });
  </script>
</body>
</html>

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.

<div id="video1"></div>

<script>
var DRM_API = "https://vpe-api.sgrsoft.com/api/drmTestPallycon";

document.addEventListener("DOMContentLoaded", async function() {
  var res = await fetch(DRM_API);
  var options = await res.json();

  await ncplayerDRM("video1", options);
});
</script>

Configure manually using static options

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

<div id="video1"></div>

<script>
document.addEventListener("DOMContentLoaded", async function() {
  await ncplayerDRM("video1", {
    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,
  });
});
</script>

Full HTML example (test endpoint)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VPE player - PallyCon DRM test</title>

  <!-- Load hls.js/dash.js before the VPE script -->
  <script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
  <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
  <div id="video1" style="max-width: 800px; margin: 0 auto;"></div>

  <script>
    document.addEventListener("DOMContentLoaded", async function() {
      var res = await fetch("https://vpe-api.sgrsoft.com/api/drmTestPallycon");
      var options = await res.json();

      await ncplayerDRM("video1", options);
    });
  </script>
</body>
</html>

Browser support by DRM type