Custom ShakaPlayer XMLHttpRequest

Note
This support website will be decommissioned on 16th December 2022.
For up-to-date information, please refer to documentation on Lumen.com.

This article details how to integrate Streamroot DNA™ into Shaka Player using our custom XMLHttpRequest implementation. This plugin works with Shaka Player from v2.3.+.

Step 1: Install Shaka Player and Streamroot builds

From our CDN

Include these sources in the HTML <head>:

<!-- Shaka Player build -->
<script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.5.5/shaka-player.compiled.js"></script>

<!-- Custom Streamroot XHR -->
<script src="//cdn.streamroot.io/xhr-proxy-manual/1/stable/xhr-proxy-manual.js"></script>

<!-- Streamroot DNA plugin -->
<script src="//cdn.streamroot.io/shakaplayer-custom-dna-wrapper/1/stable/shakaplayer-custom-dna-wrapper.js"></script>

Step 2: Set up Shaka Player and Streamroot

In the HTML <body> or with npm

<video id="demoplayer"></video>
<script>
    var videoElement = document.getElementById('demoplayer');
    var shakaplayer = new shaka.Player(videoElement);
    var playerConfig = {};
    var dnaConfig = {};
    var wrapper = new ShakaPlayerDnaWrapper(shakaplayer, "YOUR_STREAMROOT_KEY", dnaConfig);
    shakaplayer.configure(playerConfig);
    shakaplayer.load("YOUR_PLAYLIST_URL");
</script>

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.).
playerConfig	No	The object in which you can change Shaka Player options. More information can be found here.
YOUR_STREAMROOT_KEY	Yes	The unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard.
YOUR_PLAYLIST_URL	Yes	Your DASH playlist.

Step 4: Use the custom implementation of XHR

In order to properly have the DNA plugin working, it is needed to use the alternate implementation of the XmlHttpRequsest in place of the normal XMLHttpRequest class available at

window.SrXMLHttpRequest

Step 5: Visualize Streamroot

In order to verify if Streamroot was correctly configured, please install our DNA Graphs.

Recommended Shaka Player options

Shaka Player as a wide variety of configuration parameters that can be instantiated in playerConfig object for fine-tuning. You can learn more about them in their API Documentation.

To get the best performance, we recommend setting the following values:

var playerConfig = {
    streaming: {
        bufferingGoal: 30,
    },
    manifest: {
        dash: {
            defaultPresentationDelay: 30,
        },
    },
}

For Live stream only, defaultPresentationDelay should be set as shown above or directly in your manifest in suggestedPresentationDelay.

Web Players