Shaka Player

Table of Contents

Integrating Shaka player
Integrating Axinom DRM with Shaka Player
Video Playback Tool in Portal
Revision History

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

Integrating Shaka player

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();
```

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

Now, you can load the player and play the video which is integrated with DRM.
```
    player.load(pass_the_video_Url);

    $('#shaka-player').show();
```

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

Pass the source file url in to player.

    player.load(
        'source url',
    )

    $('#shaka-player').show()

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',
			)

			$('#shaka-player').show()
		</script>
	</body>
</html>

Integrating Axinom DRM with Shaka Player

In the protection section, specify the license service URL 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>
            }
        }
    }

Tip	You can try out the Shaka Player with the HTML5 VideoTestBench online tool.

Video Playback Tool in Portal

Note that under My DRM >> Tools >> DRM Video Playback, you can actually try out the Shaka player 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, the JWT, and the license acquisition URL and choose Shaka player from the drop-down menu at the bottom. Click to get the player link and then copy-paste the link to see whether your video plays with Shaka.

Revision History

The table below outlines the document versions and any changes between them.

Version	Date	Description
1.0	March 19, 2021	Initial version.
1.1	April 13, 2021	Player link update.
2.0	May 6, 2021	Integration with Axinom DRM.
3.0	March 29, 2023	Intefration with Fairplay DRM.

Version

Date

Description

1.0

March 19, 2021

Initial version.

1.1

April 13, 2021

Player link update.

2.0

May 6, 2021

Integration with Axinom DRM.

3.0

March 29, 2023

Intefration with Fairplay DRM.