OBS Studio 30+ Integration & Transparent Browser Overlays
Most PopularComplete guide for automatic 1-click OBS connection, browser docks, and transparent overlays.
MakeChurchEazy communicates directly with OBS Studio 28, 29, and 30+ via the official OBS WebSocket v5 protocol. With MakeChurchEazy, you never have to wrestle with green-screen chroma keying, blurry window captures, or manual lower-third positioning. Everything renders as crisp, transparent HTML5 motion graphics with 0ms latency.
1. Enable OBS WebSocket v5 in OBS Studio
OBS Studio 28 and newer includes the high-performance WebSocket v5 server built-in. No external plugins are required.
Open WebSocket Settings
Launch OBS Studio. In the top application menu bar, navigate to Tools ➔ WebSocket Server Settings.
Check 'Enable WebSocket server'
Ensure the 'Enable WebSocket server' box is ticked. Verify that Server Port is set to 4455 (the official standard port).
Server Port: 4455 Server Password: [Optional — leave blank or set a strong password]
Save & Apply
Click Apply and OK. OBS Studio is now listening for commands from MakeChurchEazy.
2. Automatic 1-Click Connection from MakeChurchEazy
Once OBS WebSocket is active, open MakeChurchEazy desktop application. In the bottom-right status bar or inside Settings ➔ OBS Studio, click the Connect OBS button.
MakeChurchEazy will establish a heartbeat handshake. If you configured a password in OBS, enter it in the password modal. When connected, the indicator turns solid green with the message 'OBS Studio Connected (v5)'.
3. Transparent Overlay Endpoints Reference
MakeChurchEazy's local server (port 45678) provides dedicated, lightweight HTML5 endpoints for different church visual needs. Add them as Browser Sources in OBS:
| Source Type | Exact OBS URL | Recommended Canvas | Typical Placement |
|---|---|---|---|
| Bible Scripture Overlay | http://127.0.0.1:45678/mce-bible-overlay.html | 1920 x 1080 | Top layer over sermon camera; displays transparent animated lower-third verses |
| Worship Lyrics Overlay | http://127.0.0.1:45678/mce-worship-overlay.html | 1920 x 1080 | Bottom lower-third; displays dynamic stanzas, choruses, and artist tags |
| Speaker & Announcements | http://127.0.0.1:45678/mce-template-overlay.html | 1920 x 1080 | Lower-third name badge, sermon titles, and offering bank account graphics |
| Multiview Media Overlay | http://127.0.0.1:45678/mce-media-overlay.html | 1920 x 1080 | Full-screen picture-in-picture layout or side-by-side scripture + video |
| Auditorium Display (No OBS) | http://127.0.0.1:45678/presentation | 1920 x 1080 | Direct high-contrast full-screen view for auditorium projectors / HDMI TVs |
4. Alpha Transparency CSS Guide
To guarantee that your live camera feed remains completely visible behind lower-thirds and lyrics, OBS requires clean alpha transparency styling.
In OBS Studio, right-click your Browser Source ➔ select Properties. Ensure the Custom CSS box matches the snippet below:
body {
background-color: rgba(0, 0, 0, 0) !important;
margin: 0px auto;
overflow: hidden;
}5. In-OBS Custom Browser Dock Setup
You can control your entire church presentation without ever leaving OBS Studio by embedding MakeChurchEazy as a native OBS Custom Dock:
Open Custom Browser Docks
In OBS Studio, navigate to the top menu bar: Docks ➔ Custom Browser Docks...
Add Dock Name & Local URL
Enter 'MakeChurchEazy' in the Dock Name field. Set the URL to http://127.0.0.1:45678/dock.
Dock Name: MakeChurchEazy Control URL: http://127.0.0.1:45678/dock
Dock Inside OBS Workspace
Click Apply. A draggable dock window will appear. Snap it directly beside your OBS Scene Switcher or Audio Mixer for unified single-monitor control.
6. OBS Performance Settings for Smooth 60fps Broadcasts
To ensure that animated lower-thirds slide smoothly without dropping stream frames:
1. In OBS Studio ➔ Settings ➔ Advanced ➔ Sources: Ensure 'Enable Browser Source Hardware Acceleration' is checked. Restart OBS after toggling.
2. Keep the Browser Source dimensions set to exactly your OBS Base Canvas resolution (usually 1920x1080). Do not scale or stretch the browser source using red transformation handles.
7. Frequently Asked OBS Questions
Why does OBS say 'Authentication failed' when connecting?
Check OBS Studio ➔ Tools ➔ WebSocket Server Settings. If 'Enable Authentication' is checked, you must copy the exact server password and enter it in MakeChurchEazy Settings. If you do not require a password on your local church network, uncheck it.
Can I use MakeChurchEazy with vMix, ATEM Mini, or Wirecast instead of OBS?
Yes! All MakeChurchEazy overlay endpoints (such as http://127.0.0.1:45678/mce-bible-overlay.html) are standard HTML5 URLs. You can add them directly as Browser inputs in vMix, or output a secondary HDMI monitor into an ATEM Mini key/fill channel.
Do overlays update in real-time when I change Bible versions?
Yes. The local WebSocket relay bridge (ws://127.0.0.1:17891) synchronizes clicks in under 1 millisecond. When you click KJV, AMP, or type a new reference, the OBS overlay transitions instantly.