A collection of OBS Studio Utilities built with Vanilla JS, CSS & HTML
- Install Node.js from https://nodejs.org/en/
- Clone this repository or download the ZIP.
- Open Terminal/Command Line and change directory to where the repository or extraced zip is located
- Run
npm install
on the command line. - Run
npm start
- Open up OBS Studio
- Add a new Browser Source and point it to the Node.js server at http://localhost:8080/countdown.html
- Open the Docks Menu -> Custom Browser Docks and enter a new value, name it whatever you like, set the url to http://localhost:8080/countdown.html#controls
- OBS Studio (streaming tool)
- Browser Sources (Overlays)
- Events
- Subscription & Follow notices
- Chat
- Avatar Animation & Face Tracking
- Stream Setup UI
- Events
- Browser Docks (Controls)
- Chat Channel Funnel
- Twitch
- Youtube
- Rumble
- Discord
- Clip Video Markers
- Chat Channel Funnel
- Browser Sources (Overlays)
- Streaming Services
- Twitch
- Research if any of these tools can also be made into Twitch Extensions
- Twitch
- App / Web App
- Handle Stream Setup via API's
- Route used as Browser Source to show in OBS
- Browser Dock UI to set:
- Title
- Add character count
- Youtube Max: 100
- Twitch Max: 140
- Add character count
- Description
- Add character count
- Youtube Max: 5000
- Add character count
- Tags
- REST API does not have custom tags
- Looks like they are available in GraphQL but that is not a public API
- Thumbnail/Placeholder
- Schedule Stream Start
- Title
- Serve countdown on LAN so it can be accessed on phone
- optional Add sound when nearing times up
- Handle Stream Setup via API's
- OBS Binding Ideas - https://github.com/obsproject/obs-browser#js-bindings
- Checkbox to enable/disable start recording in OBS studio upon timer complete
- Test if BroadcastChannel works without server between html files
- Reset Play/Pause button when time is reached
- Reset Font size when reset button is pressed
- Add button hover styles
- Add css transition to Countdown Timer Font Size
- Add & Sub 15 second buttons
- Set minimum value on slider
- Cleanup the code
- Test if OBS WebSockets will work in place of BroadcastChannel
- addEventListener on obsStreamingStarted to start countdown timer automatically
window.addEventListener('obsStreamingStarted', console.log)
- https://github.com/obsproject/obs-browser#register-for-event-callbacks
- At end of timer, automatically transition to another scene
window.obsstudio.getScenes(console.log)
window.obsstudio.setCurrentScene('Intro')
- https://github.com/obsproject/obs-browser#change-scene