콘텐츠 인증

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

재생 소스에 Secure Token을 적용하고 DRM을 설정하는 방법을 설명합니다.

지원 플랫폼: Android iOS

Secure Token

token 옵션으로 재생 소스에 Secure Token을 적용하여 OneTimeUrl을 지원합니다. playerRef.current.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=....');

PallyCon DRM 연동

PallyCon 라이선스 서버에 직접 요청하는 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 및 라이선스 발급을 요청하기 위한 엔드포인트 및 요청 헤더를 확인해 주십시오.

FairPlay

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

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