Content certification

Available in Classic and VPC

It explains how to apply Secure Token to the playback source and configure DRM.

Supported platforms: Android iOS

Secure Token

You can apply Secure Token to playback source and support OneTimeUrl as the token option. Additionally, you can replace Secure Token seamlessly during video playback using playerRef.current.tokenChange().

const playerRef = useRef(null);

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

// Token update — Replace with a new token during playback
playerRef.current.tokenChange('token=st=1675320871~exp=1675320901~acl=....');

Integrate with PallyCon DRM

This is a DoveRunner (PallyCon) DRM example that directly requests the PallyCon license server.

FairPlay

const playerRef = useRef(null);

return (
  <VpePlayer
    ref={playerRef}
    options={{
      playlist: [
        {
          file: 'https://CDNdomain/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': '{Token for FairPlay}',
                },
                body: spc,
              });
              const ckcBase64 = await res.text();
              return ckcBase64;
            },
          },
        },
      ],
    }}
  />
);

Widevine

const playerRef = useRef(null);

return (
  <VpePlayer
    ref={playerRef}
    options={{
      playlist: [
        {
          file: 'https://CDNdomain/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': '{Token for Widevine}',
                },
                body: spc,
              });
              const ckcBase64 = await res.text();
              return ckcBase64;
            },
          },
        },
      ],
    }}
  />
);

Integrate with One Click Multi DRM

You can apply DRM by integrating the Video Player Enhancement service with the One Click Multi DRM service. Check the endpoint and request headers to request FPS certificate and licensing.

FairPlay

const playerRef = useRef(null);

return (
  <VpePlayer
    ref={playerRef}
    options={{
      playlist: [
        {
          file: 'https://CDNdomain/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://CDNdomain/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;
            },
          },
        },
      ],
    }}
  />
);