Symptom

When using a custom stream for video source, the video quality is flickering for subscribers. Update: we have fixed this issue in Opentok.js 2.21.1. The workaround is no longer required if you use Opentok.js 2.21.1 or further.

Applies To

• Javascript
• Custom Video Source
• Video API

Resolution

To avoid the flickering effect based on Publisher, you can explicitly set a frame rate on constraints. Here's an example where setting frame rate as 25, you can test with different values.

var videoConstraints = {};

/* Width and Height optional but, framerate is a must to avoid blinking */
// videoConstraints.width = 1280;
// videoConstraints.height = 720;

videoConstraints.frameRate = 25;

try {
 const stream = await navigator.mediaDevices.getDisplayMedia({ video: videoConstraints, audio: true })
 video = stream.getVideoTracks()[0]
 audio = stream.getAudioTracks()[0]
}

catch (e) {
 console.log(e)
}

Cause

When using a custom video source, the stream could be flickering because of a side effect of adjusting the bitrate estimation to network performance or resources limitations or policies on a Publisher side. In some cases the algorithm gets into an unstable situation, it becomes very sensitive and switches video on and off with very small changes in the measured network performance.