Skip to main content

DRM Playback

Player Creation​

For Playing a protected content, valid DRMScheme and license url has to be configured during player creation. Drm type and the media format should be supported by the browser.

// Sample Player Creation for Platform DRM Protected Content
const  url = "https://storage.googleapis.com/shaka-demo-assets/" +
    "angel-one-widevine/dash.mpd"

const player = window.playerBuilder()
  .mediaURL(url)
  .mediaType(flPlayer.MediaType.DASH)
  .drmScheme(flPlayer.DRMScheme.WIDEVINE))
  .drmLicenseURL("https://cwip-shaka-proxy.appspot.com/no_auth")
  .build(applicationContext)
player.load();

Server certificate​

Chrome 59 introduced a new CDM security feature known as Verified Media Path (VMP) . VMP requires the use of a service certificate. If a service certificate does not exist, a certificate request will be initiated prior to every playback request.

Service certificate requests are smaller in size (~2 bytes) compared to a license request and must be forwarded as-is (unchanged) to the Widevine Cloud License Service.

Widevine Optimization​

An alternative to executing the additional certificate request-response is to pre-load the service certificate, prior to any license request. This is recommended, as it avoids a round-trip to the license server.

async function fetchCertificate() {
  const request = await fetch('certificate url');
  window.certificate = await request.arrayBuffer();
}
function buildProtectedPlayer() {
  return window.playerBuilder
    .mediaElement(videoElement)
    .mediaUrl(contentUrl)
    .drmLicenseUrl(licenseUrl)
    .drmScheme(flPlayerInterface.DrmScheme.WIDEVINE)
    .drmScheme(flPlayer.DrmScheme.WIDEVINE)
    .certificate(certificate)
    .playbackOptions({ autoPlayOnLoad: true })
    .build();
}

Fairplay Playback​

Player supports fairPlay on Safari. FairPlay content requires setting a server certificate.

// Fetch the certificate
async function fetchFairplayCertificate() {
  const request = await fetch('certificate url');
  window.certificate = await request.arrayBuffer();
}

// Build the player
function buildFairplayPlayer() {
  return window.playerBuilder
    .mediaElement(videoElement)
    .mediaUrl(contentUrl)
    .drmLicenseUrl(licenseUrl)
    .mediaType(flPlayerInterface.MediaType.HLS)
    .drmScheme(flPlayerInterface.DrmScheme.FAIRPLAY)
    .playbackOptions({ autoPlayOnLoad: true })
    .certificate(certificate)
    .build();
}

const player = buildFairplayPlayer();
player.load();

Custom License Request Handling​

There might be some special scenarios where in the license request needs custom handling.

Examples
  • License Request might need custom headers to be configured in some cases.
  • Application developer might want to take control of fetching the license from the resource servers with which they interface.

For such scenarios, application developers needs to intercept the network request before performing a load() operation and take control of License Fetching themselves.

// Intercept the network license request if it is customized one
const originalPayload = new Uint8Array(request.body);
//convert it to base64 as base64Payload
const base64Payload = flPlayer.Uint8ArrayUtils.toStandardBase64(
  originalPayload,
);
const wrapped = {
  spc: base64Payload,
  assetId: skd,
};
request.body = JSON.stringify(wrapped);
request.headers['Content-Type'] = 'application/x-www-form-urlencoded';

// Intercept the network license response if it is customized one
const wrappedString = flPlayer.StringUtils.fromUTF8(response.data);
// Parse the JSON string into an object.
const wrappedJson = JSON.parse(wrappedString);
// Decode that base64 string into a Uint8Array and replace the response
// data.
response.data = flPlayer.Uint8ArrayUtils.fromBase64(wrappedJson.ckc);

// Fetch the certificate
async function fetchFairplayCertificate() {
  const request = await fetch('certificate url');
  window.certificate = await request.arrayBuffer();
}

// Build the player
function buildFairplayPlayer() {
  return window.playerBuilder
    .mediaElement(videoElement)
    .mediaUrl(contentUrl)
    .drmLicenseUrl(licenseUrl)
    .mediaType(flPlayer.MediaType.HLS)
    .drmScheme(flPlayer.DrmScheme.FAIRPLAY)
    .playbackOptions({ autoPlayOnLoad: true })
    .certificate(certificate)
    .build();
}

const player = buildFairplayPlayer();
player.load();