ttv-chat-light

Twitch TV chat reader to change the color of overlays loaded from streamelements and/or colors of internet connected lights via Azure Bot Service and Language Understanding AI (LUIS)

Join Clarkio live on Wednesdays at 10 AM ET and Fridays at 12:30 PM ET for the coding streams. https://twitch.tv/clarkio

Getting Started

Clone with: git clone [email protected]:clarkio/ttv-chat-light.git
Goto project: cd ttv-chat-light
Install node dependencies: npm install
If on:
- Debian/Ubuntu run: sudo apt install mpg123
- Windows install: cmdmp3
- MacOS you should have afplay already available
Login on https://twitch.tv
Go to https://twitchapps.com/tmi/
1. Click "Connect with Twitch"
2. Click "Authorize"
3. Copy the token value (starts with "oauth:")
Rename the file .env-example to .env
Update TTV_CLIENT_TOKEN with the token value you copied before in step 4.c
Update TTV_CLIENT_USERNAME to your client username (defaults to "clarkio")
For each overlay in streamelements (a.k.a. scenes) copy the URL to the scene and add it to the .env file as a new environment variable for each one.

Example: mainScene=https://streamelements.com/overlay/abc/123
Get Streamelements JWT from your account and update STREAMELEMENTS_JWT in your .env file.

Run the Application

Please make sure you've completed all steps in the "Getting Started" section before attempting to run the app.

From Docker

(@roberttables) Set OBS_SOCKETS_SERVER=host.docker.internal:
- (@parithon) Note This dns name (host.docker.internal) only appears to work on Docker Desktop for Mac/Windows and not production environments nor other linux environments (Ubuntu)
- (@roberttables) In that case then you can use the override through docker0 bridge which exists in linux environments

Windows

MacOS

Linux

From the Command Line (CLI)

Change to the directory of the project ttv-chat-light if you have not already done so.
Run npm start
Open your browser and go to http://localhost:1337/scenes?sceneName=<your-scene-name-from-.env>

Example: http://localhost:1337/scenes?sceneName=mainScene

From VS Code

Go to the debugger view and confirm the debugger is set to "Server Start"
Press the "Start Debugging" button (the green play button)
Open your browser and go to http://localhost:1337/scenes?sceneName=<your-scene-name-from-.env>

Example: http://localhost:1337/scenes?sceneName=mainScene

Trying Things Out

Please make sure you've completed all steps in the "Getting Started" and "Run the Application" sections before attempting to try out the app.

Open up a new browser tab or window and navigate to the chat for the Twitch channel you want to use (defaults to "clarkio" in the .env file under TTV_CHANNELS)

Example: https://www.twitch.tv/popout/clarkio/chat

If you'd like to have the client connect to another channel you can add it to the TTV_CHANNELS environment variable. The variable is comma-delimited so you can have it as clarkio,"your channel name" to connect to multiple channels
Enter the following chat message "!bulb go green" and you should see your overlay change color in your other tab/window which loaded http://localhost:1337/scenes?sceneName=mainScene

WARNING: the implementation is currently based off of an overlay being blue by default and will alter the hue from that. If your overlay default color is different it will not exactly change to the color you may be intending. We are working on making this better to support different default overlay colors.

Twitch Viewers that have helped contribute to the project (in no particular order):

Want to contribute? Check out our Code of Conduct and Contributing docs. This project follows the all-contributors specification. Contributions of any kind welcome!

Thanks goes to these wonderful people (emoji key):

sockelo
frenck
tallpants
wwsean08
l2ival
ikoakmaindehoas
codephobia
styler
TheMartesLive
eeevans
TheMichaelJolley
@jaredpsimpson

Contributors

Thanks goes to these wonderful people (emoji key):

_{Jake Nylund} 💻	_{Michael Jolley} 💻	_CodemanCodes 💻	_{jaredpsimpson} 💻	_{Edward Evans} 💻	_{Nicholas March} 💻	_PatPat1567 🐛
_{Timmy Kokke} 💻	_{Michael duBois} 💻	_{Benjamin Lannon} 💻