Refactor to Redux Toolkit and Prototying OBS Websocket

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/

Palakis / obs-websocket

Remote-control OBS Studio through WebSockets

obs-websocket

WebSockets API for OBS Studio.

Downloads

Binaries for Windows, MacOS, and Linux are available in the Releases section.

Using obs-websocket

A web client and frontend made by t2t2 (compatible with tablets and other touch interfaces) is available here : http://t2t2.github.io/obs-tablet-remote/

It is highly recommended to protect obs-websocket with a password against unauthorized control. To do this, open the "Websocket server settings" dialog under OBS' "Tools" menu. In the settings dialogs, you can enable or disable authentication and set a password for it.

Possible use cases

• Remote control OBS from a phone or tablet on the same local network
• Change your stream overlay/graphics based on the current scene
• Automate scene switching with a third-party program (e.g. : auto-pilot, foot pedal, ...)

For developers

The server is a typical Websockets server running by default on port 4444 (the port number can be changed in the Settings dialog) The protocol understood by…

View on GitHub

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