A desktop helper app and local OBS browser overlay that shows PUBG ranked stats for a selected player.
The recommended version is the Tauri desktop app. It stores the PUBG API key locally on the user's computer, starts a local overlay server, and gives the user an OBS Browser source URL.
- Tauri desktop app for Windows builds
- Built-in local overlay server for OBS
- PUBG ranked stats fetched through the official PUBG API
- Transparent OBS browser overlay
- One-time local API key setup in the desktop app
- Simple URL parameters for player, platform, mode, and refresh interval
app/- Tauri desktop UIsrc-tauri/- Tauri Rust backend and local OBS overlay serverpublic/overlay.html- overlay markuppublic/overlay.css- overlay stylespublic/overlay.js- overlay refresh and rendering logicserver.js- legacy Node development serversetup.bat- first-time Windows setup helperstart.bat- Windows start helper.env.example- example local environment file
- Node.js 18 or newer for development
- Rust and Cargo for Tauri development/builds
- WebView2 Runtime on Windows
- PUBG API key from the PUBG Developer Portal
Install dependencies:
npm installRun the Tauri app in development mode:
npm run tauri:devBuild the desktop app:
npm run tauri:buildThe built installer/binaries are created by Tauri under:
src-tauri/target/release/bundle/
- Open the desktop app.
- Paste a PUBG API key once.
- Enter player nickname, platform, ranked mode, refresh interval, and port.
- Save settings.
- Copy the generated OBS URL.
- Add that URL as an OBS Browser source.
Example OBS Browser URL:
http://localhost:3000/overlay.html?platform=steam&player=YOUR_NICK&mode=fpp-squad&refresh=60000
Replace YOUR_NICK with the PUBG player nickname.
The project still includes a Node/Express server for quick local testing without Tauri.
Install dependencies if needed:
npm installCreate a local .env file:
PUBG_API_KEY=YOUR_PUBG_API_KEY
PORT=3000Start the server:
npm startOpen the overlay URL:
http://localhost:3000/overlay.html?platform=steam&player=YOUR_NICK&mode=fpp-squad&refresh=60000
platform- PUBG platform shard, for examplesteam,xbox, orpsnplayer- PUBG player nickname, requiredmode- ranked mode:tpp-duo,tpp-squad,fpp-duo, orfpp-squadrefresh- refresh interval in milliseconds, default is60000
Missing API key- the PUBG API key is not saved in the desktop app.Invalid API key- PUBG API rejected the saved key. Check the key in app settings.API key forbidden- PUBG API denied access for this key. The key may be blocked or not allowed to use this endpoint.Rate limit- too many PUBG API requests. Increaserefreshor wait a few minutes.Network error- the app could not connect to PUBG API. Check the internet connection.PUBG API unavailable- PUBG API returned a server-side error. Try again later.Player not found- PUBG API did not find this player on the selected platform.No ranked stats- the player has no ranked stats for the current season.Mode unavailable- the player has ranked stats, but not for the selected mode.Invalid mode- the URL mode is not one oftpp-duo,tpp-squad,fpp-duo, orfpp-squad.
- Open OBS.
- Go to
Sources. - Click
+. - Select
Browser. - Paste the overlay URL.
- Set the width and height for your scene.
- Keep the background transparent.
Do not commit your PUBG API key to GitHub.
The recommended desktop setup is:
- The user enters the key once in the Tauri app.
- The app stores it in the user's local app config directory.
- The key is not included in OBS URLs.
- The key is not included in frontend JavaScript.
- The key is not committed to GitHub.
For legacy Node mode, .env is also supported and ignored by Git.
For a public project, there are three realistic ways to handle the API key:
-
Desktop app with local key, recommended for this project. Each user gets their own PUBG API key and stores it locally in the app config. This is safe for GitHub and does not require your hosted backend.
-
Hosted backend proxy. You host a server with your own API key and the overlay talks to your backend. This is easier for users, but you must handle rate limits, abuse protection, hosting cost, and key security.
-
Legacy local Node app. Users run
setup.batandstart.bat. This is simpler for development, but a packaged Tauri app is better for non-technical users.
Do not put the API key in frontend JavaScript, OBS URLs, or public repository files. Anything shipped to the browser or GitHub should be treated as public.
0 comments
log in to comment.