Digital rights management (DRM)

This plugin enables digital rights management (DRM) for HLS and MPEG-DASH streams.

The current state of DRM on web is complicated due to the lack of cross-platform support. Different browsers and streaming technologies support different standards. With Wowza Flowplayer, we gathered different technologies under a single DRM plugin, making it simple to protect content when using the player.

Compatibility table

The following table lists the DRM technologies the DRM plugin supports. If you use a DRM solution with one of the streaming protocols listed, you can deliver protected content in each of these supported browsers.

DRM solution Streaming protocol Browser support
Apple FairPlay Streaming HLS Safari (both macOS and iOS)
ClearKey MPEG-DASH, HLS Chrome, Firefox
Google Widevine MPEG-DASH, HLS Chrome, Firefox
Microsoft PlayReady MPEG-DASH, HLS IE11+ (Windows 8.1+), Microsoft Edge
info

The hls.js library only supports FairPlay when the source uses fragmented MP4 encrypted segments. If the stream is fragmented into TS segments, it will only play if implemented natively. For this, you must configure the player with the native property.

Installation

To install the plugin, include it next to the core player:

Copy
Copied
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/drm.min.js"></script>
Info

Certain technologies only work on SSL secured web pages so make sure to use https when outside of localhost.

Configuration

DRM is always configured per source. This is why the configuration also lives under the drm key in source configuration.

Configuration should be completed using the configuration constants under the flowplayer.drm namespace. All configuration options have to be set under the respective DRM protocol. See the configuration example.

Configuration constant Description
LICENSE_SERVER URL where the license request is made
HTTP_HEADERS Additional headers sent with the license request. Configured as a JS object.
CERTIFICATE Location of the certificate to use in Apple FairPlay license requests.
VENDOR DRM license server provider you're using. Built-in implementations exist for buydrm and ezdrm. If you're using something else, you can implement your own bindings. Read more in the Vendor configuration section.
REQUEST_MEDIA_KEY_SYSTEM_ACCESS_FUNCTION We may fail to extract necessary codec information from the stream. As a result, we're unable to initialize the media key system. In cases like this, pass your own implementation for the retrieval function. Read more in the Media key system access section.

DRM protocol constants

You can use the following configuration constants under the flowplayer.drm namespace to define your DRM protocol and enable content protection.

Protocol constant DRM protocol
WIDEVINE Google Widevine
PLAYREADY Microsoft PlayReady
CLEARKEY ClearKey
FAIRPLAY Apple FairPlay

Configuration example

The following example shows how to set up each DRM protocol and define configuration options for your media sources.

Copy
Copied
flowplayer("#player", {
    src: [{
        src: "https://cdn.example.com/mystream.mpd",
        type: "application/dash+xml",
        drm: {
            [flowplayer.drm.WIDEVINE]: { 
				[flowplayer.drm.LICENSE_SERVER]: "https://widevine.example.com",
            	[flowplayer.drm.VENDOR]: "ezdrm"}, 
			[flowplayer.drm.PLAYREADY]: { 
				[flowplayer.drm.LICENSE_SERVER]: "https://playready.example.com",
            	[flowplayer.drm.VENDOR]: "ezdrm" }
		}
    }, {
        src: "https://cdn.example.com/mystream.m3u8",
        type: "application/x-mpegurl",
        drm: {
            [flowplayer.drm.FAIRPLAY]: {
                [flowplayer.drm.LICENSE_SERVER]: "https://fps.example.com",
                [flowplayer.drm.CERTIFICATE]: "https://example.com/my-fps-cert.cer",
                [flowplayer.drm.VENDOR]: "ezdrm"}
        }
    }]
})

Vendor configuration

You can configure what vendor to use with the VENDOR configuration. For built-in implementations, use one of the strings in the following table.

Key Vendor
ezdrm EZDRM
buydrm BuyDRM

For other implementations, provide an object with the following properties.

Property Content
fairplay_fetch_certificate With the signature (url: string, cb: Function) => void. You should call the callback with the certificate data as Uint8Array.
fairplay_request_license With the signature (url: string, params: { message: any, assetId: string }, cb: Function) => void). You should call the callback with the license data as Uint8Array.

Media key system access

If you end up with a no keys error displaying, it may mean that the player needs your help accessing the key system. To do this, pass the retrieval function in the DRM provider configuration:

Copy
Copied
flowplayer('#container', {
  src: [{
    src: "https://cdn.example.com/mystream.m3u8",
    type: "application/x-mpegurl",
    drm: {
      [flowplayer.drm.WIDEVINE]: {
        // other drm conf
        , [flowplayer.drm.REQUEST_MEDIA_KEY_SYSTEM_ACCESS_FUNCTION]: function (keySystem, supportedConfigurations) {
          let config = [{
            initDataTypes: ['cenc'],
            audioCapabilities: [{
              contentType: 'audio/mp4;codecs="mp4a.40.2"'
            }],
            videoCapabilities: [{
              contentType: 'video/mp4;codecs="avc1.42E01E"'
            }]
          }];
          return window.navigator.requestMediaKeySystemAccess(keySystem, config);
			  }
      }
    }
  }]
})