Using PlayOverlay

Output setup

Three ways to get the graphics out: chroma key over HDMI into an ATEM Mini or similar mixer, a browser source in OBS, or a scoreboard on a venue screen.

Which one do I need?

If you stream with	Use
A hardware vision mixer, such as an ATEM Mini	Chroma key over HDMI
OBS on the same computer as PlayOverlay	OBS browser source
No stream, but there is a TV at the ground	Venue scoreboard

These combine. You can key the score bug on your mixer and show the scoreboard on a clubhouse TV from the same laptop.

Chroma key into an ATEM Mini

A laptop running PlayOverlay beside a compact HDMI video switcher, with a camera on a tripod beside the pitch — A typical touchline setup: camera and laptop both plugged into the ATEM Mini.

The laptop treats the mixer as a second monitor. PlayOverlay's display window goes full screen on it, and the mixer keys out the solid background colour so only the graphics sit over the camera picture. These steps use a Blackmagic ATEM Mini. Other mixers with a chroma keyer work the same way, with different button names.

1. Connect the laptop

Plug the laptop's HDMI output into a spare HDMI input on the ATEM Mini, for example input 4. Your cameras stay on the other inputs.
Set the laptop to extend its desktop onto the new display, not mirror it. On Windows press Windows key + P and choose Extend. On a Mac, open System Settings → Displays and make sure the ATEM is not set to mirror. On Linux, use your desktop's display settings.
Set that display to 1920 × 1080. The ATEM Mini converts what it is given, but a matching resolution keeps the graphics sharp.

2. Put the display window on the ATEM

In PlayOverlay, open Window Settings and press Move to Screen 2 (or whichever number the ATEM is).
Press Toggle Fullscreen, then Lock Windows so nothing gets dragged off by accident.
Run the Go live check. It warns you if the display window is still on the same screen as the dashboard.

3. Set up the key

Open ATEM Software Control on the laptop (or another computer connected to the ATEM) and go to the Switcher page.
In the palette on the right, open Upstream Key 1 and choose Chroma as the key type.
Set Fill Source to the HDMI input the laptop is plugged into.
Pick the key colour: use the sample tool on the blue background, or set the hue to blue on models without one. Adjust the key until the background disappears and the edges of the graphics stay clean.
Put the key on air with On Air next to Upstream Key 1, or KEY ON on the ATEM Mini's panel. The graphics now sit over whichever camera is live, and stay there as you cut between cameras.

Leave the key on for the whole match. To take the graphics off the stream, choose None in PlayOverlay's Display Controls. The mixer keeps keying an empty screen, so you don't have to touch it.

OBS browser source

OBS Studio with a Browser Source pointed at PlayOverlay, the score bug showing over a demo match image

If you stream with OBS, you can skip the second display and the chroma key. PlayOverlay serves the graphics as a web page with a transparent background, and OBS lays it over your scene. It is off by default.

In PlayOverlay, open System Settings → OBS Browser Source and switch it on. The default port is 4750. The status should read Running.
In OBS, add a Browser source to your scene, above the camera.
Set its URL to the one shown in PlayOverlay, and its width and height to your OBS canvas size, for example 1920 and 1080.

Browser source URL

http://127.0.0.1:4750/

That's all. The background is transparent, so there is nothing to key. The page updates live and reconnects by itself if OBS or PlayOverlay restarts mid-stream.

Pinned views

By default the browser source shows whatever the operator has on air. Add ?screen= and a screen name to the URL to pin a view to one screen, whatever the operator selects. This lets a second OBS scene, or a venue TV, show something different from the main feed while both come from the same running app.

`?screen=` value	Shows
(none)	Follows the operator (the default)
`matchTitle`	Match title
`scoreBug`	Score bug
`penalties`	Penalties
`endScreen`	End screen
`scoreboard`	Spectator scoreboard
`homeLineup`	Home team line-up
`awayLineup`	Away team line-up

Only the built-in screens can be pinned. Custom screens, and any value PlayOverlay doesn't recognise, follow the operator. System Settings shows a ready-made URL for the scoreboard view with a copy button.

Venue scoreboard

A TV in a clubhouse showing the PlayOverlay spectator scoreboard with both teams, the score and the time — The Scoreboard screen on a clubhouse TV.

The Scoreboard screen is made for spectators: both teams in their club colours, the score, the time of day and the match clock, big enough to read across a room. There are two ways to get it onto a TV or projector.

Without a stream

Connect the TV to the laptop as a second display, move the display window onto it as you would for a mixer, and put Scoreboard on air. The TV shows the scoreboard with no key colour around it.

Alongside a stream

Keep the stream fed as usual, and give the TV its own pinned view. Turn on the OBS browser source, then on the PlayOverlay computer open this address in a web browser, move that browser window to the display connected to the TV and make it full screen:

Scoreboard view

http://127.0.0.1:4750/?screen=scoreboard

Because the browser source only serves the computer it runs on, the TV has to be connected to the PlayOverlay computer. A smart TV's own browser can't reach it.

Something unclear or out of date on this page? Open an issue on GitHub.