Articles in this section

See more

Shaka

Avatar
Tony Gentile
  • Updated
Follow

Datazoom is a high-availability real-time data collection solution. This document summarizes how to integrate the Shaka player with the Datazoom platform.

Login to Datazoom here:  https://app.datazoom.io

Add a Collector as indicated here:  How to add a Collector

Copy the CONFIG ID to be used in the subsequent steps

Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. Integrate the Shaka Player plugin into your web application with the following snippet:

 <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>

  • Insert this JS line into your HTML

  • Replace the CONFIG_ID value with the collector configuration ID.

This inserts Datazoom's data collection SDK into the page.

Activate Data Collection for a Shaka Player

  1. Activate data collection by passing player instance only.

context = datazoom.createContext(player);

for example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Shaka Player Test Video</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/controls.css">
    <!-- THE SHAKA PLAYER CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/shaka-player.ui.js"></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src="https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID"></script>
</head>

<body>
    <p>
        This example demonstrates the basic use of the Datazoom SDK with the SHAKA
        player
    </p>
    <div data-shaka-player-container style="max-width: 40em" data-shaka-player-cast-receiver-id="1BA79154">
        <video data-shaka-player id="video" style="width: 100%; height: 100%"></video>
    </div>
    <script>
        async function initPlayer() {
            var video_url = "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
            const video = document.getElementById("video");
            var ui = video["ui"];;
            // Create a Controls instance.
            var controls = ui.getControls();
            // Create a Player instance.
            var player = controls.getPlayer();
            window.player = player;
            //Activates data collection
            datazoom.createContext(player);
            try {
                await my_player.load(video_url);
                // This runs if the asynchronous load is successful.
                console.log("The video has now been loaded!");
            } catch (e) {
                // onError is executed if the asynchronous load fails.
                onError(e);
            }
        }

        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!
                document.addEventListener('shaka-ui-loaded', initPlayer);
            } else {
                // This browser does not have the minimum set of APIs we need.
                console.error("Browser not supported!");
            }
        }

        function onErrorEvent(event) {
            // Extract the shaka.util.Error object from the event.
            onError(event.detail);
        }

        function onError(error) {
            // Log the error.
            console.log("Error code", error.code, "object", error);
        }
        initApp();
    </script>
</body>

</html>

  1. Activate data collection by passing player instance and controls instance

context = datazoom.createContext({
    player: my_player,
    controls: my_controls
});

for example:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Shaka Player Test Video</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/controls.css">
    <!-- THE SHAKA PLAYER CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/shaka-player.ui.js"></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src="https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID"></script>

</head>

<body>
    <p>
        This example demonstrates the basic use of the Datazoom SDK with the SHAKA
        player
    </p>
    <div data-shaka-player-container style="max-width: 40em" data-shaka-player-cast-receiver-id="1BA79154">
        <video data-shaka-player id="video" style="width: 100%; height: 100%"></video>
    </div>
    <script>
        async function initPlayer() {
            const video = document.getElementById("video");
            var video_url = "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
            var ui = video["ui"];
            // Create a Controls instance.
            var my_controls = ui.getControls();
            // Create a Player instance.
            var my_player = my_controls.getPlayer();
            window.my_player = my_player;
            datazoom.createContext({
                player: my_player,
                controls: my_controls
            });
            try {
                await my_player.load(video_url);
                // This runs if the asynchronous load is successful.
                console.log("The video has now been loaded!");
            } catch (e) {
                // onError is executed if the asynchronous load fails.
                onError(e);
            }
        }

        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!
                document.addEventListener('shaka-ui-loaded', initPlayer);
            } else {
                // This browser does not have the minimum set of APIs we need.
                console.error("Browser not supported!");
            }
        }

        function onErrorEvent(event) {
            // Extract the shaka.util.Error object from the event.
            onError(event.detail);
        }

        function onError(error) {
            // Log the error.
            console.log("Error code", error.code, "object", error);
        }
        initApp();
    </script>
</body>

</html>

Stop Data Collection

If the data collection must be stopped for any reason, for example after the destruction of the corresponding player instance, invoke the destroy() method of the Datazoom context object as in the following example:

if (my_player) {
    my_player.destroy();
    my_player = null;
}

if (datazoom_context) {
    datazoom_context.destroy();
    datazoom_context = null;
}

References:

Shaka Player API Doc : https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html

Related articles

Comments

0 comments

Article is closed for comments.