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 setPlaybackListener(); the example below logs a resolution change:

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

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 setNetworkListener() and providing callbacks for events of interest. Here the selected bitrate is logged.

JavaScript
networkStatistics.setNetworkListener({
  selectedBitrateChanged: (bitrate) => {
    console.log("Selected bitrate: " + bitrate)
  }
});

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