Browser source with "admin" panel.

[mavv]

I wonder what is best solution to get browser source with "admin" panel for OBS.
What chat suggested me is to use docks and BroadcastChannel. It is nice and clean, but have one problem (for me)
(I can create "main data object" with all values, and sending it always thru broadcastChannel, I think this would be best/clean solution as far I think)
I also checked websockets, but the problem is the same as above.
Lastly I did it in a dirty way - render bigger page, but crop it for displaying, and using "interaction" to view both render and panel at the same time. Also opened third window with only browser, to keep it active even if scene is changed.
Why?
My method allow me to use only one instance of data. I want to create "game", with players, points, etc. Using my method i can manipulate lists and display it from one source. Timers, actions, all in one. I dont need to make special functions to update data, sending data, watching for timed events, everything is just here. I'm already getting some outside data (from youtube chat) so I want to minimalise complexity.
Maybe there is another good solution for task like this?

 

[sk105]

Your instinct (one source of truth) is right; you can keep it without the third window.
1. Keep the browser source alive across scene changes. In the Browser source properties, untick "Shutdown source when not visible" and "Refresh browser when scene becomes active". The page then keeps running (timers, state, chat connection) even when its scene isn't live, so you don't need the extra browser window to keep it alive.
2. Make the dock a remote control, not a second copy of the data. The browser source owns the state. The dock (Docks → Custom Browser Docks) only sends commands, and the source sends snapshots back:
// in the browser source (owns the data)
const ch = new BroadcastChannel("game");
ch.onmessage = (e) => { apply(e.data); ch.postMessage({ type: "state", state }); };

// in the dock (just buttons + a view)
const ch = new BroadcastChannel("game");
ch.postMessage({ type: "addPoint", player: "A" });
ch.onmessage = (e) => { if (e.data.type === "state") render(e.data.state); };
So there's one "main data object", living in the source, and the dock never needs its own update logic. It just asks for changes and redraws whatever comes back. Both pages need to be served from the same origin (same domain, or both local files under the same folder) for BroadcastChannel to connect.
3. Survive restarts: have the source save its state to localStorage after each change and load it on start.
obs-websocket is only worth it if you also want to control things from outside OBS (a phone, Stream Deck). For dock ↔ source, the setup above is simpler.

 

[mavv]

Yes, but for example if I need to add/remove players, it would be nice to have it both at admin/stream side. That's why I think it's convinient to hold anything in one "place".

1. Keep the browser source ......

I checked situation now, and I know why I needed this then. I have both options you mentioned unchecked. Page isn't reloaded (which is good), but I can't do anything off-camera then. Buttons and any actions are freezed, and they start immediately after returned to scene. Even with "interaction" still displayed.