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.
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/**
* @returns {string} OBS Browser plugin version
*/
window.obsstudio.pluginVersion
// => 2.17.0/**
* @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]
Permissions required: NONE
/**
* @typedef {number} 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 {Object} 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 {Object} 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)Permissions required: ADVANCED
/**
* @param {string} name - Name of the transition
*/
window.obsstudio.setCurrentTransition(name)Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.startStreaming()Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.stopStreaming()Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.startRecording()Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.stopRecording()Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.pauseRecording()Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.unpauseRecording()Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.startVirtualcam()Permissions required: ALL
/**
* Does not accept any parameters and does not return anything
*/
window.obsstudio.stopVirtualcam()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) {
};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- Takesevent_nameand ?event_dataparameters. 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent