DRM and content authentication

Available in Classic and VPC

This section describes how to apply a Secure Token to the playback source by modifying script code and how to configure MultiDRM.

Secure Token

You can support OneTimeUrl by applying a Secure Token to the playback source using the token property.
You can replace the Secure Token without interrupting video playback using the player.tokenChange property.
For more information about Secure Token, see the Global Edge user guide.

Controlling Global Edge content authentication

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

) 

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

MultiDRM

You can configure MultiDRM with the playlist.drm property. The example is as follows:

FairPlay

const playerRef = useRef(null);
return (
  <VpePlayer
      ...
      ref={playerRef}
      options={{
            playlist: [ //Playback source
                {
                    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: [ //Playback source
                {
                    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;
                      },
                },
            ] 
          }}
      ...
  />

) 

One Click Multi DRM

You can apply DRM by integrating the Video Player Enhancement service with the One Click Multi DRM service.
Please check the Endpoint and Request headers to request FPS Certificate and licensing.

FPS certificate request (Apple FairPlay only)
Licensing request (common to FairPlay, Widevine, and PlayReady)

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

)