Pomoc What are overlays

What are overlays

What are overlays?

Overlays are graphical layers displayed on screen during a stream. In StreamieHUB they are HTML pages served locally by the application, which you add to OBS as a Browser Source.

Each overlay runs as a separate page at the address http://localhost:47201/[name]. The application must be running in the background for overlays to work.

Available overlays

  • Alerts - http://localhost:47201/alerts
  • Chat - http://localhost:47201/chat
  • Goals - http://localhost:47201/goals
  • Event List - http://localhost:47201/eventlist
  • Death Counter - http://localhost:47201/death-counter
  • Giveaway / Wheel of Fortune - http://localhost:47201/giveaway
  • Screen Effects - http://localhost:47201/screen-effects
  • Master overlay - http://localhost:47201/master - contains shoutout, stream timer and soundboard player in a single source
  • Shoutout (standalone) - http://localhost:47201/shoutout - if you want to place shoutout as a separate OBS source
  • Custom Widgets - widgets created by the AI Generator in the Overlays → Widgets module; each widget has a unique URL shown in the panel; they can also be displayed automatically via alerts and bot commands using the Master Overlay
Instead of adding many separate sources to OBS, use the Master overlay (/master) - one Browser Source handles shoutout, stream timer and the soundboard player simultaneously. Individual widgets have their own position configuration inside the overlay.

How to add an overlay to OBS

  1. In OBS click + under the sources list and select Browser Source.
  2. Enter a name (e.g. "StreamieHUB Alerts") and click OK.
  3. In the URL field paste the overlay address, e.g. http://localhost:47201/alerts.
  4. Set Width: 1920 and Height: 1080. Enable the option Refresh browser when scene becomes active.
  5. Click OK. The overlay is now active - you can move and scale it in OBS like any other source.
The default overlay port is 47201. If you change it in the application Settings, remember to update the URL in OBS.

Layer order in OBS

Overlays should be at the very top of the sources list in your OBS scene - above the camera, game capture and other elements. Only then will they be visible on the stream.

Preview without OBS

You can open any overlay directly in a browser by typing its address. Useful for checking the appearance and configuration without launching OBS.

Cos nie dziala? Napisz do nas