How to Set Up OBS Direct Sync (Step-by-Step Guide)
— Breaker Labs
This guide walks through enabling OBS Direct Sync end-to-end — from flipping the switch in OBS to clicking "Add to OBS" on your first widget. The whole process takes under two minutes once you know where to look.
You need: OBS Studio 28 or newer. The WebSocket server is built in; you don't need to install a plugin.
Step 1 — Enable the OBS WebSocket Server
Open OBS Studio. In the menu bar at the top, click Tools → WebSocket Server Settings.
A dialog opens. Check Enable WebSocket server. Leave the Server Port at the default 4455 and leave Enable Authentication checked. (You can disable auth, but don't — we'll cover why under troubleshooting.)
Click Apply to start the server, then click Show Connect Info at the bottom of the dialog. A second popup appears with the server IP, port, and a long random password. Click the Copy button next to Server Password to copy it to your clipboard.
Keep this popup open or stash the password somewhere safe for the next 30 seconds. You'll paste it into BreakerLabs.
Security note: This password is generated by OBS, not by you. It grants WebSocket clients (like our dashboard) full control over your OBS instance. Don't share it; don't post screenshots of it. We never see or store this password — it stays in your browser tab only.
Step 2 — Add to OBS from the Command Center
Back in BreakerLabs, go to your Stream Command Center. Each active widget card has a gold Add to OBS button in the header — right next to the existing "OBS Setup" toggle.
Click it. A modal opens asking for your OBS WebSocket password. Paste it in.
If you're running OBS on a different machine or non-default port, expand the Connection settings disclosure and adjust host/port. For most users, leave the defaults.
Click Connect. The dashboard authenticates with OBS, fetches your scene list, and flips to Step 2.
Step 3 — Pick a scene
The modal now shows a dropdown of every scene currently in your OBS, pre-selected to your current program scene (so the widget will appear immediately where viewers are looking).
Want it on a different scene? Pick it. The preview line below the dropdown shows the input name and dimensions — for example, Adding "BreakerLabs: Team Tracker (MLB)" → 900×600 @ 30fps.
Click Add to OBS. The modal closes. A toast confirms "BreakerLabs: Team Tracker (MLB)" added to OBS.
Switch over to OBS and your widget is live in the chosen scene at the right dimensions.
Multi-widget setup
The password prompt is once per browser tab, not per widget. To add multiple widgets:
- Click "Add to OBS" on the first card → enter password → pick scene → done
- Click "Add to OBS" on the next card → modal opens directly to the scene picker (no password) → pick scene → done
- Repeat
Four widgets = four clicks, one password prompt.
Re-syncing later
Here's the magic. Click "Add to OBS" again on a widget you've already synced. Instead of duplicating it, the dashboard finds the existing source by name and updates its settings in place.
What gets updated:
- The widget URL (in case it changed)
- Width, height, FPS
What stays untouched:
- Your scene-item position and scale
- Filters you applied (drop shadow, color correction, masks)
- Audio adjustments
- Which scenes the source is in
- Visibility/lock state
You can move the source to the corner of your scene, scale it to half size, add a color correction filter — and a re-sync won't disturb any of that.
The toast distinguishes the two cases: "… added to OBS" for a new source vs "… updated in OBS" for a re-sync.
Troubleshooting
"Can't reach OBS. Make sure OBS is running and the WebSocket Server is enabled."
Most common cause: WebSocket Server isn't enabled yet. Go back to Tools → WebSocket Server Settings in OBS, confirm the checkbox is ticked, and click Apply.
Second-most common: OBS isn't running. Open OBS, then retry.
Third (rare): OBS is running on a non-default port. Click Connection settings in the modal and change the port to match what OBS shows.
"That password didn't work."
The password is sensitive to whitespace. If you typed it manually instead of pasting, you might have missed a character. Open Connect Info again in OBS, click Copy, and paste fresh.
The password field clears on auth failure so you can paste again without selecting and deleting first.
"OBS is running an older WebSocket plugin."
Your OBS is on version 27 or older. The built-in WebSocket Server is OBS 28+. Either:
- Update OBS to 28 or newer (recommended)
- Use the manual Browser Source flow — the existing "OBS Setup" disclosure on each card still gives you the URL + dimensions to copy
"Your browser blocked the connection to OBS."
Chrome occasionally blocks WebSocket connections to localhost when it thinks the page is on an "insecure" private network. If you see this, check the Help page for the latest workaround, or use the manual setup as a fallback.
Connection works but Add fails
If you get an error after picking a scene — most often OBS rejected the request — the scene might have been deleted while the modal was open. Close and re-open the modal; the scene list will refresh.
What this does NOT do
For clarity:
- It doesn't auto-create a scene for you. You pick from your existing scenes.
- It doesn't push config changes in real time. Editing the widget's colors in the editor still requires a Browser Source refresh in OBS, just like the manual flow.
- It doesn't talk to anything outside your machine. The dashboard connects to
ws://localhost:4455(your local OBS) directly from the browser. Our API isn't involved.
Next
Once Direct Sync is set up, the Command Center becomes your full mission control — view switching, team picks, takeover animations, all syncing to OBS in under 100ms. Open Command Center →