Add a telemetry Overlay in OBS

OBS (Open Broadcaster Software) is a handy software for video production. It’s simple, lightweight and most importantly free & open source.

You can download the latest version of OBS form the official website. Here is how to load an Overlay from Overlay.live and use it in OBS:

Step 1: Open OBS and add a “Browser” source

In OBS you can select various source types as inputs. To add an overlay from Overlay.live we must select the “Browser” type from the source options.

Step 2: Enter the Overlay URL

In the OBS browser source configuration window we are able to insert the URL of a webpage to load as well as specify it’s loading dimensions.

  • Head over to your Overlay.live dashboard in select the Overlay to open it with the Overlay Inspector.
  • Scroll all the way below the green preview and select the Overlay URL.
  • Copy Paste this URL into the OBS webpage URL.
  • Important: Make sure to enter 1920×1080 page resolution as this is the resolution we use.

Step 3: Save & display the Overlay

That’s it, now, save and close the browser source configuration page. In your sources, make sure that the source is visible and, automatically, OBS should be refreshing the page and loading the Overlay.

This Overlay with continuously keep itself updated with the latest values streamed from your sensors.

Note: If you make modifications to the layout of the overlay from the overlay inspector, you will need to refresh the source in OBS to update it to the latest adjustments you made. In the future, we will probably add a hard-refresh procedure directly form within the Overlay inspector.