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

Palakis/obs-websocket

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 sometime 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 dont 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