Browser source plugin linux
obs-browser introduces a cross-platform Browser Source, powered by CEF (Chromium Embedded Framework), to OBS Studio. A Browser Source allows the user to integrate web-based overlays into their scenes, with complete access to modern web APIs.
Additionally, obs-browser enables Service Integration (linking third party services) and Browser Docks (webpages loaded into the interface itself) on all supported platforms, except for Wayland (Linux).
This plugin is included by default on official packages on Windows, macOS, the Ubuntu PPA and the official Flatpak (most Linux distributions).
obs-browser provides a global object that allows access to some OBS-specific functionality from JavaScript. This can be used to create an overlay that adapts dynamically to changes in OBS.
TypeScript Type Definitions
If you’re using TypeScript, type definitions for the obs-browser bindings are available through npm and yarn.
# npm npm install --save-dev @types/obs-studio # yarn yarn add --dev @types/obs-studio
Get Browser Plugin Version
/** * @returns string> OBS Browser plugin version */ window.obsstudio.pluginVersion // => 2.17.0
Register for event callbacks
/** * @callback EventListener * @param CustomEvent> event */ /** * @param string> type * @param EventListener> listener */ window.addEventListener('obsSceneChanged', function(event) var t = document.createTextNode(event.detail.name) document.body.appendChild(t) >)
Descriptions for these events can be found here.
- obsSceneChanged
- obsSourceVisibleChanged
- obsSourceActiveChanged
- obsStreamingStarting
- obsStreamingStarted
- obsStreamingStopping
- obsStreamingStopped
- obsRecordingStarting
- obsRecordingStarted
- obsRecordingPaused
- obsRecordingUnpaused
- obsRecordingStopping
- obsRecordingStopped
- obsReplaybufferStarting
- obsReplaybufferStarted
- obsReplaybufferSaved
- obsReplaybufferStopping
- obsReplaybufferStopped
- obsVirtualcamStarted
- obsVirtualcamStopped
- obsExit
- [Any custom event emitted via obs-websocket vendor requests]
Get webpage control permissions
Permissions required: NONE
/** * @typedef Level - The level of permissions. 0 for NONE, 1 for READ_OBS (OBS data), 2 for READ_USER (User data), 3 for BASIC, 4 for ADVANCED and 5 for ALL */ /** * @callback LevelCallback * @param Level> level */ /** * @param LevelCallback> cb - The callback that receives the current control level. */ window.obsstudio.getControlLevel(function (level) console.log(level) >)
Permissions required: READ_OBS
/** * @typedef Status * @property boolean> recording - not affected by pause state * @property boolean> recordingPaused * @property boolean> streaming * @property boolean> replaybuffer * @property boolean> virtualcam */ /** * @callback StatusCallback * @param Status> status */ /** * @param StatusCallback> cb - The callback that receives the current output status of OBS. */ window.obsstudio.getStatus(function (status) console.log(status) >)
Permissions required: READ_USER
/** * @typedef Scene * @property string> name - name of the scene * @property number> width - width of the scene * @property number> height - height of the scene */ /** * @callback SceneCallback * @param Scene> scene */ /** * @param SceneCallback> cb - The callback that receives the current scene in OBS. */ window.obsstudio.getCurrentScene(function(scene) console.log(scene) >)
Permissions required: READ_USER
/** * @callback ScenesCallback * @param string[]> scenes */ /** * @param ScenesCallback> cb - The callback that receives the scenes. */ window.obsstudio.getScenes(function (scenes) console.log(scenes) >)
Permissions required: READ_USER
/** * @callback TransitionsCallback * @param string[]> transitions */ /** * @param TransitionsCallback> cb - The callback that receives the transitions. */ window.obsstudio.getTransitions(function (transitions) console.log(transitions) >)
Permissions required: READ_USER
/** * @callback TransitionCallback * @param string> transition */ /** * @param TransitionCallback> cb - The callback that receives the transition currently set. */ window.obsstudio.getCurrentTransition(function (transition) console.log(transition) >)
Permissions required: BASIC
/** * Does not accept any parameters and does not return anything */ window.obsstudio.saveReplayBuffer()
Permissions required: ADVANCED
/** * Does not accept any parameters and does not return anything */ window.obsstudio.startReplayBuffer()
Permissions required: ADVANCED
/** * Does not accept any parameters and does not return anything */ window.obsstudio.stopReplayBuffer()
Permissions required: ADVANCED
/** * @param string> name - Name of the scene */ window.obsstudio.setCurrentScene(name)
Set the current transition
Permissions required: ADVANCED
/** * @param string> name - Name of the transition */ window.obsstudio.setCurrentTransition(name)
/** * Does not accept any parameters and does not return anything */ window.obsstudio.startStreaming()
/** * Does not accept any parameters and does not return anything */ window.obsstudio.stopStreaming()
/** * Does not accept any parameters and does not return anything */ window.obsstudio.startRecording()
/** * Does not accept any parameters and does not return anything */ window.obsstudio.stopRecording()
/** * Does not accept any parameters and does not return anything */ window.obsstudio.pauseRecording()
/** * Does not accept any parameters and does not return anything */ window.obsstudio.unpauseRecording()
/** * Does not accept any parameters and does not return anything */ window.obsstudio.startVirtualcam()
/** * Does not accept any parameters and does not return anything */ window.obsstudio.stopVirtualcam()
Register for visibility callbacks
This method is legacy. Register an event listener instead.
/** * onVisibilityChange gets callbacks when the visibility of the browser source changes in OBS * * @deprecated * @see obsSourceVisibleChanged * @param boolean> visibility - True -> visible, False -> hidden */ window.obsstudio.onVisibilityChange = function(visibility) >;
Register for active/inactive callbacks
This method is legacy. Register an event listener instead.
/** * onActiveChange gets callbacks when the active/inactive state of the browser source changes in OBS * * @deprecated * @see obsSourceActiveChanged * @param bool> True -> active, False -> inactive */ window.obsstudio.onActiveChange = function(active) >;
obs-browser includes integration with obs-websocket’s Vendor requests. The vendor name to use is obs-browser , and available requests are:
- emit_event — Takes event_name and ? event_data parameters. Emits a custom event to all browser sources. To subscribe to events, see here
- See #340 for example usage.
There are no available vendor events at this time.
OBS Browser cannot be built standalone. It is built as part of OBS Studio.
By following the instructions, this will enable Browser Source & Custom Browser Docks on all three platforms. Both BUILD_BROWSER and CEF_ROOT_DIR are required.
Follow the build instructions and be sure to download the CEF Wrapper and set CEF_ROOT_DIR in CMake to point to the extracted wrapper.
Use the macOS Full Build Script. This will automatically download & enable OBS Browser.
Follow the build instructions and choose the «If building with browser source» option. This includes steps to download/extract the CEF Wrapper, and set the required CMake variables.
About
CEF-based OBS Studio browser plugin
License: GNU General Public License v2.0
Browser Source
Browser source is one of the most versatile sources available in OBS. It is, quite literally, a web browser that you can add directly to OBS. This allows you to perform all sorts of custom layout, image, video, and even audio tasks. Anything that you can program to run in a normal browser (within reason, of course), can be added directly to OBS.
Properties
Loads a web page from your local machine instead of via URL
If Local file is set to Off, loads a web page from the specified URL
Sets the viewport width of the browser page
Sets the viewport height of the browser page
Sets a custom frame rate at which to render the web page
Defines the custom frame rate at which to render the web page
By default, sets the background to be transparent, removes margins on the body, and hides the scroll bar (if the page renders larger than your viewport width/height)
body <
background-color: rgba(0, 0, 0, 0);
margin: 0px auto; overflow: hidden;
>Shutdown source when not visible
Unloads the page when the source is no longer visible (by clicking the eye icon to hide, or not in the active scene)
Refresh browser source when scene becomes active
Refresh the page when it becomes active (scene is switched to)
Depending on the setting, this allows the browser to read and/or modify OBS options
Read access to OBS status information
Refresh cache of current page
Clicking this will immediately refresh the page and reload any content
Notes
As Browser Source is based on Chrome Embedded Framework, any CEF flags ( —enable-gpu for example) can be passed from the OBS Studio shortcut. A fairly comprehensive list can be found here.