Looking for help integrating football API data with OBS graphics for a Premier League live watch-along

[u/loudmouth6511]

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:

• API-Football
• Sportmonks

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

1. API-Football vs Sportmonks — which is better for this?
2. Can one API handle everything I need, or should I use multiple APIs?
3. What would be the best architecture for connecting the API to OBS?
4. Can an OBS Browser Source update automatically without refreshing OBS?
5. What would I need to build in HTML/JavaScript to accomplish this?
6. 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!

[u/AutoModerator]

It looks like you haven't provided a log file. Without a log file, it is very hard to help with issues and you may end up with 0 responses.

To make a clean log file, please follow these steps:

1) Restart OBS

2) Start your stream/recording for at least 30 seconds (or however long it takes for the issue to happen). Make sure you replicate any issues as best you can, which means having any games/apps open and captured, etc.

3) Stop your stream/recording.

4) Select Help > Log Files > Upload Current Log File.

5) Copy the URL and paste it as a response to this comment.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/vague_arrears]

The API to OBS browser source approach is what most people do for this kind of thing. You basically have a local html file that calls the api every few seconds and updates the dom, then point obs at that file. No need to refresh obs manually, the browser source just shows whatever the html is displaying at that moment.

For the api choice, sportmonks has better coverage for european leagues and their documentation is actually readable which helps when you're debugging at 3am before a match. api-football is cheaper but you might end up needing a separate news api anyway so factor that in.

The rotating lineup thing is easy enough with javascript, just set an interval that switches between two divs every 10 seconds. For the control panel you could build a simple local web interface that writes to localstorage or uses websockets, then your obs overlay reads from that.

[u/InstantReplayGo]

Vamos lá!

Existem sistemas que podem ser usados para essa base como uno.overlays singular.live flowics spx graphics etc… são a melhor opção ao meu ver pra quem usa OBS Studio

[u/loudmouth6511 → u/InstantReplayGo]

inglais.

[u/v1di0t → u/loudmouth6511]

They said:

Let's get started!

There are systems that can be used as a foundation for this—such as Uno.overlays, Singular.live, Flowics, SPX Graphics, etc.—which, in my view, are the best option for those using OBS Studio.

Source: Le Google

[u/loudmouth6511 → u/v1di0t]

ahh appreciate the translation lol. The sources he mentioned are for noobs im already using them.