DRM

Enable DRM (Digital Rights Management) for HLS and MPEG-DASH streams.

Table of contents

Introduction

The current state of DRM on web is complicated because of the lack of cross-platform support. Different browsers and streaming technologies support different standards.

In Flowplayer we have gathered different tehcnologies under one single DRM plugin to make it simple to implement in the player.

Compatibility table

Below we list the different supported DRM technologies. We connect them with browser & streaming protocol support.

    • DRM solution
    • Browser support
    • Streaming protocol
    • Google Widevine
    • Chrome, Firefox
    • MPEG-DASH, HLS
    • Microsoft Playready
    • IE11+ (Windows 8.1+), Microsoft Edge
    • MPEG-DASH
    • Clearkey
    • Chrome, Firefox
    • MPEG-DASH
    • Apple Fairplay Streaming
    • Safari (both macOS and iOS)
    • HLS

From this support table it becomes apparent that the best coverage is achieved by defining both a MPEG-DASH and HLS source with Google Widevine, Microsoft Playready and Apple Fairplay DRM technologies.

OVP managed player

If your workspace is set to create DRM content, the player builder and source media configurations will include all required information and parameters automatically.

Manual installation

For manual Javascript setups, nclude the plugin next to the core player:

<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>

Player and plugins exist in different release versions. Please see the release channel documentation.

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

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.

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 flowplayer.drm namespace. All configuration options need to be set under the respective DRM protocol. See the example below.

Configurable values

    • Configuration constant
    • Description
    • LICENSE_SERVER
    • The URL where the license request is made
    • HTTP_HEADERS
    • Additional headers sent with the license request. Configured as an JS object.
    • CERTIFICATE
    • Location of the certitifate to use in Apple Fairplay license requests.
    • VENDOR
    • The DRM license server provider you are using. Built-in implementations exists for buydrm and ezdrm. If you are using something else you can implement your own bindings. Read more below.
    • REQUEST_MEDIA_KEY_SYSTEM_ACCESS_FUNCTION
    • Sometimes we may fail to extract necessary codec information from the stream and as a result we are unable to initialise the media key system. In cases like this you need to pass your own implementation for the retrieval function. Read more below.

DRM protocol constants

    • Protocol constant
    • DRM protocol
    • WIDEVINE
    • Google Widevine
    • PLAYREADY
    • Microsoft Playready
    • CLEARKEY
    • Clearkey
    • FAIRPLAY
    • Apple Fairplay

Configuration example

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

For built-in implementations it will be a string:

    • key
    • vendor
    • ezdrm
    • EZDRM
    • buydrm
    • BuyDRM

For other implementations you need to provide an object with 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
    • 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 the error "no keys" showing, it might mean that the player needs your help acessing the key system.

This is done by passing the retrieval function in the DRM provider configuration:

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);
              }
      }
    }
  }]
})
MPEG DASH Endscreen
Results