I want to display Timer or clock on zoom video

Hi, I want to make an app that provides a simple interface for a user to set hours and minutes on a countdown timer during a Zoom meeting. Once the countdown is set and started, a small clock overlay that displays the countdown timer would appear to reside in the corner of the meeting window. so i just need help with how can i display the timer on Zoom video. like the Timer Zoom app does which is listed on the marketplace. so currently i can display text, and images through setVirtualForeground but I am unable to display a react component like a timer. Let me know if this makes sense, thanks!

1 Like

@MaxM @Robert.Wallis Hi guys please help if possible :slightly_smiling_face:

Yes that’s right. Zoom’s Timer uses setVirtualForeground. And to use setVirtualForeground you need an ImageData object. One way to make an ImageData is by using a <canvas>, which is what Zoom’s Timer App does.

That means, it

Also be sure to set persistence:"app" so that if the user closes the app, the timer goes away.

Thanks, @Robert.Wallis for your Response Really Appreciated, so previously I tried to display the timer through camera mode, but drawWebview takes a lot of time to initialize Do you know any technique or something that can speed up this flow @Robert.Wallis ?

thanks Again,

The initial runRenderingContext does take a long time. It has to start CEF, so it’s up to the Chromium team to make it faster.

However you can use drawWebView and clearWebView to show or hide the webview quickly after it has started. This does not start or end the chromium process, but just makes the whole webview visible or invisible.

So when your app starts, you could runRenderingContext right away, then when the person starts a timer drawWebView. Maybe that would work?

Just a quick note in case someone is looking for this… the Timer - Clock, Agenda, Countdown & Stopwatch App for Zoom integrates directly into the Zoom application and can display a Timer or Clock on Zoom Video with many customization options.