CONNECT Player SDK 5 for Browsers and Connected TV

Statistics

To enable analysis of the quality of service and playback, the CONNECT Player SDK OtvToolkit provides APIs to access rendering, network and playback statistics, and listen for playback and network events.

JavaScript
const networkStatistics = playerInstance.otvtoolkit().networkStatistics;
const playbackStatistics = playerInstance.otvtoolkit().playbackStatistics;
const renderingStatistics = playerInstance.otvtoolkit().renderingStatistics;

Currently, only DASH streams are supported.

Playback statistics

This provides statistics such as bitrate, resolution and buffer duration, as well as an event listener interface for bitrate and resolution changes.

Usage examples

Retrieving the base playback statistics:

JavaScript
let stats = "";
if (playbackStatistics) {
	const bufferedDuration = playbackStatistics.getBufferedDuration();
	const renderBitrate = playbackStatistics.getStreamBitrate();
	const resolution = playbackStatistics.getResolution();
	stats += "Buffer: " + Math.round(bufferedDuration) + "s<br>";
	stats += "Rendering Bitrate: " + Math.round(renderBitrate) + " bits/s<br>";
	stats += `Resolution: ${resolution.width} x ${resolution.height} <br>`;
}

Listening for playback events is done by providing the relevant callbacks to addPlaybackListener() the example below logs a resolution change, then when it is no longer required to listen to events, the same callbacks must be provided to removePlaybackListener():

JavaScript
var resolutionListenerDefinition = {
  resolutionChanged: (width, height) => {
    console.log("Resolution changed to " + width + "*" + height);
  },
};

playbackStatistics.addPlaybackListener(resolutionListenerDefinition);

...

playbackStatistics.removePlaybackListener(resolutionListenerDefinition);

Network statistics

This provides information on adaptive streaming (current and available bitrates), network usage (download speed and data downloaded), and the current content server. It also provides a listener interface for network events such as bitrate changes and network errors.

Usage examples

Retrieving adaptive streaming and network usage statistics:

JavaScript
let stats = "";
if (networkStatistics) {
  const adaptiveStreaming = networkStatistics.getAdaptiveStreaming();
  if (adaptiveStreaming) {
    stats += "Available bitrates: " + adaptiveStreaming.availableBitrates + " bits/s<br>";
    stats += "Selected bitrate: " + adaptiveStreaming.selectedBitrate + " bits/s<br>";
  }
  const networkUsage = networkStatistics.getNetworkUsage();
  if (networkUsage) {
    stats += "Download bitrate: " + Math.round(networkUsage.downloadBitrate) + " bits/s<br>";
    stats += "Download bitrate average: " + Math.round(networkUsage.downloadBitrateAverage) + " bits/s<br>";
  }
}

Listening for network events is done in the same way as listening for playback events, using addNetworkListener() and providing callbacks for events of interest. Here the selected bitrate is logged, then when it is no longer required to listen to events, the same callbacks must be provided to removeNetworkListener():

JavaScript
var bitrateListenerDefinition = {
  selectedBitrateChanged: (bitrate) => {
    console.log("Selected bitrate: " + bitrate)
  }
}

networkStatistics.addNetworkListener(bitrateListenerDefinition);

...

networkStatistics.removeNetworkListener(bitrateListenerDefinition);

Rendering statistics

This provides information on the nominal and measured framerate, and the number and rate of frame drops.

Usage example

Retrieving rendering statistics:

JavaScript
let stats = "";
if (renderingStats) {
  stats += "Frames Per Second Nominal: " + renderingStats.getFramesPerSecondNominal() + "<br>";
  stats += "Frames Per Second: " + renderingStats.getFramesPerSecond() + "<br>";
  stats += "Dropped Video Frames: " + renderingStats.getFrameDrops() + "<br>";
  stats += "Dropped Video Frames Per Second: " + renderingStats.getFrameDropsPerSecond() + "<br>";
}