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. 

1<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:

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

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:

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

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

1<!DOCTYPE html>2<html lang=&quot;en&quot;>34<head>5    <script src=&quot;https://cdn.jsdelivr.net/npm/@millicast/sdk@latest/dist/millicast.umd.js&quot;></script>6    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>7</head>89<body>1011<div>12    <video id=&quot;video&quot; controls autoplay muted style=&quot;width:480px;height:270px&quot;></video>13    <hr/>14    <button id=&quot;start&quot;>Start</button>15</div>1617<script>1819const MC_STREAM_NAME = &quot;multiview&quot;;20const MC_ACCOUNT_ID = &quot;k9Mwad&quot;;21const MC_MAIN_VMID = &quot;0&quot;;22const MC_MAIN_AMID = &quot;1&quot;;2324let millicastView;25let monitor;2627async function initMillicastView() {28    const videoElement = document.getElementById(&quot;video&quot;);29    const tokenGenerator = () => millicast.Director.getSubscriber({30        streamName: MC_STREAM_NAME,31        streamAccountId: MC_ACCOUNT_ID32    });3334    millicastView = new millicast.View(MC_STREAM_NAME, tokenGenerator, videoElement);3536    monitor = datazoom.monitorMillicastView(37        millicastView, { element: videoElement, vmid: MC_MAIN_VMID, amid: MC_MAIN_AMID }38    );3940    let mediaElementContext = monitor.getMediaElementContext(videoElement);41    if (mediaElementContext) {42        mediaElementContext.setMetadata({ label: MC_MAIN_VMID });43    }4445    try {46        await millicastView.connect();47    }48    catch (e) {49        console.log(&quot;Connection failed&quot;, e);50    }5152    millicastView.webRTCPeer.initStats();53}5455document.getElementById(&quot;start&quot;).onclick = initMillicastView;5657</script>5859</body>6061</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:

1if (monitor) {2    monitor.destroy();3    monitor = null;4}

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