Shaka Player

Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats, such as DASH and HLS, in a browser without using any plugins or Flash. Instead, the player uses the open web standards Media Source Extensions (MSE) and Encrypted Media Extensions (EME).

The general concept for Axinom DRM integration for DRM-compatible players, is outlined in the video Players document.

Integration

You can easily integrate Shaka Player with Axinom DRM. Use the sample code and instructions below.

Create a video element on your HTML page by adding the following line:
```
<video id="videoPlayer" controls></video>
```
Add the shaka-player.compiled.debug.js script to the end of the HTML body.
```
<body>
  ...
  <script src="yourPathToDash/shaka-player.compiled.debug.js"></script>
</body>
```
note
You can also refer to 'https://ajax.googleapis.com/ajax/libs/shaka-player/<version>/shaka-player.compiled.debug.js'. If you want to change the version, add the path to the correct version. The below mentioned configurations are done with the Shaka player version 4.2.1.
Initialize the Player by adding the following line inside your loader method which is executed when you load the player.
```
videoElement = document.getElementById("videoPlayer");
player = new shaka.Player(videoElement);
```
Install built-in polyfills to patch browser incompatibilities.
```
shaka.polyfill.installAll();
```
For multi-key FairPlay content, see Multi-key FairPlay on Safari — an additional polyfill is required.

Set the protection data related to the video with the license service details as shown in below example.

protection = {
  drm: {
    servers: {
      "com.widevine.alpha":
        "https://drm-widevine-licensing.axprod.net/AcquireLicense",
    },
  },
};

player.configure(protection);

Pass the token as a ’X-AxDRM-Message'` to the player.

player.getNetworkingEngine().registerRequestFilter(function (type, request) {
  if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
    request.headers["X-AxDRM-Message"] = token;
  }
});

Now, you can load the player and play the video which is integrated with DRM.

player.load("source url");

document.querySelector("#videoPlayer").style.display = "block";

Example code

<!DOCTYPE html>
<html>
	<head>
		<title>Shaka Player with Axinom DRM</title>
	</head>
	<body>
        <script src="https://cdn.jsdelivr.net/npm/shaka-player@4.3.5/dist/shaka-player.compiled.min.js"></script>
        <link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/shaka-player@4.3.5/dist/controls.min.css"
		/>

		<video id="videoPlayer" controls></video>

		<script>
			videoElement = document.getElementById('videoPlayer')
			player = new shaka.Player(videoElement)
			shaka.polyfill.installAll()

			protection = {
				drm: {
					servers: {
						'com.widevine.alpha': 'https://drm-widevine-licensing.axprod.net/AcquireLicense',
					},
				},
			}

			player.configure(protection)

			player.getNetworkingEngine().registerRequestFilter(function (type, request) {
				if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
					request.headers['X-AxDRM-Message'] =
						'X-AxDRM-Message token'
				}
			})
			player.load(
				'source url',
			)

			document.querySelector('#videoPlayer').style.display = 'block'
		</script>
	</body>
</html>

When integrating Axinom DRM with Shaka player, you have to specify the license service URL in the protection section as below.

Widevine

    {
        drm :{
            servers: {
                'com.widevine.alpha': 'https://drm-widevine-licensing.axprod.net/AcquireLicense'
            }
        }
    }

PlayReady

    {
        drm :{
            servers: {
                'com.microsoft.playready': 'https://drm-playready-licensing.axprod.net/AcquireLicense'
            }
        }
    }

FairPlay

For FairPlay you need to specify the server certificate URL as well.

    {
        drm :{
            servers: {
                'com.apple.fps': 'https://drm-fairplay-licensing.axprod.net/AcquireLicense'
            }
        },
            advanced: {
                'com.apple.fps': {
                    'serverCertificateUri': <fairPlay_Certificate_Url>
            }
        }
    }

note

Multi-key content needs an additional polyfill on Safari. See Multi-key FairPlay on Safari.

tip

You can try out the Shaka Player with the Axinom Media Tools.

Multi-key FairPlay on Safari

As of Shaka Player 5.2, playback of content protected with multiple content keys can fail on Safari with shaka.util.Error 3016 (decode error) unless Safari's legacy webkit-prefixed EME is enabled. Single-key content is unaffected.

Install the legacy Apple Media Keys polyfill alongside the standard polyfills:

// Install once, at module scope, before any player instance is created.
shaka.polyfill.installAll();

// Route FairPlay through Safari's legacy webkit-prefixed EME.
// A no-op unless window.WebKitMediaKeys exists, so no browser detection is needed.
shaka.polyfill.PatchedMediaKeysApple.install(/* enableUninstall= */ true);

Install both at module scope, before any player instance exists — installing them later can leave the browser half-patched and fail with FAILED_TO_ATTACH_TO_VIDEO (6003) instead. Load a single Shaka bundle, as two copies patch the same globals independently.

This applies to all FairPlay content, not only multi-key. On the legacy API licence expiry is not reported (expiration is NaN), only temporary sessions exist so persistent and offline licences are not possible, and it cannot be combined with streaming.useNativeHlsForFairPlay: false.

Test Playback

You can actually try out the Shaka Player from the DRM Video Playback Tool and check whether your video plays with it. This tool allows you to play the DRM-protected video as well as generate and adjust the Entitlement Message. Copy the video URL, create the JWT and choose Shaka player from the drop-down menu at the bottom. Click to get the player link and you can see whether your video plays with Shaka player.

You can find the tool here:

DRM Video Playback Tool

Integration​

Widevine​

PlayReady​

FairPlay​

Multi-key FairPlay on Safari​

Test Playback​

See also​