You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Dale 75f171a05d
misc: Hide chat overlay on empty messages
5 months ago
public feat: overlay preview 6 months ago
readme-resources feat: Add OBS screenshot 6 months ago
src misc: Hide chat overlay on empty messages 5 months ago
.babelrc feat: Managed schedule + auth 6 months ago
.envrc misc: Add shell.nix 6 months ago
.gitignore feat: Add soundbites, add overlay preview, add hiding navbar 6 months ago
.prettierrc initial commit 6 months ago
README.md feat: Better readme 6 months ago
next-env.d.ts initial commit 6 months ago
next.config.js feat: Separate critical configs 6 months ago
node.js feat: Add separate server 6 months ago
nodemon.json feat: Add separate server 6 months ago
ormconfig.json feat: Add separate server 6 months ago
package.json misc: Hide chat overlay on empty messages 5 months ago
palette.txt initial commit 6 months ago
shell.nix feat: Add schedule + authorization 6 months ago
tsconfig.json feat: Separate critical configs 6 months ago
tsconfig.server.json feat: Add separate server 6 months ago
yarn.lock misc: Hide chat overlay on empty messages 5 months ago

README.md

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 OBS Browser Settings