Use Volta as a Layer in OBS

This tutorial walks you through compositing a Volta experience as a transparent overlay in OBS Studio. By using a chroma key green background, you can layer your experience on top of cameras, screen captures, or any other sources in your scene.

1. Enable Chroma Key Green background

   In your experience’s settings, enable the Chroma Key Green background option. This replaces the default background with a solid green (#00B140) that OBS can remove, leaving only your interactive elements visible.

2. Download and install OBS Studio

   If you don’t already have it, download OBS Studio from obsproject.com. It’s free, open-source, and available for Windows, macOS, and Linux.

3. Add a Browser Source

   In OBS, click the + button in the Sources panel and select Browser. Give it a name (e.g. “Volta Experience”) and click OK.

4. Set the URL to your experience’s output

   In the Browser Source properties, paste the /output/ URL of your experience. This is the audience-facing display URL — you can find it in your experience’s settings. Set the width and height to match your scene resolution (e.g. 1920 x 1080).

5. Add a Chroma Key filter

   Right-click the Browser Source in your Sources list, select Filters, then click the + under Effect Filters and choose Chroma Key. The default green key type should work immediately. Fine-tune the Similarity and Smoothness sliders if you see any green fringing.

6. Compose the layer in your scene

   Drag the Browser Source above your other sources (camera, screen capture, images, etc.) in the Sources panel. The green background is now transparent, so your Volta experience floats on top of everything beneath it. Resize and reposition as needed.