DRM 및 콘텐츠 인증

콘텐츠 인증에서는 스크립트 코드를 수정하여 재생 소스에 Secure Token을 적용하는 방법과 Multi DRM을 설정하는 방법을 설명합니다.

AndroidiOS

현재 기능은 실제 기기에서만 동작합니다. (시뮬레이터 X)

Secure Token

token 속성으로 재생 소스에 Secure Token을 적용하여 OneTimeUrl을 지원할 수 있습니다. player.tokenChange 속성으로 동영상 재생 중 중단 없이 Secure Token을 교체할 수 있습니다.

const playerRef = useRef(null);

return (
    <VpePlayer
        ...
        ref={playerRef}
        options={{
            playlist: [
                {
                    file: 'https://CDN도메인/example_video_01.mp4'
                },
            ],
            token: 'token=st=1675320871~exp=1675320901~acl=....', // Secure Token
        }}
        ...
    />
)

// 토큰 업데이트
playerRef.current.tokenChange('token=st=1675320871~exp=1675320901~acl=....') // 재생 중 신규 토큰으로 교체

Multi DRM

playlist.drm 속성으로 Multi DRM을 설정할 수 있습니다.

해당 예제는 Doverunner (PallyCon) DRM 예제 입니다.

FairPlay

const playerRef = useRef(null);

return (
    <VpePlayer
        ...
        ref={playerRef}
        options={{
            playlist: [
                {
                    file: 'https://CDN도메인/example_video_01.m3u8',
                    drm: {
                        type: 'fairplay',
                        licenseServer: 'https://license-global.pallycon.com/ri/licenseManager.do',
                        certificateUrl: '{Certificate URL}',
                        base64Certificate: true,
                        getLicense: async (spc) => {
                            const res = await fetch('https://license-global.pallycon.com/ri/licenseManager.do', {
                                method: 'POST',
                                headers: {
                                    'pallycon-customdata-v2': '{FairPlay용 Token}'
                                },
                                body: spc,
                            });
                            const ckcBase64 = await res.text();
                            return ckcBase64;
                        },
                    },
                }
            ]
        }}
        ...
    />
)

Widevine

const playerRef = useRef(null);

return (
    <VpePlayer
        ...
        ref={playerRef}
        options={{
            playlist: [
                {
                    file: 'https://CDN도메인/example_video_01.mpd',
                    drm: {
                        type: 'widevine',
                        licenseServer: 'https://license-global.pallycon.com/ri/licenseManager.do',
                        getLicense: async (spc) => {
                            const res = await fetch('https://license-global.pallycon.com/ri/licenseManager.do', {
                                method: 'POST',
                                headers: {
                                    'Content-type': 'application/x-www-form-urlencoded',
                                    'pallycon-customdata-v2': '{Widevine용 Token}'
                                },
                                body: spc,
                            });
                            const ckcBase64 = await res.text();
                            return ckcBase64;
                        },
                    },
                }
            ]
        }}
        ...
    />
)

One Click Multi DRM

Video Player Enhancement 서비스와 One Click Multi DRM 서비스를 연동하여 DRM을 적용할 수 있습니다. FPS Certificate 및 라이선스 발급을 요청하기 위한 Endpoint(엔드포인트) 및 요청 헤더를 확인해 주십시오.

FairPlay (One Click Multi DRM)

const playerRef = useRef(null);

return (
    <VpePlayer
        ...
        ref={playerRef}
        options={{
            playlist: [
                {
                    file: 'https://CDN도메인/example_video_01.m3u8',
                    drm: {
                        type: 'fairplay',
                        licenseServer: '{License URL}',
                        certificateUrl: '{Certificate URL}',
                        certificateRequestHeader: {
                            "x-ncp-region_code": "KR",
                            "x-ncp-iam-access-key": accessKey,
                            "x-ncp-apigw-timestamp": timestamp,
                            "x-ncp-apigw-signature-v2": signature,
                            "accept": "application/json"
                        },
                        base64Certificate: true,
                        getLicense: async (spc) => {
                            const res = await fetch('{License URL}', {
                                method: 'POST',
                                headers: {
                                    "x-ncp-region_code": "KR",
                                    "x-ncp-iam-access-key": accessKey,
                                    "x-ncp-apigw-timestamp": timestamp,
                                    "x-ncp-apigw-signature-v2": signature,
                                    "x-drm-token": "{One Click Multi DRM FPS TOKEN}"
                                },
                                body: spc,
                            });
                            const ckcBase64 = await res.text();
                            return ckcBase64;
                        },
                    },
                }
            ]
        }}
        ...
    />
)

Widevine (One Click Multi DRM)

const playerRef = useRef(null);

return (
    <VpePlayer
        ...
        ref={playerRef}
        options={{
            playlist: [
                {
                    file: 'https://CDN도메인/example_video_01.m3u8',
                    drm: {
                        type: 'widevine',
                        licenseServer: '{License URL}',
                        getLicense: async (spc) => {
                            const res = await fetch('{License URL}', {
                                method: 'POST',
                                headers: {
                                    "x-ncp-region_code": "KR",
                                    "x-ncp-iam-access-key": accessKey,
                                    "x-ncp-apigw-timestamp": timestamp,
                                    "x-ncp-apigw-signature-v2": signature,
                                    "x-drm-token": "{One Click Multi DRM FPS TOKEN}"
                                },
                                body: spc,
                            });
                            const ckcBase64 = await res.text();
                            return ckcBase64;
                        },
                    },
                }
            ]
        }}
        ...
    />
)