Hello, I have a Zoom App that uses the Layers API. My Windows users have reported their video flickering repeatedly when using the App. This is breaking my app in production for my Windows users.
I did a little debugging and found out whenever runRenderingContext()
is called, the screen flickers. I do not do anything else after runRenderingContext()
.
The reason I bring this up is I am using the drawImage()
function to draw on the video stream. This flickering behavior is breaking the draw capabilities.
Here is a video of what is happening with JUST the runRenderingContext()
:
Here is a video of what is happening when I’m attempting to drawImage()
. As you can see, the image appears then disappears right away due to the flickering.
Steps to reproduce:
- Launch a Zoom App on a WINDOWS machine
- call
runRenderingContext()
- (Optional) Call
drawImage()
and watch the image appear then disappear with the flicker.
Here is my code in full for configuring the SDK:
const configureSdk = async () => {
// to account for the 2 hour timeout for config
const configTimer = setTimeout(() => {
setCounter(counter + 1);
}, 120 * 60 * 1000);
try {
// Configure the JS SDK, required to call JS APIs in the Zoom App
// These items must be selected in the Features -> Zoom App SDK -> Add APIs tool in Marketplace
const configResponse = await zoomSdk.config({
version: "0.16",
capabilities: [
// Detect when camera turns on/off.
"onMyMediaChange",
// Layers API capabilities.
"getRunningContext",
"runRenderingContext",
"closeRenderingContext",
"drawImage",
"clearImage",
// For our Zoom app.
"getUserContext",
"getMeetingUUID",
"getMeetingParticipants",
"getVideoState",
// In App authorization
"authorize",
],
});
// console.log("App configured", configResponse);
// The config method returns the running context of the Zoom App
setRunningContext(configResponse.runningContext);
setUserContextStatus(configResponse.auth.status);
zoomSdk.addEventListener("onMyUserContextChange", (event) => {
setUserContextStatus(event.status);
});
// Attempt to close and run rendering context on startup.
zoomSdk
.closeRenderingContext()
.then(() => {
console.log("STARTUP: Closing existing rendering context.");
})
.catch((e) => {
console.log("STARTUP NO-OP: Context already closed.");
});
zoomSdk
.runRenderingContext({
view: "camera",
})
.then(() => {
console.log("STARTUP: Running rendering context.");
})
.catch((e) => {
console.log("STARTUP NO-OP: Already rendering context.");
});
} catch (error) {
console.log(error);
setError("There was an error configuring the JS SDK");
}
return () => {
clearTimeout(configTimer);
};
};
configureSdk();
}, [counter]);