Before you open OBS
- Open QLG in a normal desktop browser.
- Build one simple lower third and save it to Control.
- Open Preview and copy the generated Browser Source URL.
The control page and OBS run in separate browser environments. A reliable system must synchronize them through shared transport; browser-local storage alone cannot drive an OBS source. QLG's output URL is designed for that separate environment.
1. Add the Browser Source
- In the target OBS scene, select Sources → Add → Browser.
- Create a new source with a clear name, such as QLG Graphics.
- Paste the copied output URL into the URL field.
- Set Width and Height to match the graphics canvas. QLG currently displays its canvas size in the project bar.
- Confirm the source and place it above the camera or programme source in the scene stack.
Do not add a black colour source behind the browser layer. When the output is empty, the Browser Source itself should be fully transparent so the programme picture remains visible.
2. Verify EMPTY, TAKE and CLEAR
- EMPTY: with no graphic on air, confirm that the programme image is unchanged.
- TAKE: trigger the saved lower third from QLG Control and confirm that only the graphic appears.
- CLEAR: clear the graphic and confirm a full return to transparency.
Check text, positioning and alpha edges against both bright and dark video. A page that looks correct in a normal browser still needs this test inside OBS's embedded browser engine.
3. Test reload recovery
- TAKE a graphic so the intended live state is unambiguous.
- Use OBS to refresh the Browser Source, or close and reopen its properties.
- Confirm that the output reconnects and recovers the current intended graphic.
- CLEAR the output and repeat the refresh to verify transparent recovery as well.
QLG is built to recover shared state after a source reload. If another service does not retain state, plan how the operator will restore the correct graphic after an OBS scene or browser restart.
Useful OBS Browser Source options
- Width and Height: these define the browser viewport. Match them to the graphics canvas rather than scaling an arbitrary page.
- Shutdown source when not visible: this frees resources, but it also restarts the page when the source becomes visible. Test recovery before enabling it for a live workflow.
- Refresh browser when scene becomes active: useful in some scene designs, but it deliberately reloads the output. Use it only after the recovery test passes.
- Custom FPS: choose a rate appropriate for the animation and system load; verify motion on the production machine.
If the graphic does not appear
- Confirm that the Browser Source URL is the output URL, not the control-page URL.
- Open the output URL in a separate normal browser tab to check whether it can connect.
- Refresh the OBS source and check the connection state on the QLG control page.
- Verify that the Browser Source is visible and above the video source.
- Check that local firewall, VPN or captive-network rules are not blocking the realtime connection.
Final pre-show checklist
- Empty output is transparent.
- TAKE, update and CLEAR work from the operator browser.
- Reload recovers the intended state.
- All planned graphic types fit the canvas and safe area.
- The test was completed on the actual OBS machine and network.
Reference