Streaming Overlay

Derby provides a real-time browser-based overlay for live streaming software like OBS Studio and vMix. The Arena Control Panel lets you manage arenas, assign fights, control cameras, and push overlay data to your stream — all from one screen.

Quick Setup

Get streaming in under a minute:

Open the Arena Control Panel

In Derby, navigate to Arena Control Panel from the main menu.

Click Quick Setup

If no arenas are configured, click the Quick Setup button. This creates a default arena with a single USB camera — zero configuration needed.

Add Browser Source in OBS

In OBS, add a new Browser source. Set the URL to http://localhost:5080/overlay. Set width to 1920 and height to 1080 (or your stream resolution).

Assign a fight

Enter a fight number in the Arena Control Panel and click Assign. The overlay updates instantly.

Arena Control Panel

The Arena Control Panel is the operator's dashboard for managing live streaming sessions. It provides:

  • Arena list — See all configured arenas and their current state (Idle, Active, Completed)
  • Fight assignment — Assign a fight number to an arena to start streaming
  • Fight timer — Per-arena stopwatch that resets automatically when a match is cleared
  • Layout selector — Choose the overlay layout from a dropdown (Standard, Compact, etc.)
  • Camera switching — Switch between cameras assigned to an arena
  • Overlay toggle — Show or hide the overlay
  • Overlay URL — Copy the overlay URL to clipboard for pasting into OBS/vMix

Arena Configuration

Click the configuration button in the Arena Control Panel to open the Arena Configuration dialog. From here you can:

  • Add, rename, and delete arenas
  • Configure cameras per arena (name, URL, type: USB or HTTP)
  • Reorder arenas

Each arena has a unique arena number. The system prevents duplicate arena numbers.

How It Works

Derby runs a local WebSocket server that pushes real-time data to a browser source. The overlay updates instantly when fights change, timers tick, or outcomes are recorded.

Overlay Content

The overlay displays:

  • Current fight — Teams, weights, delta
  • Fight timer — Live timer synced with the Arena Control Panel
  • Rankings bar — Top teams by score
  • Round indicator — Current round number

OBS Studio Setup

Add Browser Source

In OBS, add a new Browser source.

Configure the URL

Set the URL to http://localhost:5080/overlay. Set width to 1920 and height to 1080 (or your stream resolution).

Position the overlay

Resize and position the overlay in your scene. The background is transparent.

Customization

The overlay supports URL parameters for customization:

  • ?theme=dark — Dark theme (default)
  • ?theme=light — Light theme
  • ?showRankings=false — Hide rankings bar
  • ?showTimer=false — Hide timer

You can also change the overlay layout directly from the Arena Control Panel dropdown without reloading the browser source.

vMix Setup

  1. Add a Web Browser input
  2. Set URL to http://localhost:5080/overlay
  3. Enable transparency in browser settings
  4. Add to your scene as an overlay layer

Arena Workflow

Each arena follows this state cycle:

  1. Idle — Arena is ready. Assign a fight number to begin.
  2. Active — Fight is live. Timer is running. Overlay shows fight info.
  3. Completed — Fight is finished. Mark as finished or clear the match.
  4. Idle — Clear match returns the arena to idle. Timer resets to zero. Ready for the next fight.

Troubleshooting

Overlay not connecting

  • Ensure the overlay server is running (check the Arena Control Panel status)
  • Check that port 5080 is not blocked by firewall
  • Try refreshing the browser source

Overlay not updating

  • Verify a fight has been assigned in the Arena Control Panel
  • Check WebSocket connection in browser console
  • Restart the overlay server

No arenas showing

  • Use Quick Setup to create a default arena, or open Arena Configuration to add arenas manually
  • Ensure arenas are enabled

Related