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

Originally Published on 09/17/2015 | Updated on 06/14/2017 2:02 pm 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, install the proper prerequisite packages, and then run ./build/all.sh from the root folder of the unzipped source code.
     
  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, copy the following video tag into the BODY section of the webpage code: 
<video id="video" width="640" height="480"
       crossorigin="anonymous"
       controls>
    Your browser doesn't support HTML5 video.
</video>
To manage and initialize the player, copy the following script below the closing </BODY> tag of the webpage code: 
<script>
    function initPlayer() {
        // Install polyfills for legacy browser support.
        shaka.polyfill.installAll();

        // Find the Shaka Player video element.
        var video = document.getElementById('video');

        // Construct a Player to wrap around it.
        var player = new shaka.player.Player(video);

        // Attach the player to the window so that it can be easily debugged.
        window.player = player;

        // Listen for errors from the Player.
        player.addEventListener('error', function(event) {
          console.error(event);
          });

        // Construct a DashVideoSource to represent the DASH manifest.
        var mpdUrl = 'http://[wowza-ip-address]:[port]/[application]/[stream-name]/manifest.mpd';
        var estimator = new shaka.util.EWMABandwidthEstimator();
        var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

        // Load the source into the Player.
        player.load(source);
    }
    document.addEventListener('DOMContentLoaded', initPlayer);
</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 on demand 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="640" height="480"
               crossorigin="anonymous"
               controls>
            Your browser doesn't support HTML5 video.
        </video>
    </body>
    <script>
        function initPlayer() {
            shaka.polyfill.installAll();

            var video = document.getElementById('video');
            var player = new shaka.player.Player(video);
            window.player = player;

            player.addEventListener('error', function(event) {
              console.error(event);
              });

            var mpdUrl = 'http://[wowza-ip-address]:1935/live/myStream/manifest.mpd';
            var estimator = new shaka.util.EWMABandwidthEstimator();
            var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

            player.load(source);
        }
        document.addEventListener('DOMContentLoaded', initPlayer);
    </script>
</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="640" height="480"
               crossorigin="anonymous"
               controls>
            Your browser doesn't support HTML5 video.
        </video>
    </body>
    <script>
        function initPlayer() {
            shaka.polyfill.installAll();

            var video = document.getElementById('video');
            var player = new shaka.player.Player(video);
            window.player = player;

            player.addEventListener('error', function(event) {
              console.error(event);
              });

            var mpdUrl = 'http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/manifest.mpd';
            var estimator = new shaka.util.EWMABandwidthEstimator();
            var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

            player.load(source);
        }
        document.addEventListener('DOMContentLoaded', initPlayer);
    </script>
</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!

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–2017 Wowza Media Systems, LLC. All rights reserved.   Terms Privacy Trademarks Legal