Stream Overlay for personal (and shared!) use.

Requirements:

• NodeJS (v14 and upwards);
• Compatible yarn;

Features:

• An example badge to get started on Chakra
• Extremely lightweight Twitch chat client built on websockets (No net dependencies!) capable of receiving messages, reacting to clearchat and responding to keepalive pings.

Instructions:

1. Duplicate config.example.json inside src/ folder and rename it into config.json
2. Fill out all of the fields in config.json in accordance with your data. (Get the oauth key from https://twitchapps.com/tmi/)
3. Install dependencies by executing yarn
4. Execute yarn dev
5. Add a new Browser source within OBS (see screenshot) and enter http://localhost:3000 as URL.
6. Compose and adjust in OBS as neccessary

What to do from here:

1. Change your name in src/index.tsx by changing attribute name for the <HelloMyNameIs /> component.
2. Study ChakraUI (Component library used for UI elements) to modify to your likings
3. Modify this to suit your own needs

Fig. 1 - OBS Browser Settings