christopherldo / twitch-chat-visualizer

A Node.js Project. Would you like to see your chat stream with a custom design? This is for you!

Chat Visualizer

Hi, this is the Chat Visualizer for you twitch stream that I've created.
I started studying JavaScript and I decided to take this project as my first one.
Feel free to comment and give your opinions.
Take a read at this document to know how to use it.

Welcome to this Chat Visualizer.

Screenshot

Link to meduardinha on twitch
Link to cellbit on twitch
Link to gaules on twitch

Recommended Setup (STREAMER)

• Get to this link; (We're offline because of server costs)
• Input your twitch channel and press OK;
• Click on the gear icon and setup your chat style;
• Once you finish, click on the "Transparent" checkbox and a modal will open;
• Click on "Click here to copy" to copy the transparent chat link;
• Create a new Browser source on your OBS;
• Paste the link on the URL field and adjust the size (I do recommend you take 400 for width);

Recommended Setup (STREAMER - pt_BR)

• Acesse esse link; (Estamos offline por conta de custos com servidor)
• Insira o nome do seu canal no campo de texto e aperte OK;
• Clique no ícone da engrenagem e configure o estilo do seu chat;
• Assim que finalizar, click na caixa "Transparent" e um modal irá abrir;
• Clique em "Click here to copy" para copiar o link para o seu chat transparente;
• Crie uma nova fonte de navegador no seu OBS;
• Cole o link no campo URL e ajuste o tamanho (Eu recomendo deixar 400 para a largura);

Recommended Setup (DEVS)

• Clone this repository or download the zip file;
• cp .env.example .env to copy the env example to a real .env;
• Go to .env file and insert your app client_id and client_secret (Learn more here);
• You will need a JavaScript runtime and npm to run this application (You can get it here);
• Once you get the JavaScript runtime and npm, install yarn (npm install -g yarn);
• Install all the dependencies it needs with yarn (yarn);
• Start the app with yarn (yarn start);
• Open your browser and enter in the following addres: localhost:3000 (You can also change the port on .env file);
• Enjoy your twitch chat visualizer! :)

Features

• Visualize yout twitch chat;
• Choose your favorite color for each item;
• Transparency mode for streamers to use it on OBS browser source;
• In real-time Twitch emotes.
• In real-time BTTV emotes;
• In real-time FFZ emotes;
• In real-time mod deletion events;
• NOW SUPPORTING TWITCH ANIMATED EMOTES.

Support

If you enjoyed my work:
Please consider donating me on Paypal;