Logo

Application collectors

Dolby OptiView Media Player

v2.6.0 • For the Javascript Collector

The Dolby OptiView Media Player Extension is a configuration option for the Javascript Collector by Datazoom that makes the following additional data points automatically collectable in real time.

Integration Instructions

Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. 

<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 Dolby Millicast

To activate data collection for the Dolby Millicast instance, start monitoring a millicast.View instance with the following snippet:

monitor = datazoom.monitorMillicastView(
    millicastView, { element: videoElement, vmid: MC_MAIN_VMID, amid: MC_MAIN_AMID }
);

A millicast.View instance can be used to manage one or multiple video elements. In the call above, in addition to the instance object the details about the primary video element can also be specified as shown above, where vmid and amid are for the corresponding video/audio media ID.

For each video element managed by the millicast.View instance, a Datazoom context is created automatically. The context can be retrieved to use functionalities common to all Datazoom context objects. For example, the context can be used to set custom metadata:

let mediaElementContext = monitor.getMediaElementContext(videoElement);
if (mediaElementContext) {
    mediaElementContext.setMetadata({ label: MC_MAIN_VMID });
}

The following is a complete example of Dolby Millicast integration with a millicast.View instance managing a single video element:

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

<head>
    <script src="https://cdn.jsdelivr.net/npm/@millicast/sdk@latest/dist/millicast.umd.js"></script>
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>

<div>
    <video id="video" controls autoplay muted style="width:480px;height:270px"></video>
    <hr/>
    <button id="start">Start</button>
</div>

<script>

const MC_STREAM_NAME = "multiview";
const MC_ACCOUNT_ID = "k9Mwad";
const MC_MAIN_VMID = "0";
const MC_MAIN_AMID = "1";

let millicastView;
let monitor;

async function initMillicastView() {
    const videoElement = document.getElementById("video");
    const tokenGenerator = () => millicast.Director.getSubscriber({
        streamName: MC_STREAM_NAME,
        streamAccountId: MC_ACCOUNT_ID
    });

    millicastView = new millicast.View(MC_STREAM_NAME, tokenGenerator, videoElement);

    monitor = datazoom.monitorMillicastView(
        millicastView, { element: videoElement, vmid: MC_MAIN_VMID, amid: MC_MAIN_AMID }
    );

    let mediaElementContext = monitor.getMediaElementContext(videoElement);
    if (mediaElementContext) {
        mediaElementContext.setMetadata({ label: MC_MAIN_VMID });
    }

    try {
        await millicastView.connect();
    }
    catch (e) {
        console.log("Connection failed", e);
    }

    millicastView.webRTCPeer.initStats();
}

document.getElementById("start").onclick = initMillicastView;

</script>

</body>

</html>

For the millicast.View instance to start generating detail information about WebRTC stats (periodically), the application should invoke millicastView.webRTCPeer.initStats(); as demonstrated above.

Stop Data Collection

If the data collection must be stopped for any reason, invoke the destroy() method of the millicast.View monitor (and the underlying Datazoom contexts will be destroyed automatically), as in the following example:

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

NPM (Node Package Manager)

We have made it convenient to manage your collector integration by providing NPM (Node Package Manager) support. Please see installation details here.


Follow this link to learn more about Dolby Optiview.

Ad Frameworks Extensions

If your Javascript application has a media player with an ad framework, Datazoom’s Javascript Collector with a Dolby OptiView Media Player can be extended with the following ad framework extensions.

Previous
Dash.js Media Player
Next
Google IMA Ad Framework