Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Browser plugin for OBS Studio
License
reddit/obs-browser-plugin
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
CEF Based obs-studio browser plugin
obs-browser provides a global object that allows access to some OBS-specific functionality from JavaScript.
Get Browser Plugin Version
/** * @returns number> OBS Browser plugin version */ window.obsstudio.pluginVersion // => 1.24.0
Register for event callbacks
/** * @typedef 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 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 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()
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) >;
mkdir build cmake -D CMAKE_XCODE_ATTRIBUTE_CLANG_CXX_LIBRARY=libc++ -G Xcode .. open cef.xcodeproj/
TODO: tell user to move stuff, or update FindCEF.cmake
Building OBS and obs-browser
brew install ffmpeg x264 qt5 cmake
git clone --recursive https://github.com/jp9000/obs-studio.git cd ./obs-studio git clone git@github.com: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/
- Download CEF Windows 64bit from http://opensource.spotify.com/cefbuilds/index.html
- Use CEF branch 3440 or newer (3579 if you want shared texture support)
- 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).
- Build at least libcef_dll_wrapper (as Release), the rest is optional and are just clients to test with
Building OBS and obs-browser
Follow the OBS build instructions
- 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.
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.