Skip to content
veyro
Create your overlay

Add your overlay to OBS

Your overlay runs in OBS as a Browser Source: a web page OBS shows on top of your game. It takes a minute, and you only do it once.

Your overlay URLs

Open your overlay in the editor and publish it: the editor lists a URL for each scene, ready to copy.

Open the editor

OBS loads the overlay from veyrostream.com, so the streaming computer needs to reach that address.

Browser Source size

Width and height must match the overlay's resolution, or it gets cut off or stretched.

  • 1920 × 1080Width 1920Height 1080
  • 1280 × 720Width 1280Height 720
  • 1080 × 1920 (vertical)Width 1080Height 1920

Add it to OBS

  1. 1

    Open OBS Studio

    Start OBS on the computer you stream from.

  2. 2

    Select the scene

    In Scenes, click the OBS scene the overlay belongs to, e.g. your gameplay scene.

  3. 3

    Add a source

    Click the + button under Sources.

  4. 4

    Choose Browser

    Pick Browser from the list.

  5. 5

    Name it

    Call it something you'll recognize, like “Veyro live”, and click OK.

  6. 6

    Paste the URL

    Paste the overlay URL of the matching Veyro scene into the URL field.

  7. 7

    Set the size

    Set Width and Height to your overlay's resolution (see Browser Source size above).

  8. 8

    Confirm

    Click OK. The overlay appears, transparent around the widgets.

  9. 9

    Put it in front

    Drag the Browser Source above your game and webcam in Sources, and line your webcam up with the camera frame.

Good to know

  • The overlay goes on top: in Sources, the Browser Source sits above the game and the webcam.
  • One OBS scene, one Browser Source, with the URL of the matching Veyro scene. You can reuse the same Browser Source in several OBS scenes.
  • Changes show up in OBS by themselves within about 30 seconds of publishing. No need to touch OBS again.
  • Veyro needs OBS Studio 31 or newer, whose browser is Chromium 127. To see which one yours uses, open Help, Log Files, View Current Log in OBS and look for “CEF Version”: it should be 127 or higher.

Troubleshooting

The background isn't transparent
Check that the URL is the overlay URL (…/overlay/…), not the editor. In the Browser Source properties, keep OBS's default Custom CSS, which makes the page background transparent.
It's the wrong size, cut off or blurry
Set Width and Height to the overlay's resolution, then right-click the source, Transform, Fit to screen (Ctrl F). Don't resize it by dragging its corners.
My changes don't show up
Publish (or Update) in the editor first: OBS only shows the published version. It updates within about 30 seconds; to see it at once, click “Refresh cache of current page” in the source properties.
“Overlay not found”
The URL is mistyped, the overlay isn't published yet, or its links were replaced. Copy the URL again from the editor.
Animations look broken or nothing appears
Your OBS may be too old. Update OBS Studio, then check the CEF version in the log (see above).