What is the standby screen?
The standby screen is what the projector shows when no slide or media is live — the idle state. By default, it shows the ACC logo on a dark background. You can also set it to a blank (black) screen or a custom uploaded image.
Changing the standby display
Quick switch: Use the thumbnail strip in the overlay menu (the row of small icons in the header dropdown) or the burger menu (Settings > Presentation > Standby Display). Click a thumbnail to switch instantly.
Uploading custom standby images
Click the + button on the standby thumbnail strip (overlay menu) or click Manage images... in the burger menu. This opens the Standby Image Manager where you can upload images, preview how they'll look on the projector, and manage your collection.
Image specifications
Recommended size: 1920×1080 pixels (Full HD, 16:9 landscape). This matches the projector resolution exactly — no cropping or scaling.
Accepted formats: JPG, PNG, or WebP. Maximum file size 10 MB.
How images display: Images fill the entire projector screen using "cover" mode — the image scales up to fill the 16:9 frame and any excess is cropped from the edges. For best results, use landscape images at exactly 16:9 aspect ratio. Avoid placing important text or details near the edges, as they may be cropped on different display sizes.
Projector preview
The Standby Image Manager shows a large 16:9 projector preview at the top of the modal. Click any image in the grid below to see exactly how it will look on the projector — including any cropping. This lets you verify the image looks correct before applying it.
Countdown timer
The standby screen can optionally show a countdown timer (e.g., "Service starts in 10:00"). Enable it from the burger menu under Settings > Countdown Timer. Set a target time and the timer counts down on the projector display.
Overview
Presenter can feed lyrics and media directly into OBS Studio for live streaming. Instead of pointing a camera at the projector screen (which looks unprofessional), OBS loads a special display page that receives the same content the projector shows — with pixel-perfect quality and optional transparent background for overlays.
How it works
The app controller automatically posts every state change (current slide, media, standby mode) to a server relay endpoint. A special page, obs.html, polls this relay every 300ms and renders the content identically to the projector display. OBS loads this page as a Browser Source.
Setting up OBS
1
In OBS, click + under Sources and select Browser.
2
Set the URL to: https://present.coronaarabicchurch.com/obs.html?bg=black
3
Set Width to 1920 and Height to 1080.
4
Click OK. The source will connect and show the current projector state.
Background modes
Add ?bg= to the URL to control the background:
| Parameter | Effect | Use case |
|---|
| ?bg=transparent | Fully transparent background | Lyrics overlay on camera feed (requires OBS to enable transparency) |
| ?bg=black | Solid black background | Full-screen presentation for videos and slides |
| ?bg=green | Solid green (#00B140) | Chroma Key filter in OBS for lyrics overlay |
All URL parameters
| Parameter | Default | Description |
|---|
| bg | transparent | Background mode: transparent, black, or green |
| mute | 0 | Set to 1 to mute all audio from this source |
| poll | 300 | Poll interval in milliseconds (150–2000) |
| debug | 0 | Set to 1 to enable console logging for diagnostics |
| sid | default | Relay session ID (match the controller session) |
Recommended OBS scenes
Set up three OBS scenes for a typical worship service:
1
Camera + Lyrics: Camera feed as the main source, plus a Browser Source with ?bg=transparent layered on top. Lyrics float transparently over the camera. Use this during worship.
2
Full Presentation: Browser Source with ?bg=black as the only source, full-screen. Videos play at full quality. Use this for video announcements or media playback.
3
Camera Only: Just the camera feed. No lyrics or media. Use this during the sermon or prayers.
Audio handling
The OBS Browser Source captures audio natively from video/media playback. For the best experience, use one audio source per output:
the projector display feeds the room speakers, and the OBS Browser Source feeds the stream audio. If you need to prevent audio from the OBS source (e.g., you're routing room audio via a separate input), add &mute=1 to the URL.
Video playback in OBS
By default, videos play inside OBS's Browser Source (Chromium engine) at full quality. For better performance and reliability, enable OBS Direct Video Mode (see below) which routes video playback through OBS's native Media Source instead.
Note: With Direct Video Mode enabled, play/pause/mute commands from the controller sync to OBS automatically. Without it, the Browser Source mirrors the relay state but media controls may not sync perfectly.
Latency
Lyrics and slides have approximately 200ms average delay between the projector and the OBS source. This is imperceptible to stream viewers since they only see the OBS output. Video start may have a 0.5–1 second offset from the projector, but again, stream viewers never see both simultaneously.
Debugging
To diagnose issues, open obs.html?debug=1&bg=black directly in Chrome (not OBS). Open DevTools (F12) to see detailed [OBS_POLL] logs showing every state ingest, dedup skip, and connection status. You can also check the raw relay state from any browser console:
fetch('/songs/api/live_state.php?sid=default').then(r=>r.json()).then(console.log)
Multiple locations / simultaneous services
If two locations run the Presenter app simultaneously (e.g., two campuses), each needs its own OBS Session so their relay states don't collide. Without separate sessions, both locations write to the same server file and OBS would flip between the two services randomly.
1
Open the burger menu (☰) → expand OBS Integration.
2
In the Active Session list, type a name in the "New session name" field (e.g., main, youth, corona) and click + Add.
3
The new session becomes active (highlighted with a blue radio indicator). The Browser Source URL below automatically updates to include the session ID.
4
Click Copy URL and paste it into your OBS Browser Source.
5
At the other location, repeat with a different session name.
Each session creates a separate state file on the server. Click a session in the list to switch to it. Delete unused sessions with the × button (the "default" session cannot be deleted). The active session is saved on the server, so it persists across browser cache clears and device changes.
Note: The OBS relay works over the public internet — the controller and OBS machine do not need to be on the same network. Someone could run OBS from home and stream a service happening at the church, as long as both can reach the website.
OBS Direct Video Mode
Direct Video Mode eliminates video lag and freezing in OBS by playing uploaded videos (MP4, MOV) through OBS's native Media Source instead of the Browser Source. The Browser Source continues to handle lyrics, slides, and standby screens. YouTube videos are not affected — they continue playing through the Browser Source as before.
Why this matters: OBS's Browser Source runs inside a Chromium process that Windows can throttle (via "Efficiency Mode"), causing video stuttering or complete freezes during services. The native Media Source uses FFmpeg with hardware-accelerated decoding — no browser overhead, no throttling.
OBS Direct Video — Prerequisites
1
OBS Studio 28 or later (current version is 30+). WebSocket server is built in — no plugins needed.
2
Works on same machine or across a LAN. If the controller and OBS are on the same computer, the controller connects directly. If they are on different computers, the OBS Browser Source handles the connection automatically (see Cross-LAN Setup below).
OBS Direct Video — OBS Setup (one-time)
1
Enable WebSocket Server: In OBS, go to Tools → WebSocket Server Settings. Check Enable WebSocket server. Set port to 4455 (default). Check Enable Authentication and set a password. Click Show Connect Info and copy the password. Click Apply, then OK.
2
Add a Media Source: In your scene's Sources panel, click + → Media Source. Name it exactly ChurchVideo (case-sensitive). Leave "Local File" empty. Uncheck "Loop". Check "Restart playback when source becomes active". Click OK.
3
Layer order: Drag ChurchVideo above your Browser Source in the Sources list. This ensures videos play on top of slides.
4
Fit to screen: Select ChurchVideo, right-click in the preview → Transform → Fit to Screen (or Ctrl+F).
5
Hide initially: Click the eye icon next to ChurchVideo to hide it. The Presenter app will show/hide it automatically.
OBS Direct Video — Presenter Setup: Same Machine (one-time)
1
Open the burger menu (☰) → expand OBS Integration.
2
Scroll to OBS Direct Video and toggle Enable on.
3
Fill in: Host: 127.0.0.1, Port: 4455, Password: (from OBS WebSocket settings), Media Source name: ChurchVideo.
4
Click Test Connection. The status should show ● Connected (green). The diagnostics panel shows OBS version, scene name, source name, and "Ready for video playback".
OBS Direct Video — During a Service
No changes to your workflow. Pick a song, click Live, pick a video, click Live — same as always. When a video plays, a small green OBS badge appears in the topbar confirming the video is playing through the native Media Source. Pause, play, and mute all sync to OBS automatically.
YouTube videos continue playing through the Browser Source (YouTube requires an iframe embed and cannot play through OBS Media Source). All uploaded MP4/MOV videos play through the native path.
OBS Direct Video — Cross-LAN Setup
If the controller and OBS run on different computers (e.g., a tablet controls the service while a separate PC runs OBS), the controller cannot connect to OBS directly due to browser security restrictions. Instead, the OBS Browser Source — which is already running on the OBS machine — connects to OBS locally and drives the Media Source.
No changes to the OBS setup (WebSocket, Media Source, layer order) — all of that stays the same. The only difference is the Browser Source URL.
1
In the controller app's burger menu, you do NOT need to enable OBS Direct Video. Leave it disabled for cross-LAN — the Browser Source handles everything.
2
In OBS, click your Browser Source → Properties.
3
Add your OBS WebSocket password to the URL using the
&obspw= parameter. For example, if your current URL is:
https://present.coronaarabicchurch.com/obs.html?bg=black&sid=default
Change it to:
https://present.coronaarabicchurch.com/obs.html?bg=black&sid=default&obspw=YOUR_PASSWORD
4
Optional parameters: &obssrc=ChurchVideo (Media Source name, defaults to ChurchVideo) and &obsport=4455 (port, defaults to 4455). Only add these if you changed the defaults.
5
Click OK in OBS to save. The Browser Source will connect to OBS automatically. The status text in the bottom-left of the Browser Source will show "OBS Direct: Connected".
How it works: The controller pushes state (which video to play, pause, mute) to the server relay as it always does. The OBS Browser Source reads this state every 300ms AND has its own local connection to OBS on 127.0.0.1:4455. When it sees a video in the state, it tells OBS to play it through the Media Source. No proxy, no tunnel, no extra software.
Security note: The OBS WebSocket password will be visible in the Browser Source URL in OBS's Properties dialog. This is acceptable because the password only controls OBS on that same machine and is only visible to someone with access to OBS settings.
OBS Direct Video — Troubleshooting
| Symptom | Likely Cause | Fix |
|---|
| Test Connection → "Connection error" | OBS not running or WebSocket not enabled | Check Tools → WebSocket Server Settings in OBS |
| Test Connection → "Auth failed" | Wrong password | In OBS: Tools → WebSocket → Show Connect Info → re-copy password |
| Diagnostics: "Media Source not found" | Source name mismatch | Check exact spelling in OBS Sources panel. Must match the "Media Source name" in settings. |
| Video plays but no audio in OBS | Media Source muted in OBS mixer | In OBS Audio Mixer, unmute ChurchVideo |
| OBS badge doesn't appear | WebSocket disconnected | Open burger menu → OBS Integration → check connection status |
| Video lag despite Direct Video | Network speed to server | The video file still downloads from the server via FFmpeg. Ensure stable connection. |
| Cross-LAN: Browser Source shows "OBS Direct: Not connected" | Password wrong or WebSocket not enabled | Verify the &obspw= value matches OBS → Tools → WebSocket → Show Connect Info |
| Cross-LAN: Video plays in Browser Source instead of Media Source | Missing &obspw= in URL | Edit the Browser Source URL in OBS Properties to include the password parameter |
| Same-machine: "OBS not reachable" | OBS not running when controller loaded | Start OBS, then click Test Connection in the settings. Connection auto-retries if OBS was previously connected. |
Scene Control (manual scene switching)
Scene Control adds a small button to the Preview header (next to A−/A+) that lets you manually switch OBS between two pre-configured scenes — typically your "Video" scene (e.g., a Lower Thirds composition) and your "Default" scene (camera-only). This is a manual operator action; nothing switches automatically based on video playback.
Note (changed in r936u): Earlier builds switched scenes automatically when a video started or stopped. That auto-behavior has been removed — the OBS operator (or you, via this button) controls scene changes explicitly. OBS Direct Video playback (smooth video via OBS Media Source) is unchanged and continues to work.
Scene Control — Setup
1
Make sure OBS Direct Video is connected (see sections above) and the WebSocket is talking to OBS.
2
Open the burger menu (☰) and find the Scene control row. Toggle it on.
3
Pick your Video scene (the scene the button will switch to when you tap it) and your Default scene (where the button starts and returns to).
4
Close the menu. A small projector-shaped button now appears in the Preview header next to A−/A+. The button's color shows the active scene: blue = Default, amber + pulsing = Video.
Scene Control — Using it during a service
Hold the button (about half a second) to switch OBS to your Video scene. The button turns amber and pulses softly — an unmistakable signal that you've overridden the scene. Tap it again to switch back to your Default scene. The button calms back to blue.
Hover the button any time to see the current scene name and what tapping will do next. The button auto-releases the Video scene after 5 minutes as a safety against forgetting it on.
If you see a dashed amber outline on the button, Scene Control is on but you haven't picked scenes yet. Tap the button — it'll open the burger menu directly to the Scene control row so you can finish setup.
Scene Control — Troubleshooting
| Symptom | Likely Cause | Fix |
|---|
| Button doesn't appear next to A−/A+ | Scene Control toggle off, or OBS not connected | Open the burger menu, enable Scene control. Verify OBS Direct shows ● Connected. |
| Button shows dashed amber outline | Toggle is on but Video/Default scenes not selected | Tap the button — it opens the settings to the right row. Pick both scenes. |
| Tapping the button does nothing in OBS | Scene name in settings doesn't match an actual OBS scene | In burger menu, re-open the scene picker. Names must match exactly (case-sensitive). |
| Button is amber/pulsing but OBS isn't on the Video scene | Someone changed OBS's scene manually in OBS Studio | Tap the button to resync (it will issue a fresh switch command). |
| Videos used to auto-switch the OBS scene; now they don't | Expected — auto-switching was intentionally removed | Use the Scene Control button manually before/after the video, as your OBS operator would for any other content. |
Settings storage: Same-machine settings (host, port, password, source name) are stored in your browser's local storage — specific to that machine and browser. Cross-LAN settings are embedded in the OBS Browser Source URL — they stay with the OBS profile regardless of which device controls the service.
The display window didn't open
Your browser blocked the popup. Allow popups for this site in your browser settings, then click the projector icon again.
I can't find a song
Try a different part of the title or lyrics. The search is fuzzy but works best with 2-3 words. Check that the scope tab is set to All or Songs, not Bible or Media.
The text on the projector is too small / too large
Use the A+ and A- buttons in the preview panel to adjust the zoom level. The setting persists across sessions.
Videos don't play on the OBS source
This is Chrome's autoplay policy. The OBS Browser Source loads without user interaction, so Chrome may block video autoplay with audio. Solutions: use &mute=1 to allow muted autoplay, or use OBS's Interact feature (right-click source → Interact → click anywhere) to provide a user gesture.
OBS lyrics are not transparent
Make sure the URL uses ?bg=transparent (this is the default). In the OBS Browser Source properties, ensure the Custom CSS field contains body { background-color: rgba(0, 0, 0, 0); } (OBS adds this by default).
The Chromecast won't connect
Chromecast only works from the mobile app (phone/tablet). It uses Google's Cast SDK. Make sure your phone and Chromecast are on the same Wi-Fi network. Desktop uses the Presentation API (browser window), not Cast.
My changes disappeared after refreshing
Most settings save automatically to localStorage (persists across sessions) or to the server (persists across devices). Song edits, media uploads, and playlists save to the server immediately. If you're in a private/incognito window, localStorage is cleared when the window closes.
The app looks broken or shows old content
The app uses a service worker for offline caching. After an update, you may see the old version until the cache refreshes. Do a hard refresh: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac). If that doesn't work, open DevTools → Application → Storage → Clear site data.
How do I delete a song?
Right-click (or long-press on mobile) the song in the search results or slides panel. Select Delete from the context menu. You'll be asked to confirm — deletion is permanent.
Can multiple people control the projector at the same time?
Yes, but only one controller should be active during a service. Multiple browser tabs or devices can connect, but each pushState overwrites the previous one. For a clean service, have one operator on one device.