Skip to main content
Version: 11.7.0

DRM on Web

THEOplayer supports FairPlay, PlayReady and Widevine by default. To use these DRM systems, you will need to pass a DRM configuration along with the source object. We are partnered with many multi-DRM vendors to make it as easy as possible to get your DRM streams running.

Integrations​

These DRM vendors can be used through an integration. An integration is not part of the SDK: it is added on top of it as a custom DRM integration. Ready-made integrations for many vendors are available in the DRM integration samples repository. Vendors which don't require custom license or certificate requests can be used with a plain key system configuration instead.

Pre-integrations​

THEOplayer is also pre-integrated with a number of commercial multi-DRM vendors. These pre-integrations are part of the SDK itself: you select the vendor and pass its parameters, and the SDK takes care of the vendor's license and certificate requests. When integrating DRM for the first time or updating your integration, an integration is preferred over a pre-integration.

  • Clear Key: how to play a Clear Key protected stream.
  • Multi-key HLS: how to serve one HLS stream to all key systems.

Custom configuration​

Developers can use the generic DRM-functionalities in case in-house DRM-solutions are used, or services from DRM-vendors for which no integration is available.

To configure DRM on the Web SDK, developers can set a DRMConfiguration as the contentProtection of a TypedSource.

if (HLS) {
  let drmConfiguration = {
    fairplay: {
      licenseAcquisitionURL: '<LICENSE_KEY_URL_FAIRPLAY>',
      certificateURL: '<CERTIFICATE_URL>',
      // "certificate": "<CERTIFICATE_AS_STRING_OR_UInt8Array>",
      // "headers": {"<KEY>": "<VALUE>"},
      // "useCredentials": <true||false>
    },
  };
  player.source = {
    sources: {
      src: '<HLS_STREAM_URL>',
      type: 'application/x-mpegurl',
      contentProtection: drmConfiguration,
    },
  };
} else if (MPEG - DASH) {
  let drmConfiguration = {
    playready: {
      licenseAcquisitionURL: '<LICENSE_KEY_URL_PLAYREADY>',
      // "headers": {"<KEY>": "<VALUE>"},
      // "useCredentials": <true||false>
    },
    widevine: {
      licenseAcquisitionURL: '<LICENSE_KEY_URL_WIDEVINE>',
      // "headers": {"<KEY>": "<VALUE>"},
      // "useCredentials": <true||false>
    },
  };
  player.source = {
    sources: {
      src: '<DASH_STREAM_URL>',
      type: 'application/dash+xml',
      contentProtection: drmConfiguration,
    },
  };
}

Custom integration​

Developers can make their own custom DRM integration for any DRM vendor. This can be done by making use of the DRM integration API repository.

A complete guide on how to create a new integration, and some example integrations can be found in the provided repository.