Web: Radiant Media Player example

To make your life easier, Cloud DRM can be integrated with all major video players available in the market. Radiant Player is a viable option for delivering protected content.

If you are interested in integrating Radiant Player with Cloud DRM, you can use the example below as a starting point. You can also find a detailed step-by-step guide by visiting the Radiant documentation page.

Example for Widevine, PlayReady and FairPlay

The following JavaScript and HTML snippet demonstrates how to configure Radiant Player to handle Widevine, PlayReady, and FairPlay DRM licenses from Cloud DRM, leveraging the integrated Shaka Player.

HTML and JavaScript example:

<script src="https://cdn.radiantmediatechs.com/rmp/10.7.5/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
  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) => {})
        )
      ).then(() => supportedDRMs);
    } else {
      return Promise.reject("EME API not supported in this browser.");
    }
  }

  function rewriteUrlParams(sourceUrl, targetUrl) {
    const sourceParams = new URL(sourceUrl).searchParams;
    const target = new URL(targetUrl);

    sourceParams.forEach((value, key) => {
      target.searchParams.set(key, value);
    });

    return target.toString();
  }

  // Custom request filter for Shaka Player to handle FairPlay SKD URI parameters
  function shakaCustomRequestFilter(type, request) {
    if (type !== shaka.net.NetworkingEngine.RequestType.LICENSE) {
      return;
    }

    if (request.drmInfo.keySystem === "com.apple.fps") {
      const skdUri = shaka.util.StringUtils.fromBytesAutoDetect(
        request.initData
      );

      // VideoKit Cloud DRM requires passing parameters from the skd uri to the license server URL
      const modifiedLicenseServerUrl = rewriteUrlParams(
        skdUri,
        request.drmInfo.licenseServerUri
      );
      request.uris = [modifiedLicenseServerUrl];
      return;
    }

    return;
  }

  const token = "USER_TOKEN"; // token generation explained: https://developers.drm.cloud/licence-acquisition/token
  // copy your license acquisition and certificate urls from: https://console.videokit.cloud/dashboard/drm/configuration
  const widevineLicenseUrl =
    "https://TENANT_CODENAME.la.drm.cloud/acquire-license/widevine?BrandGuid=BRAND_ID";
  const playreadyLicenseUrl =
    "https://TENANT_CODENAME.la.drm.cloud/acquire-license/playready?BrandGuid=BRAND_ID";
  const fairplayLicenseUrl =
    "https://TENANT_CODENAME.la.drm.cloud/acquire-license/fairplay?BrandGuid=BRAND_ID";
  const fairplayServerCertificateUrl =
    "https://TENANT_CODENAME.la.drm.cloud/certificate/fairplay?BrandGuid=BRAND_ID";

  const settings = {
    licenseKey: "PLAYER_KEY", // replace with your player key
    src: {
      dash: "DASH_MANIFEST_URL", // replace with your protected dash url
      hls: "HLS_MANIFEST_URL", // replace with your protected hls url
    },
    width: 640,
    height: 360,
    skin: "s1",
    hlsEngine: "shakaplayer", // Use Shaka Player for HLS
    shakaDrmEmeFairPlay: true, // Enable EME for FairPlay in Shaka
    shakaCustomRequestFilter: shakaCustomRequestFilter, // Custom filter for FairPlay
    shakaDrm: {
      servers: {
        "com.apple.fps": fairplayLicenseUrl,
        "com.microsoft.playready": playreadyLicenseUrl,
        "com.widevine.alpha": widevineLicenseUrl,
      },
      advanced: {
        "com.apple.fps": {
          serverCertificateUri: fairplayServerCertificateUrl,
        },
      },
    },
  };

  // add user token to the license server urls
  Object.entries(settings.shakaDrm.servers).forEach(([key, value]) => {
    const urlObject = new URL(value);
    urlObject.searchParams.set("usertoken", token);
    settings.shakaDrm.servers[key] = urlObject.toString();
  });

  const elementID = "rmp";
  const rmp = new RadiantMP(elementID);
  async function initRmpPlayer() {
    try {
      const supportedDrmSystems = await checkDRM();
      const isFairPlaySupported = supportedDrmSystems.includes("FairPlay");
      if (!isFairPlaySupported) {
        // prevents Radiant Player from trying to play hls stream if FairPlay is not supported
        delete settings.src.hls;
      }
      await rmp.init(settings);
    } catch (error) {
      console.error("Radiant Media Player failed to initialize", error);
    }
  }
  initRmpPlayer();
</script>

Please replace the following placeholders in the code:

• DASH_MANIFEST_URL: The URL to the DASH manifest (MPD) file.
• HLS_MANIFEST_URL: The URL to the HLS manifest (M3U8) file.
• BRAND_ID: Your brand ID, retrieved from the videokit.cloud dashboard.
• TENANT_CODENAME: Tenant name, retrieved from the videokit.cloud dashboard.
• USER_TOKEN: JWT token for license acquisition, see Token for more details.
• PLAYER_KEY: Your Radiant Player license key.