Shaka Player is a JavaScript library from Google that delivers audio and video content to any type of device using MPEG-DASH streaming. Shaka Player enables delivery of protected content using the Encrypted Media Extensions (EME) API and also supports multilingual content for audio tracks and subtitles. This article explains how to use Shaka Player with Wowza Streaming Engine™ media server software.
Notes:
- This article requires Wowza Streaming Engine 4.2, latest Google Shaka Player, and the current version of Google Chrome.
- Captions and DVR playback aren't supported in Shaka Player.
- Shaka Player can't switch between multiple audio tracks in a stream.
Contents
Getting started Download and install Shaka Player
Set up Shaka Player for streaming
Playback examples
Getting started
To stream to Shaka Player, you must create or set up an application for live streaming with MPEG-DASH playback enabled in Wowza Streaming Engine Manager. You can also use the video on demand instructions in this section to set up the vod application that's installed with Wowza Streaming Engine.
Note: After configuring an application, you can test your stream setup using Wowza's implementation of Shaka Player on our Wowza Test Players webpage. (The Test Players are provided for testing purposes only.)
Configure an application
- In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
- In the Applications contents panel, click live or vod, and then click Edit.
- Confirm the MPEG-DASH playback type is selected, and then click Save.
- Restart the application.
Download and install Shaka Player
Note: You can test your stream setup using Wowza's implementation of Shaka Player on our Wowza Test Players webpage. The Test Players are provided for testing purposes only.
- Navigate to the shaka-player project repository, click Download ZIP on the right side of the page, and then unzip the shaka-player-master.zip file.
- Build the player:
- Linux or macOS – Run ./build/all.sh from the root folder of the unzipped source code.
Note: If you are building Shaka Player on Linux, additional libraries (such as Node.js, Python, and Java) may be required depending on the version of Linux you are using. - Windows – Run ./build/all.sh from the root folder of the unzipped source code. Note that there may be additional requirements for Windows that need to be installed prior to running the ./build/all.sh command. Before you build, make sure you're running the most current updates for Windows.
- Host the built player code on a web server.
Set up Shaka Player for streaming
After installing Shaka Player on your web server, insert the player into a webpage by copying the three sections of embed code below into your webpage HTML code.
To load the Shaka Player library in your webpage, copy the following code snippet into the HEAD section of the webpage code:
<script src="shaka-player.compiled.js"></script>
To add the video stream to the webpage and manage and initialize the player, copy the following video tag and script into the BODY section of the webpage code:
<video id="video" width="1280" crossorigin="anonymous" controls>
Your browser doesn't support HTML5 video.
</video>
<script>
var manifestUri = 'http://[wowza-ip-address]:[port]/[application]/[stream-name]/manifest.mpd';
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
function initPlayer() {
// Create a Player instance.
var video = document.getElementById('video');
var player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
player.load(manifestUri).then(function() {
// This runs if the asynchronous load is successful.
console.log('The video has is now loaded.');
}).catch(onError); // onError is executed if the asynchronous load fails.
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.log(error);
}
document.addEventListener('DOMContentLoaded', initApp);
</script>
Where:
- [wowza-ip-address]:[port] is the IP address and port of your Wowza Streaming Engine server (default port is 1935).
- [application] is the name of your Wowza Streaming Engine application (such as live or vod).
- [stream-name] is the name of your stream published to the application (for live applications) or the on-demand asset (for VOD applications).
Notes:
- For more information on manifest profiles and MPD URL syntax, see Stream over MPEG-DASH with Wowza Streaming Engine.
- For more information about player configuration options, see the Shaka Player's DASH playback tutorial or HTML <video> element documentation.
Playback example
The following playback examples include a minimal player configuration on a sample webpage for both a live and VOD source.
Live playback example
<html>
<head>
<script src="shaka-player.compiled.js"></script>
</head>
<body>
<video id="video" width="1280" crossorigin="anonymous" controls>
Your browser doesn't support HTML5 video.
</video>
<script>
var manifestUri = 'http://[wowza-ip-address]:1935/live/myStream/manifest.mpd';
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
function initPlayer() {
// Create a Player instance.
var video = document.getElementById('video');
var player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
player.load(manifestUri).then(function() {
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
}).catch(onError); // onError is executed if the asynchronous load fails.
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.log(error);
}
document.addEventListener('DOMContentLoaded', initApp);
</script>
</body>
</html>
Video-on-demand playback example
This example re-streams the [install-dir]/content/sample.mp4 video file included in your Wowza Streaming Engine installation.
<html>
<head>
<script src="shaka-player.compiled.js"></script>
</head>
<body>
<video id="video" width="1280" crossorigin="anonymous" controls>
Your browser doesn't support HTML5 video.
</video>
<script>
var manifestUri = 'http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd';
function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
}
}
function initPlayer() {
// Create a Player instance.
var video = document.getElementById('video');
var player = new shaka.Player(video);
// Attach player to the window to make it easy to access in the JS console.
window.player = player;
// Listen for error events.
player.addEventListener('error', onErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
player.load(manifestUri).then(function() {
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
}).catch(onError); // onError is executed if the asynchronous load fails.
}
function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}
function onError(error) {
// Log the error.
console.log(error);
}
document.addEventListener('DOMContentLoaded', initApp);
</script>
</body>
</html>
