Digital rights management (DRM) plugin

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);
			  }
      }
    }
  }]
})