Set up the OBS Overlay
Prerequisites
- DJ Live Playlist is running (the WebSocket server starts with the app)
- OBS Studio is installed
Add the browser source
- In OBS, click + in the Sources list
- Choose Browser (Browser Source)
- Give it a name, e.g.
DLP Overlay
Source settings
| Setting | Value |
|---|---|
| URL | http://localhost:9876/dlp |
| Width | 800 px (adjustable) |
| Height | 150 px (adjustable) |
| FPS | 30 |
Check "Refresh browser when scene becomes active" to guarantee automatic reconnection.
Position the overlay
In your OBS scene, move and resize the source to your preference. The overlay is transparent by default — it integrates cleanly over your video or background.
Overlay not showing?
Check that DJ Live Playlist is launched before OBS. If OBS was opened first, right-click the source → Refresh.
Customise the appearance
In DJ Live Playlist → Configuration → Overlay tab:
| Option | Description |
|---|---|
| Theme | Several visual styles available |
| Artwork | Show / hide album image |
| QR code | Show / hide QR code |
| Deck badge | Show / hide deck name |
| Animation | Fade in/out speed and style |
Any change is applied in real time in OBS via the CONFIG_UPDATE message.