Unable to distinguish between Dock and Browser Source

Operating System Info

Windows 11

OBS Studio Version

30.2.3

Expected Behavior

It should be possible for the application interacting with JS Bindings to determine if it is running in Dock or in Browser Source.

Current Behavior

Currently, web pages loaded in both OBS Docks and Browser Sources have access to the same APIs and environment, making it difficult to differentiate between the two contexts. This creates limitations for developers who want to provide different functionality depending on whether their web page is loaded as a control panel (Dock) or as visible content (Browser Source).

Steps to Reproduce

Users commonly select a wrong type Dock vs Browser Source or load a URL that is not appropriate for the type.

For example, a webpage with interactive buttons (e.g., scene selection) might be mistakenly loaded as a Browser Source instead of a Dock. The application can't detect this, so it displays the interactive UI. Users may try to interact, but the buttons won't work, leading them to report bugs. In reality, they should have added a Dock, not a Browser Source, causing confusion and poor user experience. Similarly, a non-interactive overlay meant for the stream could be loaded as a Dock, confusing users when it doesn’t appear on the stream.

Having a reliable way to detect the obs-browser environment is the only way these issues can be caught by developers before users create support tickets.

Since there are only two possible states, there could be a boolean isDock value exposed on window.obsstudio object, or alternatively there could be a string enum { 'dock', 'browser_source' } which can be expanded later on.

Start by tracing the JavaScript Bindings exposed through window.obsstudio and how they represent Dock and Browser Source contexts. Define the context value needed to distinguish the two states, then verify that pages loaded in each context can read it and expose the intended behavior.