Check Out the Stream @ https://twitch.tv/talk2megooseman
Today Objective
✅ Going to try prototyping using OBS-Websocket for a brand new feature I want to do for Stream Closed Captioner
⬜ Finishing moving Stream-CC extensions UI to use Redux Toolkit https://redux-toolkit.js.org/
obsproject
/
obs-websocket
Remote-control of OBS Studio through WebSocket
obs-websocket
WebSocket API for OBS Studio.
Downloads
obs-websocket is now included by default with OBS Studio 28.0.0 and above. As such, there should be no need to download obs-websocket if you have OBS Studio > 28.0.0.
Binaries for OBS Studio < 28.0.0 on Windows, MacOS, and Linux are available in the Releases section.
Using obs-websocket
It is highly recommended to keep obs-websocket protected with a password against unauthorized control. obs-websocket generates a password for you automatically when you load it for the first time. To change this, open the "obs-websocket Settings" dialog under OBS' "Tools" menu. In the settings dialog, you can enable or disable authentication and set a password for it.
(Psst. You can use --websocket_port(value), --websocket_password(value), --websocket_debug(flag) and --websocket_ipv4_only(flag) on the command line to override the configured values.)
Possible use cases
- Remote control OBS from a phone or tablet on the same local network
- …
Notes
Redux
Starting the stream off with continued of adding Redux Toolkit to the project. Along the way trying to reorganize and refactor and configuration and build processes that are currently existing in the project.
One thing want to configure, set things up for absolute imports for easier include path.
In order to set this up so that @ is the absolute start of the file path I needed to config webpack and create a jsconfig.json file.
Here is the snippet of the change I made in webpack:
resolve: {
extensions: ['*', '.js', '.jsx'],
alias: {
'@': path.resolve(__dirname, 'src/'),
},
}
This change was made the module portion of the webpack config, this makes it so that I can import absolute path for my files like this '@/utils/Constants
But this sort of import path doesn't play nice with VSCode path IntelliSense so there is one more step. Creating a jsconfig.json file to tell it what the @ means.
{
"compilerOptions": {
"baseUrl": "./src/",
"jsx": "react",
"paths": {
"@": ["src/"]
}
}
}
OBS Websocket
Spent some time taking a look at prototyping using OBS Websocket and its API to send captions as part of the stream. This will be awesome since the captions will show up native and that means the captions will also show up in the VODs.
If you don't know what OBS Websocket is. Its a plugin for OBS that exposes events so that you can remotely subscribe or controls aspects of your OBS and stream.
And the experiment was a huge success. Tried out connecting to the web socket on codesandbox.io with a hard-coded string and it work!! https://codesandbox.io/s/eloquent-ganguly-v291z
So next step will be to integrate this as part of the Stream-CC dashboard with input field for settings. So that we can start streaming the CC text straight to OBS.
Shoutouts and Thanks
rw_grim
Thanks for the 11 month resub
Thank you for the 200 bits
CodingGarden
Thanks for the raid
JamesMontemagno
Thanks for the 110 bits
Thanks for gifting a sub to JuanCarlospaco
Future action items
⬜ Integrate OBS Websocket JS into dashboard https://codesandbox.io/s/eloquent-ganguly-v291z
Top comments (0)