I like to make my Team meetings a little more interactive, so I use OBS to make my webcam look more awesome. I’ve setup hosting for some javascript clock I found on the web somewhere.
Introducing the analog clock overlay
OBS allows you to overlay you webcam with all sort of things, there also is a browser source The browser source allows to you add a webpage as an overlay to your “production”, it even “hides” the background automatically by turning the background color to transparant with some custom css.
- Add a new browser source to a new scene.
- Set the url to
https://svrooij.io/overlays/clock.html
- And set the height to half the width. Height:
175
width:350
works great for me. - Drag the clock to the right spot.
How does the clock work
The clock is just a page with some javascript on it. It takes the current time of your computer and updates the clock accordingly every 100ms.