OneHub works with any streaming app that can show a web page on top of your cameras. Tell us how you stream and we'll show you exactly where everything goes.
Not sure? Most football creators use OBS Studio. It's free.
Your two OneHub links
Every setup uses the same two links. You'll find them in your OneHub welcome email when early access opens.
Goes in your streaming app
Overlay link
The graphics your viewers see: scoreboard, stats panels, ticker, sponsors. The background is see-through, so your cameras show underneath.
onehub.football/overlay/…
Stays with you
Control panel link
Where you run the show: put stats on air, update the score, switch light and dark. Open it in a browser, on a second screen, a laptop or a tablet.
onehub.football/control/…
Keep both links private. Anyone with your control panel link can change what's on your stream.
Step by step
Pick how you stream in the box above and your steps appear here.
OBS Studio
Works directlyAbout 10 minutesWindows · Mac · Linux
OBS takes OneHub as a Browser source that sits on top of your cameras. You can stream straight to YouTube, Twitch, Kick or Facebook from here.
Set your canvas to 1080p
Settings → Video → Base (Canvas) Resolution 1920×1080
Set Output (Scaled) Resolution to 1920×1080 as well if your computer and internet can handle it. OneHub is designed at this size.
Add your camera
Sources + → Video Capture Device → Create new → choose your webcam
Add each guest the same way. For remote guests, VDO.Ninja is a free way to bring them into OBS as their own source.
Add OneHub
Sources + → Browser → name it "OneHub" → OK
URL: paste your overlay link
Width 1920, Height 1080
Leave Custom CSS as it is. It's what makes the background see-through.
Put OneHub on top
In the Sources list, drag OneHub above your cameras. Anything higher in the list shows in front.
Line up your cameras
In the control panel, Cameras & guests shows the exact position and size of each camera box for Solo, Host + 1 and Host + 2.
Right-click a camera → Transform → Edit Transform → type in the position and size
Add the control panel inside OBS
Docks → Custom Browser Docks… → name it "OneHub control" → paste your control panel link → Apply
It appears as a panel you can drag and resize. Prefer a second screen? Open the control panel link in Chrome instead. Both work.
Connect your channel
Settings → Stream → choose YouTube, Twitch or your platform → Connect Account
Or paste a stream key. On YouTube it's in YouTube Studio → Create → Go live → Stream.
Test, then go live
Check the control panel says your overlay is connected, try a few graphics, then press Start Streaming. To record a practice run instead, press Start Recording.
Tip: right-click the OneHub source → Interact to use keyboard shortcuts straight on the overlay: 1–9 take rundown items, S switches the bottom bar, L flips light and dark.
Streamlabs Desktop
Works directlyAbout 10 minutesWindows · Mac
Streamlabs Desktop takes OneHub as a Browser Source, the same way it runs its own alerts and widgets.
Set your canvas to 1080p
Settings → Video → Base (Canvas) Resolution 1920×1080
Add your camera
Sources + → Video Capture Device → choose your webcam
Add OneHub
Sources + → Browser Source → Add Source → name it "OneHub"
URL: paste your overlay link
Width 1920, Height 1080
Click Done
Put OneHub on top
Drag OneHub above your cameras in the Sources list. If you use Streamlabs alerts, keep those above OneHub so they aren't hidden.
Line up your cameras
Match each camera to the boxes listed under Cameras & guests in the control panel. Drag and resize in the preview, or set exact numbers in the source's transform settings.
Open the control panel
Open your control panel link in Chrome, ideally on a second screen or laptop, so you can run graphics while you talk.
Go live
Check the control panel says your overlay is connected, then go live as normal.
StreamElements (SE.Live)
Works directlyAbout 10 minutes
SE.Live is a plugin that runs inside OBS Studio, so OneHub goes in as an ordinary OBS Browser source alongside your StreamElements alerts and overlays.
Follow the OBS Studio steps
Canvas, cameras, the OneHub Browser source and the control panel dock are exactly as in the OBS guide.
Order your layers
From top to bottom: StreamElements alerts, then OneHub, then your cameras. Alerts stay visible and OneHub still covers the cameras.
Watch for overlap
If a StreamElements overlay sits in the same spot as a OneHub panel (bottom bar, right-hand panel or the bottom-right sponsor box), move it or switch that OneHub piece off in the control panel.
Go live through SE.Live as usual
Nothing else changes. Your StreamElements channel connection and multistreaming keep working as before.
vMix
Works directlyAbout 10 minutesWindows
vMix loads OneHub as a Web Browser input, keeping the see-through background, and lays it over every shot using an overlay channel.
Add OneHub as an input
Add Input → Web Browser
URL: paste your overlay link
Width 1920, Height 1080
Put it over everything
On the OneHub input, click overlay button 1. It now sits on top of whichever camera or shot is live.
Line up your cameras
Build your camera layouts to match the boxes listed under Cameras & guests in the control panel.
Open the control panel
Open your control panel link in a browser on a second screen.
Go live
Check the control panel says your overlay is connected, then stream as normal.
Ecamm Live
Works directlyAbout 5 minutesMac
Ecamm Live calls a web page overlay a Widget Overlay. Transparent widgets like OneHub sit on top of your cameras.
Add a widget overlay
Overlays menu → New Widget Overlay
Or click the globe button in the Overlays window.
Set it up
Display Name: OneHub
Paste your overlay link
Width 1920, Height 1080
Tick Fill Entire Frame
Smooth the clock
Widgets update 15 times a second by default. If your Mac copes, raise the frame rate so the match clock and animations look smoother.
Open the control panel
Open your control panel link in Safari or Chrome, ideally on a second screen.
Go live
Check the control panel says your overlay is connected, then broadcast as normal.
StreamYard
Through OBSAbout 20 minutes
StreamYard's overlays are images and videos you upload. It can't run live web graphics like OneHub. The standard fix is to build your picture in OBS and send it into StreamYard as if it were your webcam.
Best for matchday
Stream from OBS instead
Everything in one place, graphics always full screen. Bring guests into OBS with VDO.Ninja.
Keep StreamYard
Use OBS as your camera
Keep StreamYard's guest links, chat and destinations. The steps are below.
Install OBS Studio
Free from obsproject.com. StreamYard's own guide asks for version 30 or newer.
Build your picture in OBS
Set the canvas to 1920×1080, add your webcam, then add OneHub as a Browser source on top. Steps 1 to 5 of the OBS guide cover this. Use the Solo camera layout in the OneHub control panel.
Start the virtual camera
OBS Controls panel → Start Virtual Camera
OBS now shows up as a webcam called OBS Virtual Camera.
Choose it in StreamYard
Restart your browser, open your StreamYard studio and pick OBS Virtual Camera as your camera.
The virtual camera carries picture only, so pick your real microphone in StreamYard.
Use a full-screen layout
Put yourself on screen alone so the graphics fill the frame. When StreamYard guests join, your OBS picture, graphics included, shrinks into your own tile.
Open the control panel
Open your control panel link in another browser window or on a second screen, and run the show from there.
Restream Studio
Browser sourceor through OBS
Restream Studio has its own browser source option, and Restream also accepts a stream from OBS. Either route works with OneHub.
Option A
Browser source in Studio
Stay in the browser. Good for talk shows.
Option B
OBS into Restream
Full control of cameras and layout, still multistreaming through Restream.
Option A: add OneHub as a browser source
In Restream Studio, use the browser source option. Restream's help article "Add a browser source in Studio" shows where it is. Paste your overlay link and set it to full screen at 1920×1080.
Check the fit
Look at the preview. If any part of the scoreboard or side panel is cut off, or the background isn't see-through, use Option B instead.
Option B: stream OBS to Restream
Build your picture in OBS (steps 1 to 6 of the OBS guide). Then:
OBS Settings → Stream → choose Restream, or Custom with the server and stream key from your Restream dashboard
Open the control panel
Open your control panel link in another window or on a second screen.
Worth knowing: we haven't tested every Restream Studio layout with OneHub yet. If anything looks off, Option B always works, and we'd like to hear about it at hello@onehub.football.
Straight to YouTube
Through OBSAbout 15 minutes
YouTube's built-in webcam and phone streaming don't let you put live web graphics over your camera. Use free streaming software, known as an encoder, to put the picture together and send it to YouTube. OBS Studio is the usual choice.
Turn on live streaming
If you've never streamed from your channel, enable live streaming in YouTube Studio. YouTube says the first time can take up to 24 hours, so do this well before match day.
Install OBS Studio
Free from obsproject.com.
Build your picture
Canvas 1920×1080, your webcam, then OneHub as a Browser source on top. Steps 1 to 6 of the OBS guide.
Connect YouTube
OBS Settings → Stream → Service YouTube → Connect Account
Or use a stream key: YouTube Studio → Create → Go live → Stream tab, then paste the key into OBS.
Go live
Press Start Streaming in OBS. YouTube creates the watch page, and your subscribers get notified as usual.
Other streaming apps
Usually works directly
If your app can show a web page on top of your cameras, it can run OneHub. The option is usually called a Browser, Webpage or Link source.
Find the web page source
XSplit: Add Source → Webpage
PRISM Live Studio: Sources + → Browser
Meld Studio: Layers + → Browser
TikTok LIVE Studio: Add Source → Link
Paste your overlay link
Set the size to 1920 × 1080 and put it above your cameras.
Check the background
The area around OneHub's graphics should be see-through. If it shows white or black, look for a transparency or custom CSS setting in the source. Or build your picture in OBS and bring it in as a camera, as in the StreamYard guide.
Open the control panel
Open your control panel link in a browser on a second screen and go live.
Using something not listed here? Email hello@onehub.football with the app's name and we'll add a guide.
Before your first live show
Do a private run-through. Record a minute, or stream as Unlisted on YouTube, and check:
The control panel says your overlay is connected
Your cameras sit inside the boxes, with nothing hidden behind a panel
Putting a stat on air from the control panel shows on the stream within a second or two
A test goal plays the full-screen takeover, then remove it from Goals & cards
Light and dark both look right with your camera and lighting
Your microphone is working. OneHub adds no sound of its own.
If something's not right
The graphics have a white or black background
The source isn't see-through. In OBS and Streamlabs, reset the Browser source's Custom CSS to its default. In other apps, look for a transparency setting on the source.
Changes in the control panel don't show on stream
Check the control panel's connection label. If it says the overlay isn't connected, check the overlay link was pasted in full, then right-click the source and choose Refresh.
The graphics are cut off or blurry
The source should be 1920 × 1080 and your canvas 1920 × 1080. If your canvas is smaller, keep the source at 1920 × 1080 and use Transform → Fit to screen.
My camera is covered by a panel
Match your camera to the positions under Cameras & guests in the control panel. Or switch pieces off: the bottom bar, the sponsor box and the ticker can all be turned off individually.
The match clock jumps or stutters
Usually the source is set to refresh or shut down when hidden. In OBS, untick "Refresh browser when scene becomes active" on the OneHub source.
Still stuck?
Email hello@onehub.football with your streaming app and a screenshot. We reply to every message.