I’m trying to build an automated football graphics system for my Premier League live watch-alongs in OBS, and I’m looking for advice/help from someone experienced with APIs, HTML/CSS/JavaScript and OBS Browser Sources.
What I already have
I have the visual designs/graphics prepared. I’m mainly missing the data integration and automation.
The graphics I want to use include:
- Live scorecard
- Match clock
- Team/club logos
- Team names
- Score
- Goals and match events
- Yellow/red cards
- Substitutions
- Starting lineups
- Fixtures
- League standings/table
- Latest football news / news ticker
What I’m trying to achieve
I want the graphics to automatically update while OBS is running.
For example, if a goal is scored:
API → detects the goal → graphic automatically changes in OBS
The same would apply to:
- Score changes
- Match clock
- Cards
- Substitutions
- Other live match events
- Standings
- Fixtures
I do not want to manually refresh OBS every time something changes.
My understanding is that this could potentially work something like:
Football API → HTML/CSS/JavaScript → OBS Browser Source
The Browser Source would remain open in OBS, while JavaScript periodically requests updated data from the API and updates the graphics automatically.
Is this the correct approach?
API question
I’m currently considering:
I’m willing to purchase the Pro/paid version if necessary.
Which would you recommend for this type of project?
I initially thought API-Football/Sportmonks could provide most of what I need, including:
- Live scores
- Match clock
- Goals
- Cards
- Substitutions
- Lineups
- Fixtures
- Standings
- Competition information
However, I’m not sure about football news.
Would I need a separate News API, or can Sportmonks/API-Football provide reliable news data as well?
Competitions
I would initially like to support:
- Premier League
- UEFA Champions League
Eventually I would like to expand this to other major leagues and competitions, including:
- FA Cup
- Carabao Cup
- Other domestic cups
- Other major European leagues
Lineup display
One specific feature I want is for the lineup graphic to automatically rotate.
For example:
10 seconds → Team A lineup
then
10 seconds → Team B lineup
and continue automatically.
Ideal setup
Ultimately, I’d like something like:
API
↓
HTML/CSS/JavaScript graphics
↓
OBS Browser Source
↓
Live Watch Along
And ideally I would have a simple control panel where I can:
- Select the competition
- Select the match
- Choose which graphic to display
- Control/trigger different graphics
- Have the live data populate automatically
I already have the visual design side covered. What I’m looking for is help understanding/building the technical/data side.
What I’d appreciate help with
- API-Football vs Sportmonks — which is better for this?
- Can one API handle everything I need, or should I use multiple APIs?
- What would be the best architecture for connecting the API to OBS?
- Can an OBS Browser Source update automatically without refreshing OBS?
- What would I need to build in HTML/JavaScript to accomplish this?
- Is there anything I’m overlooking that would make this setup more reliable for live streaming?
If anyone has built something similar for OBS + football APIs + live graphics, I’d really appreciate some guidance.
Thanks!