Widevine (Android) and Fairplay (iOS) support

[ivancduran]

Added

• Support for Widevine for android devices.
• Support for Fairplay for ios and ipad os.

Note: DRM needs to be tested on real devices.

Examples

Android Support for Widevine

Example code with custom headers:

let video = {
      id: 4,
      type: "dash",
      device: "all",
      url: "https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd",
      note: "DRM",
      thumb: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg",
      title: "DRM Test with headers",
      drm: {
        widevine: {
          licenseUri: "https://drm-widevine-licensing.axtest.net/AcquireLicense",
          headers: {
            'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImZpcnN0X3BsYXlfZXhwaXJhdGlvbiI6NjAsInBsYXlyZWFkeSI6eyJyZWFsX3RpbWVfZXhwaXJhdGlvbiI6dHJ1ZX0sImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.FAbIiPxX8BHi9RwfzD7Yn-wugU19ghrkBFKsaCPrZmU',
          },
        },
      }
   }


// Your Props Here ...

props.title = video?.title;
props.smallTitle = video?.note;
props.mode = "fullscreen";
props.url = video?.url;
props.playerId = 'fullscreen-video-player';
props.componentTag = 'app-viewvideo';
props.artwork = video?.thumb;

// include DRM
props.drm = video.drm;

const res: any = await this.videoPlayer.initPlayer(props);

iOS support for Fairplay

let video =  {
      id: 6,
      type: "hls",
      device: "ios",
      url: "https://na-fps.ezdrm.com/demo/ezdrm/master.m3u8",
      note: "DRM init Fairplay",
      thumb: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg",
      title: "DRM init Fairplay",
      drm: {
        fairplay: {
          licenseUri: "https://fps.ezdrm.com/api/licenses/b99ed9e5-c641-49d1-bfa8-43692b686ddb",
          certificateUri: "https://fps.ezdrm.com/demo/video/eleisure.cer",
        },
      }
   }

// Your Props Here ...

props.title = video?.title;
props.smallTitle = video?.note;
props.mode = "fullscreen";
props.url = video?.url;
props.playerId = 'fullscreen-video-player';
props.componentTag = 'app-viewvideo';
props.artwork = video?.thumb;

// include DRM
props.drm = video.drm;

const res: any = await this.videoPlayer.initPlayer(props);

Typescript definition looks like this:

• licenseUri is mandatory for widevine
• licenseUri and certificateUri are mandatory for fairplay
• Headers inside the drm only apply for the license servers, this is an optional parameter.

export interface capVideoPlayerDRMOptions {
  /**
   * Object with widevine (android) and fairplay (ios) options
   */
  widevine?: {
    licenseUri?: string;
    headers?: {
      [key: string]: string;
    }
  }
  fairplay: {
    licenseUri: string;
    certificateUri: string;
    headers?: {
      [key: string]: string;
    }
  }
}

[harmonwood]

This is great work.
From one of your other comments I am under the impression this is needed for a Capacitor 5 project.
To help things along I will maintain two branches for a short term allowing Capacitor 5 and 6 support.

Please remove the commented and none commented debug print statements before I do final testing for inclusion.

[ivancduran]

I already removed the prints for ios and android, please let me now if eveyring is ok now, thank you.