• Skip to Search
  • Skip to Content
  • Skip to Side Navigation
Getting StartedSDK ReferenceGlossary
  • Home
  • Getting Started
  • SDK Reference
  • Portal
  • How-To
  • Troubleshooting
  • FAQs
  • Reference
  • Glossary
How-To Guides
  • API Usage
  • Artificially lower bandwidth or bitrate
  • Set up publishing or subscribing for only audio or only video
  • Set up High Availability
  • Optimal RTMP encoder settings
  • How do I find my stream key?
  • Preventing stream sharing
  • Debug tokens in the Portal
  • Display multiple copies of the same stream
  • Find the video dimension of the stream
  • Measure timing
  • Create test input
  • Verify encoder ability to contribute via UDP
  • Manage issues with installing Phenix SDKs
  • RTSP ingest from IP cameras
  • Work with timestamps in reports
  • How do I deal with corporate firewalls?
  • How do I record streams for VOD playback?
  • How do I set up ad insertion?
  • How do closed captions work in the Phenix system?
  • How do I set up and use SRT Ingest?
  • How do I set up and use RTMP Ingest?
  • How do I set up and use replay?

How to set up measurement of timing information

This guide explains Phenix's recommendations for gathering timing information for the purpose of optimizing video experiences. Following this methodology will allow for clear conversations and data comparisons (apples to apples) to enable quicker resolutions to issues and a faster path toward optimized experiences.

Instructions

Phenix recommends using the Performance API built into modern browsers. Specifically, the performance.measure(name) function is used in several places to mark specific points in the video delivery process.

  1. Add performance.measure() calls at key measurement points

  2. Gather the resulting data as JSON or CSV (JSON/HTTP POST example shown below)

Key Measurement Points

Place calls to performance.measure with an appropriate text identifier in at least these places:

A) First line of your JavaScript.

JavaScript
1performance.measure('firstLineOfJS');

B) Just before the joinChannel call is made.

JavaScript
1performance.measure("joinChannel");
2 channel.joinChannel(joinChannelOptions, function joinChannelCallback(error, response) {

C) First thing in the joinChannelCallback.

JavaScript
1channel.joinChannel(joinChannelOptions, function joinChannelCallback(error, response) {
2 performance.measure("joinChannelCallback");

D) First thing in the subscriberCallback

JavaScript
1}, function subscriberCallback(error, response) {
2 performance.measure("subscriberCallback");

E) Set a callback on the videoElement.ontimeupdate

JavaScript
1var videoElement = document.getElementById('myVideoId');
2videoElement.ontimeupdate = function () {
3 performance.measure('firstFrameOfVideo');
4 videoElement.ontimeupdate = null;
5};

Gathering Results

After your player experience is completely loaded and in a steady state gather the information from the performance.measure() calls and send them to a backend for recording.

JavaScript
1var measures = performance.getEntriesByType('measure');
2var timingJson = new Object();
3timingJson.timestamp = Date.now();
4for (var m = 0; m < measures.length; m++) {
5 timingJson[measures[m].name] = measures[m].duration;
6}
7var xhr = new XMLHttpRequest();
8xhr.open('POST', 'https://logging-endpoint.com/path');
9xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
10xhr.send(JSON.stringify(timingJson));

Once gathered on a backend the data can be shared in JSON or CSV format.

Example:

JavaScript
1[
2 {
3 "firstLineOfJS": 305.4450000054203,
4 "joinChannel": 317.17000000935514,
5 "joinChannelCallback": 727.820000000065,
6 "subscriberCallback": 1059.5500000054017,
7 "firstFrameOfVideo": 1917.670000009821
8 },
9 ...
10]

A web page that shows an example of these measurements, including Time To First Frame (TTFF), can be found here.

Page Content
    Copyright 2023 © Phenix RTS
    Privacy Policy | Terms of Service
    v2023-01-31T21:25:10