DRM の適用

Classic/VPC環境で利用できます。

NAVERクラウドプラットフォームの One Click Multi DRMを TV SDKで利用し、Widevine(Android TV)と FairPlay(tvOS)を一度に設定する方法、および PallyCon DRMのテスト方法をご案内します。

One Click Multi DRM

One Click Multi DRMは、Widevineと FairPlayを一度に設定できるマルチ DRM機能です。TV SDKとの連携方法は、次の通りです。

動作原理

TV SDKは、**ネイティブビデオエンジン(ExoPlayer/AVPlayer)**を使用して HLS/DASHを直接再生します。SDKはプラットフォームに応じて自動的に Widevine(Android TV)または FairPlay(tvOS)を選択します。

NAVERクラウドプラットフォーム One Click Multi DRMのユースケース

https://vpe-api.sgrsoft.com/api/drmTest エンドポイントを呼び出して DRM情報を取得した後、プレイヤーのオプションに渡します。

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' },
});

Ncloud DRM Helperのインストール(バックエンド)

npm i vpe-drm-helper

• Ncloud DRM Helperは、DRM再生ソースを作成するために使用されます。
• Ncloud API Keyが使用されます。
• Ncloud Sub Accountを使用して、DRM専用 API Keyを作成・使用します。
• 再生ソースの作成タスクは、必ずバックエンドで行う必要があります。

Ncloud DRM Serverの実装(バックエンド)

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

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

const NDRM = new vpeDrmHelper();
NDRM.isGov = false; // 公共官公庁向けクラウドプラットフォームの使用有無を設定(デフォルト値: 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再生ソース}',
        hls: '{HLS再生ソース}',
    }, '{contentId}');

    res.json(drmSource);
});

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

レスポンスの JSON構造

DRM Helperが返す JSONには、Widevine、PlayReady、FairPlayの各キーがすべて含まれています。TV SDKは、プラットフォームに応じて自動的に適切な DRMを選択します。

{
  "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保護動画",
        "created_at": "2024.07.13"
      }
    }
  ],
  "autostart": true
}

トークンの更新

再生中に DRMトークンの有効期限が切れた場合は、refメソッドを使用して更新できます。

const playerRef = useRef<PlayerHandle>(null);

// 再生中のトークンを更新
playerRef.current?.tokenChange('NEW_TOKEN_VALUE');

PallyCon DRMテスト

PallyCon DRMとの連携を TV SDKで迅速に検証できるテストエンドポイントを提供します。別途の DRMライセンスを発行することなく、Widevine(Android TV)と FairPlay(tvOS)をすぐにテストできます。

テストエンドポイント

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

プレイヤー連携

エンドポイントから受け取ったレスポンスをそのままプレイヤーのオプションに渡すと、DRM再生が開始されます。

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' },
});

DRMタイプ別 TVプラットフォームのサポート

DRMタイプ別プロトコルとサポートプラットフォームは、次の通りです。