DRM 적용

Classic/VPC 환경에서 이용 가능합니다.

네이버 클라우드 플랫폼의 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)를 선택합니다.

네이버 클라우드 플랫폼 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 유형별 프로토콜과 지원 플랫폼은 다음과 같습니다.