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.
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 |
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.
To install the plugin, include it 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>Certain technologies only work on SSL secured web pages so make sure to use https when outside of localhost.
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. |
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 |
The following example shows how to set up each DRM protocol and define configuration options for your media sources.
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"}
}
}]
})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. |
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:
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);
}
}
}
}]
})