DASH Tutorial – #2 Display DASH Stream

DASH Tutorial – #2 Display DASH Stream

This is the second part of the tutorial on how to work with DASH-Streams. For more information about how to create and encode content for DASH, look at the first part of the tutorial here.

In this part, we will look at different video players that can display DASH content. We will only focus on web-players and not applications like VLC. The video players I will discuss are the following:

  • dash.js
  • Shaka-Player

Tutorial overview

You can find a complete overview of the tutorial with all the resources and examples mentioned in the posts here: http://halcyon.ch/halcyon_dash/

dash.js

Introduction to dash.js

This is a very basic video player and doesn’t require a lot of time to set up. With this player, we simply want to test if the stream we created in the first part of the tutorial works. You can find the GitHub repository here: https://github.com/Dash-Industry-Forum/dash.js/

Install and configure dash.js

The best guide to get started with this is to follow the instructions on the repo. I will quote them here for you:

1. Download ‘master’ or latest tagged release.

2. Extract dash.js and move the entire folder to localhost (or run any http server instance such as python’s SimpleHTTPServer at the root of the dash.js folder).

3. Open samples/dash-if-reference-player/index.html in your MSE capable web browser.

To start the simpleHTTPServer on Mac, I use the following command in the directory that I want to publish on it:

python -m SimpleHTTPServer 8080

You then can navigate to the auto-load-single-video.html sample. Edit it with your editor of preference (Atom in my case) and replace the src of the source tag with the link to your DASH-manifest. In my case, the body of the HTML-File looks like that:

 <body onload="Dash.createAll()">
 <div>
 <video class="dashjs-player" autoplay preload="none" controls="true">
 <source src="http://localhost:8080/output_squirrel_dash.mpd" type="application/dash+xml"/>
 </video>
 </div>
 </body>

After you saved the file and navigate to the HTML page you can see the result in your web browser. The video should stream now directly from the DASH-File. Success!

Screen Shot 2015-07-27 at 23.21.06

You can find a working example of the dash.js player in the tutorial overview here: DASH Tutorial Overview – dash.js example

Shaka-Player

Introduction to the Shaka-Player

This web video player is developed by Google to display DASH-Streams. The goal is of course, that the content is changing according to the data connection. So that you have a better video when you have a very strong signal and vice versa. I can again recommend watching the following YouTube video from Google which explains DASH and the SHaka-Player pretty well: Shaka Player: High Performance Video for the Web

We will now locally build the Shaka-Player and then play our stream which we created in the first part of this tutorial. You can find the detailed documentation here: http://shaka-player-demo.appspot.com/docs/index.html

Clone & Build

The repository can be found on GitHub here: https://github.com/google/shaka-player

To clone the repository I used:

git clone https://github.com/google/shaka-player

Afterwards, we have to build the code to get a compiled shaka-player.compiled.js. To do this use the command:

./build/all.sh

This will take a while, but then you have your compiled shaka-player.js. Now you can either go and edit one of the tutorial files and publish that on a webserver or create your own example. We will do the latter now. Just to get some exercise with the Shaka-Player.

Example

You best create a new folder and publish it on a SimpleHTTPServer like that:

mkdir example
touch index.html
python -m SimpleHTTPServer 8080

Now you can edit the index.html file and add the following content to it. We start with the header:

 <head>
    <meta charset="utf-8">
    <title>Shaka Player - Test</title>
    <script src="shaka-player.compiled.js"></script>
 </head>

This contains the link to the shaka-player.compiled.js which you should copy to your example folder. After that, you can create an easy HTML body. Something like this:

<body>
 <video id="video"
 width="640" height="480"
 crossorigin="anonymous"
 controls>
 Your browser does not support HTML5 video.
 </video>
 </body>

These are the standard settings I took from the tutorial pages. Now we have to add some JavaScript to set the DASH-Stream to our video element. We will use polyfill as well. It’s really recommended to use for these kinds of modern stuff if you want to try it on older web browsers too.

There are three exclamation marks in the code. This is the line where it gets really interesting. First we have to define our URL to the DASH-Manifest. The manifest should be on the same webserver for this test. So I recommend copying the resources from the first part of the tutorial to the example folder. Another very interesting part is the EWMABandwidthEstimator, which manages the Shaka-Player and it’s source according to your current bandwidth.

<script>
 function initPlayer() {
 shaka.polyfill.installAll();

 var video = document.getElementById('video');
 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);
 });
 // !!! 
 var mpdUrl = 'output_squirrel_dash.mpd';
 var estimator = new shaka.util.EWMABandwidthEstimator();
 var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

 player.load(source);
 }

 document.addEventListener('DOMContentLoaded', initPlayer);
 </script>

And thats it. Now you should see your DASH-Stream being played in the Shaka-Player. If you open the Developer-Tools in Chrome and switch to the “Network”-Tab and reload the page you can see how the segments get loaded as soon as you start and progress through the video:

Screen Shot 2015-07-28 at 14.46.14

You can find a working example of the Shaka-Player in the tutorial overview here: DASH Tutorial Overview – Shaka-Player example. This is it so far for the Shaka-Player and the tutorial. I will look into DASH again to work with audio and subtitle and so on. I think I will document that as well and add some new posts to the tutorial, but I will see :).

 

Yannick Signer

 

Leave a Reply

Your email address will not be published. Required fields are marked *