Coding Stephan

Introducing OBS Clock

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.

  1. Add a new browser source to a new scene.
  2. Set the url to https://svrooij.io/overlays/clock.html
  3. And set the height to half the width. Height: 175 width: 350 works great for me.
  4. Drag the clock to the right spot.

OBS Screenshot

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.