Recording Overlay
A browser page designed to be captured by OBS (or similar software) as a browser source. It adds timecode, scene name, and other live show information directly into the recorded video — burned in at capture time, without needing to edit the footage afterward.
Add it as a browser source in OBS at the correct resolution, and the overlay updates live during the show.
Layout
Section titled “Layout”The overlay sits at the bottom of the screen, with a dark semi-transparent panel spanning the full width. Information is arranged in up to four configurable slots across two rows (two slots per row):
- Top row (left and right) — typically used for primary info like timecode and scene name
- Bottom row (left and right) — typically used for secondary info like wall clock and show name
On very wide displays (≥ 1920 px) with the floating layout enabled, the panel detaches from the edge, gets a rounded border, and a soft white glow.
Each of the four slots can display one of the following:
| Slot content | Description |
|---|---|
| Timecode | Current TC value in HH:MM:SS:FF format |
| Range or Scene | Range name if ranges are defined, otherwise scene name + elapsed time |
| Range | Current range/scene name only |
| Scene | Scene name + elapsed time |
| Scene Name | Scene name only (no elapsed) |
| Scene Elapsed | Elapsed time since scene started |
| Show Name | The show name from settings |
| Wall Clock | Current wall-clock time (YYYY-MM-DD HH:mm:ss) |
Default slot order: Timecode → Range or Scene → Wall Clock → Show Name.
Preferences
Section titled “Preferences”Click the app icon to open preferences. All preferences are stored in the URL — bookmark the fully configured URL and reuse it each session.
| Preference | Description |
|---|---|
| Slot 1–4 | Choose what each slot displays |
| Slot 1–4 Color | Custom text color per slot |
| Slot 1–4 Size | Custom font size in pixels per slot |
| Background Color | Background color for the overlay panel |
| Floating Layout | On wide screens (≥ 1920 px): detaches the panel with rounded border and glow |
OBS Setup
Section titled “OBS Setup”- In OBS, add a Browser Source and point it to the
/recording/overlayURL on your CueCollab server. - Set the browser source width/height to match your recording resolution (e.g. 1920×1080).
- Enable “Shutdown source when not visible” and “Refresh browser when scene becomes active” for clean behavior.
- Configure the overlay layout and colors from a regular browser tab, then copy the full URL (with all query parameters) into OBS.
The overlay background is semi-transparent by default — the video behind it shows through.
- Bookmark the configured URL. All preferences are stored in the URL — configure the overlay once in a browser tab, then copy the full URL (with all query parameters) into OBS so it reopens with the same layout every session. Great for sharing.
- Use Hybrid MP4 in OBS. Set OBS output format to Hybrid MP4, not standard MP4. This is required for reliable in-browser streaming in the Review module.
- Match the resolution exactly. Set the OBS browser source width and height to match your recording resolution — mismatched dimensions will crop or letterbox the overlay.
- Floating layout on wide screens. Enable Floating Layout on 1920px+ displays for a polished look with a rounded, glowing panel instead of a full-width bar.