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.

JS

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:

JS

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():

JS

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:

JS

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():

JS

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:

JS

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>";
}