BROADCAST
Broadcast & Streaming
Battle Trade does not host video. Hosts run their own streaming stack (OBS → Restream / Twitch / YouTube) and use Battle Trade for the on-screen overlays and the spectator experience.
Architecture
- Host streams their webcam (and any contestant cameras) through OBS.
- OBS adds Browser Sources pointed at our
/overlay/[lobbyId]/*routes — these are HTML pages on a transparent background that render the live scoreboard, sponsor band, asset ticker, and prediction markets ticker. - OBS sends the composited feed to Restream / Twitch / YouTube.
- Host pastes the public viewer URL into the lobby (via the broadcast admin panel). All
/lobby/[id]/spectate,/wall,/castsurfaces embed it.
Overlay routes (OBS Browser Sources)
All overlays render on transparent background. Add as Browser Sources in OBS on top of the camera scene.
/overlay/[id]All-in-oneScoreboard + sponsors + tickers in one URL. Drop on top of your camera scene.
/overlay/[id]/scoreboardScoreboardTop-left logo, ROUND number, timer, horizontal player PnL strip.
/overlay/[id]/sponsorsSponsorsBottom scrolling sponsor band. Pulled from lobby config.
/overlay/[id]/tickersTickersAsset price band + prediction markets band.
Spectator surfaces
For the audience watching on battle.fyi (not in OBS):
/lobby/[id]/spectateSpectate (Viewing Party)Embedded host stream + chat + leaderboard rail + sabotage feed + prediction markets.
/lobby/[id]/leaderboardLive LeaderboardPure-data scoreboard. Great as a venue TV display or a second OBS Browser Source.
/lobby/[id]/wallWall4K display layout for 80" venue screens.
/lobby/[id]/castCastCaster view: stream top half, narrative feed bottom half.
/lobby/[id]/broadcastBroadcastFull production view with TopBar/LeftPanel/EventOverlay.
Setting the stream URL
- Stream from OBS to Restream / Twitch / YouTube.
- Copy the public viewer URL (e.g.
youtube.com/watch?v=...ortwitch.tv/yourchannel). - Open
/lobby/[id]/broadcast?admin_pw=YOUR_PW. - Paste the URL into the “Stream Embed URL” field, click SET.
- All spectator surfaces now embed the stream.
API Endpoints
GET /api/lobby/[id]/stream
Returns the stream embed URL set on the lobby.
PUT /api/lobby/[id]/stream
Set the stream embed URL (admin only).
// Request (requires admin auth)
{ "stream_url": "https://youtube.com/watch?v=..." }
// Response
{ "ok": true, "stream_url": "https://youtube.com/watch?v=..." }OBS Setup (one-time)
- In OBS, add a Browser source.
- URL:
https://battle.fyi/overlay/LOBBY_ID(or one of the per-component URLs above). - Width 1920, Height 1080 (or 3840×2160 for 4K).
- Check “Refresh browser when scene becomes active”.
- Drag the Browser source on top of your camera scene.
- Stream from OBS to Restream / Twitch / YouTube as usual.
Kill Switches
NEXT_PUBLIC_BROADCAST_WALL_ENABLED=false # Disables /lobby/[id]/wall NEXT_PUBLIC_BROADCAST_CAST_ENABLED=false # Disables /lobby/[id]/cast
