PallyCon DRM 테스트

PallyCon DRM 연동을 빠르게 검증할 수 있는 테스트 엔드포인트를 제공합니다. 별도의 DRM 라이선스 발급 없이 Widevine, FairPlay, PlayReady를 즉시 테스트할 수 있습니다.

테스트 플레이어

PallyCon DEMO 환경의 DRM 콘텐츠를 재생하는 샘플입니다. 브라우저에 따라 Widevine, PlayReady, FairPlay 중 지원되는 DRM이 자동 선택됩니다.

PallyCon DRM 옵션 로딩 중...

주의: 테스트 엔드포인트는 PallyCon DEMO 환경을 사용하며, 프로덕션 용도로 사용할 수 없습니다. DRM은 HTTPS 환경에서만 동작합니다.

테스트 엔드포인트

아래 API를 호출하면 Widevine, FairPlay, PlayReady DRM이 설정된 플레이어 옵션 JSON을 응답합니다.

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

응답 예시

{
    "playlist": [
        {
            "drm": {
                "com.apple.fps": {
                    "src": "https://contents.pallycon.com/bunny/hls/master.m3u8",
                    "certificateUri": "https://license-global.pallycon.com/ri/fpsKeyManager.do?siteId=DEMO",
                    "licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
                    "licenseRequestHeader": { ... }
                },
                "com.widevine.alpha": {
                    "src": "https://contents.pallycon.com/bunny/stream.mpd",
                    "licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
                    "licenseRequestHeader": { ... }
                },
                "com.microsoft.playready": {
                    "src": "https://contents.pallycon.com/bunny/stream.mpd",
                    "licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
                    "licenseRequestHeader": { ... }
                }
            },
            "description": {
                "title": "Pallycon 테스트 영상",
                "created_at": "2024.07.13"
            }
        }
    ],
    "aspectRatio": "16/9",
    "autostart": true,
    "muted": true
}

플레이어 연동

엔드포인트에서 받은 응답을 그대로 플레이어 옵션으로 전달하면 DRM 재생이 시작됩니다. 브라우저에 따라 Widevine(Chrome, Firefox), FairPlay(Safari), PlayReady(Edge) 중 적절한 DRM이 자동으로 선택됩니다.

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

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

export function App() {
    const [options, setOptions] = useState(null);

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

    if (!options) return <div>DRM 설정 로딩 중...</div>;

    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={options}
        />
    );
}

정적 옵션으로 직접 설정

API 호출 없이 DRM 옵션을 코드에 직접 작성할 수도 있습니다.

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": {
                                src: "https://contents.pallycon.com/bunny/hls/master.m3u8",
                                certificateUri: "https://license-global.pallycon.com/ri/fpsKeyManager.do?siteId=DEMO",
                                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                                licenseRequestHeader: {
                                    "Content-type": "application/x-www-form-urlencoded",
                                    "pallycon-customdata-v2": "{FairPlay Token}",
                                },
                            },
                            "com.widevine.alpha": {
                                src: "https://contents.pallycon.com/bunny/stream.mpd",
                                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                                licenseRequestHeader: {
                                    "pallycon-customdata-v2": "{Widevine Token}",
                                },
                            },
                            "com.microsoft.playready": {
                                src: "https://contents.pallycon.com/bunny/stream.mpd",
                                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                                licenseRequestHeader: {
                                    "pallycon-customdata-v2": "{PlayReady Token}",
                                },
                            },
                        },
                        description: {
                            title: "Pallycon 테스트 영상",
                            created_at: "2024.07.13",
                        },
                    },
                ],
                aspectRatio: "16/9",
                autostart: true,
                muted: true,
            }}
        />
    );
}

DRM 유형별 브라우저 지원

DRM	프로토콜	지원 브라우저
com.widevine.alpha	DASH	Chrome, Firefox, Edge, Android
com.apple.fps	HLS	Safari (macOS, iOS)
com.microsoft.playready	DASH	Edge (Chromium)