HISPlayer: Tutorial: How to play streams with DRM

How to play streams with DRM

Widevine

Widevine DRM is Google’s content protection system for premium media. Widevine is used by major content services around the world, including Google Play, YouTube, Netflix, Hulu, Amazon, and more.

Widevine is embedded in web browsers such as Chrome and Firefox, and devices with Android OS and other various OTT devices.

Widevine integration

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'com.widevine.alpha',
      licenseServer: <YOUR_LICENSE_SERVER>,
    },
  ],
};

Optional you can set a specific headers for the license server:

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'com.widevine.alpha',
      licenseServer: <YOUR_LICENSE_SERVER>,
      headers: [
        {
          name: <LICENSE_HEADER_NAME>,
          value: <LICENSE_HEADER_VALUE>,
        },
        ...
        {
          name: <LICENSE_HEADER_NAME_N>,
          value: <LICENSE_HEADER_VALUE_N>,
        },
      ],
    },
  ],
};

PlayReady

Microsoft PlayReady DRM is a set of technologies that can be used to securely distribute audio/video content over the network and prevent unauthorized use. This technology is used to define and enforce the user’s rights to digital media content.

Content service providers can control the expiration date of the content’s playback, the resolution of the content that can be played on the screen, the type of screen on which the content is rendered, and many others.

PlayReady integration

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'com.microsoft.playready',
      licenseServer: <YOUR_LICENSE_SERVER>,
    },
  ],
};

Optional you can set a specific headers for the license server:

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'com.microsoft.playready',
      licenseServer: <YOUR_LICENSE_SERVER>,
      headers: [
        {
          name: <LICENSE_HEADER_NAME>,
          value: <LICENSE_HEADER_VALUE>,
        },
        ...
        {
          name: <LICENSE_HEADER_NAME_N>,
          value: <LICENSE_HEADER_VALUE_N>,
        },
      ],
    },
  ],
};

For PlayStation 5 if you want use SL3000 you need set ps5SecureVideoMode to true in your config. Example:

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'com.microsoft.playready',
      licenseServer: <YOUR_LICENSE_SERVER>,
    },
  ],
  ps5SecureVideoMode: true,
};

FairPlay

Apple’s FairPlay Streaming (FPS) DRM can securely deliver streaming media to client devices through the HTTP live streaming protocol. With FPS technology, content providers, encoding vendors, and content delivery networks (CDNs) can encrypt content, safely exchange content, and protect playback in iOS, tvOS,watchOS, and Safari browser on macOS and iOS.

All client environments that support FPS DRM, such as Mac OS, iOS,watchOS and tvOS, are highly secure at the hardware level.

FairPlay integration

For FairPlay we support the next providers:

EZDRM, for the config use 'ezdrm' as provider.
Verimatrix, for the config use 'verimatrix' as provider.
Conax, for the config use 'conax' as provider.
ExpressPlay, for the config use 'expressplay' as provider.

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'com.apple.fps.1_0',
      licenseServer: <YOUR_LICENSE_SERVER>,
      certificateUri: <YOUR_CERTIFICATE_URI>,
      provider: <YOUR_PROVIDER>,
    },
  ],
};

Optional you can set a specific headers for the license server:

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'com.apple.fps.1_0',
      licenseServer: <YOUR_LICENSE_SERVER>,
      certificateUri: <YOUR_CERTIFICATE_URI>,
      provider: <YOUR_PROVIDER>,
      headers: [
        {
          name: <LICENSE_HEADER_NAME>,
          value: <LICENSE_HEADER_VALUE>,
        },
        ...
        {
          name: <LICENSE_HEADER_NAME_N>,
          value: <LICENSE_HEADER_VALUE_N>,
        },
      ],
    },
  ],
};

Note: If you use another provider that is not included in the previous list contact us.

ClearKey

Within the HLS content delivery ecosystem, there exists a protection mode known as "AES-128 Encryption" or "Envelope Encryption". With this mode, the entire media container is encrypted using AES-128 and a URL (often token protected and always over HTTPS) is added to the playlist which the player can call to retrieve the decryption key. The key is sent in the clear and the player decrypts the media objects in application space before providing them to the source buffer.

ClearKey defined by Encrypted Media Extensions. It affords all the same protections as HLS AES-128 with the additional benefit that the media segments are not decrypted by the player application, but rather by the Content Decryption Module (CDM) resident on the device.

ClearKey integration

ClearKey support two different integrations, you can provide a url as the previous DRM systems, or provide the pairs of keyId-key.

ClearKey URL integration

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'org.w3.clearkey',
      licenseServer: <YOUR_LICENSE_SERVER>,
    },
  ],
};

Optional you can set a specific headers for the license server:

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'org.w3.clearkey',
      licenseServer: <YOUR_LICENSE_SERVER>,
      headers: [
        {
          name: <LICENSE_HEADER_NAME>,
          value: <LICENSE_HEADER_VALUE>,
        },
        ...
        {
          name: <LICENSE_HEADER_NAME_N>,
          value: <LICENSE_HEADER_VALUE_N>,
        },
      ],
    },
  ],
};

ClearKey keyId-key integration

const config = {
  licenseKey: <YOUR_LICENSE>,
  div: <YOUR_DOM_ELEMENT>,
  src: <YOUR_URL>,
  drm: [
    {
      type: 'org.w3.clearkey',
      clearKeys: {
        <KEY_ID>:<KEY>,
        ...
        <KEY_ID_N>:<KEY_N>,
      },
    },
  ],
};

Note: The key IDs and keys can be hex or base64.