Overlay Streamer
This guide will go through the steps required to setup our overlay using OBS. We will use the Streamlabs OBS here, but the setup for standard OBS is the same.
OBS
Open OBS and add a source
OBS: Add Source
Select Browser Source
OBS: Add Browser Source
Give a name to this source, e.g. RoyaleAPI
OBS: Browser Source Properties
Our overlay requires login, so you must login first.
- In URL, enter
https://royaleapi.com/login
Our overlay is designed for a 16:9 window. Here are the values depending on your setup:
| Width | Height | |
|---|---|---|
| HD (4K) | 3840 | 2160 |
| HD (1080p) | 1920 | 1080 |
| HD (720p) | 1280 | 720 |
OBS: Login
DANGER
Make sure that you are not streaming your login steps.
You are now at the Login screen, but you can’t interact with the window.
Right-click at the RoyaleAPI source and select Interact
OBS: Interact
A new window opens and you can interact with this screen. Click the Discord Login button.
OBS: Interact: Discord Login
Typing in the OBS Interact window is very slow, so you should use the Log in with QR code option instead.
Discord Mobile
- Open Discord on your phone and tap your user icon.
- Tap Scan QR Code
- Aim your phone camera at the QR Code on your screen.
- Tap Yes, log me in on your phone.
OBS Interact: Authorize
Discord desktop will ask if you would authorize to login to RoyaleAPI. Click Authorize.
OBS: Logged In
Your OBS browser is now logged in to RoyaleAPI and you will be able to see the overlays. Right-click on the RoyaleAPI source and select Properties.
OBS: Source Properties
Enter the overlay URL given to you, e.g. https://royaleapi.com/overlay/ssgcup
All set
It is now safe to stream the overlay!
Voila — the overlay is now part of the streaming setup!