# 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](/docs/wowza-flowplayer/plugins/hls/#configure-the-plugin).

## Installation

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


```html
<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](/docs/wowza-flowplayer/player/configure#video-source).

Configuration should be completed using the [configuration constants](/docs/wowza-flowplayer/plugins/drm/#drm-protocol-constants) under the `flowplayer.drm` namespace. All configuration options have to be set under the respective DRM protocol. See the [configuration example](/docs/wowza-flowplayer/plugins/drm/#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](/docs/wowza-flowplayer/plugins/drm/#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](/docs/wowza-flowplayer/plugins/drm/#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.


```js
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:


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