How to use Google Shaka Player with Wowza Streaming Engine (MPEG-DASH)

Originally Published on 09/17/2015 | Updated on 06/18/2018 9:57 am PDT

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 Additional resources

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 included with Wowza Streaming Engine and is part of the Wowza media server installation.
 
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 a live application

The example below will guide you through creating or configuring a live application to use with the player. The example uses an application named live, which is included in default Wowza Streaming Engine software installations.

To configure a live application:
 
  1. In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
     
  2. Configure the live application:
     
    1. In the Applications contents panel, click live, and then click Edit. (This example uses the installed live application. If you want to create a new live streaming application, click Add Application in the contents panel, and then click Live. Follow the instructions on the screen.)


       
    2. On the live page, select the MPEG-DASH playback type, and then click Save.

  3. Restart the application.

Configure an on demand application

The example below will guide you through creating or configuring an on demand application to use with Shaka Player. The example uses an application named vod, which is included in default Wowza Streaming Engine software installations and uses the sample video file [install-dir]/content/sample.mp4.

To configure an on demand application:
 
  1. In Wowza Streaming Engine Manager, click the Applications tab at the top of the page.
     
  2. Configure the vod application:
     
    1. In the Applications contents panel, click vod, and then click Edit. (This example uses the installed vod application. If you want to create a new live streaming application, click Add Application in the contents panel, and then click VOD. Follow the instructions on the screen.)


       
    2. On the vod page, select the MPEG-DASH playback type, and then click Save.

  3. 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.
To install Shaka Player:
 
  1. 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.
     
  2. To build Shaka Player on Linux or Mac operating systems, 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.
    To build Shaka Player on Windows operating systems, 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. For more information, see the shaka-player project repository.
     
  3. Host the built player code on a web server.

Set up Shaka Player for streaming

After installing Shaka Player onto 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 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>
Where:
 
  • The [wowza-ip-address]:[port] placeholder is the IP address and port of your Wowza media server (default port is 1935).
     
  • The [application] placeholder is the name of your Wowza media server application (such as live or vod).
     
  • The [stream-name] placeholder is the name of your stream published to the application (for live applications) or the on-demand asset (for video on demand (VOD) applications). 
Notes:

Playback example

The following playback examples include a minimal player configuration on a sample webpage for both a live and video on demand 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 media server 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>

Additional resources

Shaka Player Tutorials

If you're having problems or want to discuss this article, post in our forum.

Was this article helpful?
Thank you for your feedback!
User Icon

Thank you for providing feedback to help us improve our documentation!

If you need immediate help for an urgent issue, open a support ticket to get help from one of our technical support engineers. (You must have a valid Maintenance and Support contract to get technical support.)

© 2005–2018 Wowza Media Systems, LLC. All rights reserved.   Terms Privacy Trademarks Legal