Applying DRM

Available in Classic and VPC

It explains how to use NAVER Cloud Platform's One Click Multi DRM in the TV SDK to configure Widevine (Android TV) and FairPlay (tvOS) all at once, as well as how to test PallyCon DRM.

One Click Multi DRM

One Click Multi DRM is a multi-DRM feature for configuring Widevine and FairPlay simultaneously. To integrate with the TV SDK:

How it works

The TV SDK uses the Native video engine (ExoPlayer/AVPlayer) to play HLS and DASH streams directly. The SDK automatically selects Widevine on Android TV or FairPlay on tvOS based on the platform.

NAVER Cloud Platform One Click Multi DRM example

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

import React, { useEffect, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { VpePlayer } from '@sgrsoft/vpe-reactnative-tv-sdk';

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 <View style={styles.container} />;
    }

    return (
        <View style={styles.container}>
            <VpePlayer
                accessKey="YOUR_ACCESS_KEY"
                options={options}
                onBack={() => { /* navigation.goBack() */ }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#000' },
});

Install Ncloud DRM Helper (backend)

npm i vpe-drm-helper

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

Implement Ncloud DRM Server (backend)

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

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

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

NDRM.setUserId('test-user');
NDRM.setSiteId('{SITEID}');
NDRM.setApiKey('{Ncloud API accessKey}', '{Ncloud API secretKey}');

app.get('/drm-source', (req, res) => {
    const drmSource = NDRM.drmSourceHelper({
        dash: '{DASH playback source}',
        hls: '{HLS playback source}',
    }, '{contentId}');

    res.json(drmSource);
});

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

Response JSON structure

The JSON returned by the DRM Helper includes Widevine, PlayReady, and FairPlay keys. The TV SDK automatically selects the appropriate DRM for the platform.

{
  "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": { ... }
        },
        "com.apple.fps": {
          "src": "https://example.edge.naverncp.com/hls/.../index.m3u8",
          "certificateUri": "https://multi-drm.apigw.ntruss.com/api/v1/license/fairPlay",
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": { ... }
        }
      },
      "poster": "https://example.com/poster.jpg",
      "description": {
        "title": "DRM-protected video",
        "created_at": "2024.07.13"
      }
    }
  ],
  "autostart": true
}

Token renewal

You can refresh the DRM token during playback with the ref method.

const playerRef = useRef<PlayerHandle>(null);

// Token renewal during playback
playerRef.current?.tokenChange('NEW_TOKEN_VALUE');

Test PallyCon DRM

Use the test endpoint to quickly verify your PallyCon DRM integration with the TV SDK. You can immediately test Widevine on Android TV and FairPlay on tvOS without issuing separate DRM licenses.

Test endpoint

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

Integrate with player

Pass the endpoint response directly to the player as configuration options to start DRM playback.

import React, { useEffect, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { VpePlayer } from '@sgrsoft/vpe-reactnative-tv-sdk';

const DRM_API = 'https://vpe-api.sgrsoft.com/api/drmTestPallycon';

export default function PallyconDrmTest() {
    const [options, setOptions] = useState<any>(null);

    useEffect(() => {
        fetch(DRM_API)
            .then((res) => res.json())
            .then((data) => setOptions(data));
    }, []);

    if (!options) {
        return <View style={styles.container} />;
    }

    return (
        <View style={styles.container}>
            <VpePlayer
                accessKey="YOUR_ACCESS_KEY"
                options={options}
                onBack={() => { /* navigation.goBack() */ }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#000' },
});

TV platform support by DRM type

The following table shows the protocols and supported platforms for each DRM type.