콘텐츠 인증

Classic/VPC 환경에서 이용 가능합니다. 콘텐츠 인증은 재생 소스에 Secure Token을 적용하고 MultiDRM을 설정하는 방법을 다룹니다.

Secure Token

token으로 재생 소스에 Secure Token을 적용하고, 재생 중에는 tokenChange로 토큰을 교체할 수 있습니다.

import { useRef } from "react";
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";

// 동영상(MP4)
export function App() {
    const playerRef = useRef<PlayerHandle>(null);

    // 토큰 교체
    const handleTokenChange = () => {
        playerRef.current?.tokenChange("token=st=...~exp=...~acl=...");
    };

    return (
        <>
            <VpePlayer
                ref={playerRef}
                accessKey="YOUR_ACCESS_KEY"
                hls={Hls}
                dashjs={dashjs}
                platform="pub"
                options={{
                    autostart: true,
                    playlist: [
                        { file: "https://CDN도메인/example_video_01.mp4" },
                    ],
                    token: "token=st=...~exp=...~acl=...", // Secure Token
                }}
            />
            <button onClick={handleTokenChange}>토큰 교체</button>
        </>
    );
}

MultiDRM

playlist.drm으로 MultiDRM을 설정합니다.

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": {
                                certificateUrl: "{Certificate URL}",
                                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                                licenseRequestHeader: {
                                    "Content-type": "application/x-www-form-urlencoded",
                                    "pallycon-customdata-v2": "{FairPlay Token}",
                                },
                                src: "{hls url}",
                            },
                            "com.widevine.alpha": {
                                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                                licenseRequestHeader: {
                                    "pallycon-customdata-v2": "{Widevine Token}",
                                },
                                src: "{dash url}",
                            },
                            "com.microsoft.playready": {
                                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                                licenseRequestHeader: {
                                    "pallycon-customdata-v2": "{PlayReady Token}",
                                },
                                src: "{dash url}",
                            },
                        },
                        poster: "https://example.com/poster.png",
                    },
                ],
                autostart: false,
            }}
        />
    );
}

참고: HLS/DASH 두 채널 구성, HTTPS 환경, Widevine/PlayReady/FairPlay 지원, 그리고 외부 DRM 공급사 계약이 필요합니다.

One Click Multi DRM

VPE와 One Click Multi DRM을 연동해 DRM을 적용할 수 있습니다. FairPlay는 FPS Certificate와 라이선스 서명을 각각 생성해야 합니다.

FPS Certificate Endpoint
GET https://multi-drm.apigw.ntruss.com/api/v1/license/fairplay

License Endpoint (FairPlay/Widevine/PlayReady)
POST https://multi-drm.apigw.ntruss.com/api/v1/license

DRM 테스트

DRM 테스트는 기본 실행 스크립트가 아닌 ncplayerDRM()으로 진행합니다.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// React에서는 DRM 설정을 options.playlist.drm에 직접 전달합니다.
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                playlist: [
                    {
                        drm: {
                            // DRM 설정
                        },
                    },
                ],
            }}
        />
    );
}