Adding the live tab to OBS

The live tab goes into OBS as a Browser source — the same kind of source you'd use for any web overlay. It draws on screen next to your camera, updates itself as you play, and carries the app's audio (click, drums, backing track) into the recording too. This covers the exact URL, the sizes to use, and how to keep it in sync.

Use a Browser source, not window capture. It survives app restarts, uses the same URL on every computer (so imported scenes never need relinking), has no title bar or letterboxing, and re-syncs on its own after a restart.

The steps

1. Make sure Fret Beam is running. If the app isn't open, the box shows up blank white.

2. Add a Browser source. In OBS, go to Sources → + → Browser.

3. Paste the URL exactly:

   http://localhost:3002/tab/live

4. Set the size for your layout:

   • Wide overlay: 1080 × 540
   • Vertical overlay: 1080 × 780

   A Browser source draws at exactly its Width × Height — you don't need a Bounding Box.

5. Set the tab look in the app, not OBS. Open Settings → Tab look and choose white, dark, See-through (transparent), or gradient. It updates live, no OBS change needed. See-through floats the tab over your video.

That's it — the source now shows whatever's on your live tab, and its audio rides into the recording with it.

If you want the tab window on your own screen

The teacher-facing tab window (the one you watch, separate from OBS) opens from Window → Show Tab Output (⌘⇧T). OBS doesn't need this window — it reads the URL directly.

If the tab is blank

• Blank white box — the app isn't running. Open Fret Beam, then right-click the source → Properties → Refresh cache of current page.
• Shows in the app but not in OBS — double-check the URL is exactly http://localhost:3002/tab/live, character for character.

Starting from the OBS Kit

If you're using the Fret Beam OBS Kit, it ships an importable scene collection (Fret-Beam-Wide.json) with the tab source already pointed at the right URL. After importing, only your cameras and audio interface need relinking, and a one-time Missing Files prompt lets you re-point the frame image. The kit's wide layout puts your face at 840 × 540 top-left, the tab at 1080 × 540 next to it, and your hands at 1920 × 540 across the bottom.

The kit assumes a standard OBS baseline: a 1920 × 1080 canvas, 59.94 (or 30) FPS, Advanced output, on a Mac the Apple VT HEVC hardware encoder (H264 on older Macs), Hybrid MP4, CRF 70, a 2-second keyframe interval, and 48 kHz stereo audio.

For audio problems — no beat in your headphones, a doubled or echoey click, or a silent vertical clip — see Troubleshooting. To get your guitar into the app in the first place, start with Getting your guitar into Fret Beam.