Web: Accurate Player example

Cloud DRM can be integrated with all major video players and SDKs available in the market. This document shows an example of how to integrate Cloud DRM with Accurate Player.

Before you start, follow the Accurate Player examples README to set up the Accurate Player SDK (including your license key and access to the npm repository). Then use the example below to integrate Cloud DRM with your player.

Example for Widevine, PlayReady and FairPlay

JavaScript example

import { AbrPlayer } from "@accurate-player/accurate-player-abr";

const licenseKey = "PLAYER_LICENSE_KEY";

const videoElement = document.getElementById("player");
const player = new AbrPlayer(videoElement, licenseKey);

async function checkDRM() {
  if (typeof navigator.requestMediaKeySystemAccess === "function") {
    const config = [
      {
        initDataTypes: ["cenc"],
        audioCapabilities: [{ contentType: 'audio/mp4;codecs="mp4a.40.2"' }],
        videoCapabilities: [{ contentType: 'video/mp4;codecs="avc1.42E01E"' }],
      },
    ];

    const drmSystems = [
      { keySystem: "com.widevine.alpha", name: "Widevine" },
      { keySystem: "com.microsoft.playready", name: "PlayReady" },
      { keySystem: "com.apple.fps.1_0", name: "FairPlay" },
    ];

    const supportedDRMs = [];

    return Promise.all(
      drmSystems.map((keySystem) =>
        navigator
          .requestMediaKeySystemAccess(keySystem.keySystem, config)
          .then(() => supportedDRMs.push(keySystem.name))
          .catch((error) => {
            console.error(error);
          }),
      ),
    ).then(() => supportedDRMs);
  }

  return Promise.reject("EME API not supported in this browser.");
}

function rewriteUrlParams(skdUri, licenseServerUri) {
  const skdUrl = new URL(skdUri.replace("skd://", "https://"));
  const licenseUrl = new URL(licenseServerUri);
  skdUrl.searchParams.forEach((value, key) => {
    licenseUrl.searchParams.set(key, value);
  });
  return licenseUrl.toString();
}

function bytesToString(data) {
  return new TextDecoder().decode(data);
}

function getConfig({
  supportedDrmSystems,
  dash,
  hls,
  drmToken,
  widevineUrl,
  playreadyUrl,
  fairplayUrl,
  fairplayCertificateUrl,
}) {
  const drmSystem = supportedDrmSystems?.[0];

  if (
    drmSystem === "FairPlay" &&
    hls &&
    fairplayCertificateUrl &&
    fairplayUrl
  ) {
    return {
      url: hls,
      configuration: {
        drm: {
          servers: {
            "com.apple.fps": `${fairplayUrl}&userToken=${drmToken}`,
          },
          advanced: {
            "com.apple.fps": {
              serverCertificateUri: fairplayCertificateUrl,
            },
          },
        },
      },
      interceptRequest: (type, request) => {
        const LICENSE_REQUEST_TYPE = 2;

        if (
          type !== LICENSE_REQUEST_TYPE ||
          request.body === null ||
          request.drmInfo === null
        ) {
          return;
        }

        const skdUri = bytesToString(request.initData);
        const modifiedLicenseServerUrl = rewriteUrlParams(
          skdUri,
          request.drmInfo.licenseServerUri,
        );
        request.uris = [modifiedLicenseServerUrl];
      },
    };
  }

  if (dash) {
    return {
      url: dash,
      configuration: {
        drm: {
          servers: {
            ...(widevineUrl.length > 0 && {
              "com.widevine.alpha": `${widevineUrl}&userToken=${drmToken}`,
            }),
            ...(playreadyUrl.length > 0 && {
              "com.microsoft.playready": `${playreadyUrl}&userToken=${drmToken}`,
            }),
          },
        },
      },
    };
  }
}

async function initPlayer() {
  const supportedDrmSystems = await checkDRM();
  const { url, configuration, interceptRequest } = getConfig({
    supportedDrmSystems,
    dash: "DASH_URL",
    hls: "HLS_URL",
    drmToken: "DRM_TOKEN",
    widevineUrl: "WIDEVINE_URL",
    playreadyUrl: "PLAYREADY_URL",
    fairplayUrl: "FAIRPLAY_URL",
    fairplayCertificateUrl: "FAIRPLAY_CERTIFICATE_URL",
  });

  if (configuration) {
    player.api.shakaInstance.configure(configuration);
  }

  if (interceptRequest) {
    player.api.shakaInstance
      .getNetworkingEngine()
      .registerRequestFilter(interceptRequest);
  }

  player.api.loadVideoFile({ src: url });
}

initPlayer();

Please replace the following placeholders in the code:

• PLAYER_LICENSE_KEY: Your Accurate Player license key.
• DRM_TOKEN: JWT (JSON Web Token) for license acquisition, see Token for more details.
• HLS_URL: The base URL to your protected HLS (.M3U8) stream for FairPlay playback.
• DASH_URL: The base URL to your protected DASH (.MPD) stream for Widevine and PlayReady playback.
• WIDEVINE_URL: License acquisition URL for Widevine DRM, found in Cloud Video Kit DRM configuration.
• PLAYREADY_URL: License acquisition URL for PlayReady DRM, found in Cloud Video Kit DRM configuration.
• FAIRPLAY_URL: License acquisition URL for FairPlay DRM, found in Cloud Video Kit DRM configuration.
• FAIRPLAY_CERTIFICATE_URL: Certificate URL for FairPlay DRM, found in Cloud Video Kit DRM configuration.