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.

On Windows, this also adds support for Service Integration (linking third party services) and Browser Docks (webpages loaded into the interface itself). macOS support for service integration & browser docks is in the works, and Linux support is planned.

This plugin is included by default on official packages on Windows and macOS. While Linux is supported, the official ppa does not currently include the browser source due to a conflict with GTK.

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.

/**
 * @returns {number} OBS Browser plugin version
 */
window.obsstudio.pluginVersion
// => 1.24.0

/**
 * @typedef {Object} OBSEvent
 * @property {object} detail - data from event
 */

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
• obsReplaybufferStopping
• obsReplaybufferStopped

/**
 * @typedef {Object} Scene
 * @property {string} name - name of the scene
 * @property {number} width - width of the scene
 * @property {number} height - height of the scene
 */

/**
 * @param {function} callback
 * @returns {Scene}
 */
window.obsstudio.getCurrentScene(function(scene) {
	console.log(scene)
})

/**
 * @typedef {Object} Status
 * @property {boolean} recording - not affected by pause state
 * @property {boolean} recordingPaused
 * @property {boolean} streaming
 * @property {boolean} replaybuffer
 */

/**
 * @param {function} callback
 * @returns {Status}
 */
window.obsstudio.getStatus(function (status) {
	console.log(status)
})

/**
 * Does not accept any parameters and does not return anything
 */
window.obsstudio.saveReplayBuffer()

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) {
	
};

• Download CEF Mac 64 from http://opensource.spotify.com/cefbuilds/index.html
  • Use CEF branch 3770
• Extract and cd into the folder

mkdir build
cmake -D CMAKE_XCODE_ATTRIBUTE_CLANG_CXX_LIBRARY=libc++ -G Xcode ..
open cef.xcodeproj/

Build in Xcode (⌘+B)

TODO: tell user to move stuff, or update FindCEF.cmake

brew install ffmpeg x264 qt5 cmake

git clone --recursive https://github.com/jp9000/obs-studio.git
cd ./obs-studio
git clone [email protected]:kc5nra/obs-browser.git ./plugins/obs-browser
echo "add_subdirectory(obs-browser)" >> ./plugins/CMakeLists.txt
mkdir build
cd ./build
cmake -D CMAKE_PREFIX_PATH=/usr/local/opt/qt5/lib/cmake -D CEF_ROOT_DIR=/Users/username/Development/cef_binary_3.2883.1540.gedbfb20_macosx64 -D BUILD_BROWSER=yes -G Xcode ..
open obs-studio.xcodeproj/

Build in Xcode (⌘+B)

• Download CEF Windows 64bit from http://opensource.spotify.com/cefbuilds/index.html
• Use CEF branch 3770
• Extract and cd into the folder

• Run cmake-gui
  • In "where is the source code", enter in the repo directory (example: C:/Users/User/Desktop/cef_binary_3.2743.1445.gdad7c0a_windows64).
  • In "where to build the binaries", enter the repo directory path with the 'build' subdirectory (example: C:/Users/User/Desktop/cef_binary_3.2743.1445.gdad7c0a_windows64/build).
• Press 'Configure' and select the generator that fits to your installed VS Version: Visual Studio 12 2013 Win64, Visual Studio 14 2015 Win64 or Visual Studio 15 2017 Win64
• Press 'Generate' to generate Visual Studio project files in the 'build' subdirectory.
• Open cef.sln from the 'build' subdirectory

• Build at least libcef_dll_wrapper (as Release), the rest is optional and are just clients to test with

https://github.com/jp9000/obs-studio/wiki/Install-Instructions#windows

• Enable BUILD_BROWSER and set the CEF_ROOT_DIR path in cmake-gui for obs-studio (example: C:/Users/User/Desktop/cef_binary_3.2743.1445.gdad7c0a_windows64)
• • Press 'Generate' to generate Visual Studio project files in the 'build' subdirectory.
• Open obs-studio.sln from the 'build' subdirectory

Build in Visual Studio