Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/clarkio/ttv-chat-bot

Twitch livestream bot that can control colors for overlays from Stream Elements, play sound effects, handle custom rewards (like text-to-speech) and more!
https://github.com/clarkio/ttv-chat-bot

bot chatbot hacktoberfest hacktoberfest2022 javascript js livestream nodejs ts twitch typescript web websockets

Last synced: 14 days ago
JSON representation

Twitch livestream bot that can control colors for overlays from Stream Elements, play sound effects, handle custom rewards (like text-to-speech) and more!

Host: GitHub
URL: https://github.com/clarkio/ttv-chat-bot
Owner: clarkio
License: mit
Created: 2018-03-21T18:37:22.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2024-09-15T04:40:31.000Z (about 2 months ago)
Last Synced: 2024-09-15T09:11:54.144Z (about 2 months ago)
Topics: bot, chatbot, hacktoberfest, hacktoberfest2022, javascript, js, livestream, nodejs, ts, twitch, typescript, web, websockets
Language: TypeScript
Homepage: https://clarkio.com
Size: 15.2 MB
Stars: 71
Watchers: 7
Forks: 30
Open Issues: 51
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

awesome-twitch-dev - clarkio/ttv-chat-bot - Twitch TV chat reader to control colors for overlays from Stream Elements and/or internet connected light bulbs. (Libraries / JavaScript (Node.js))

README

        


  

# ttv-chat-bot

[![Known Vulnerabilities](https://snyk.io/test/github/clarkio/ttv-chat-bot/badge.svg)](https://snyk.io/test/github/clarkio/ttv-chat-bot)

![GitHub](https://img.shields.io/github/license/clarkio/ttv-chat-bot)

[![Discord](https://img.shields.io/discord/421902136457035777)](https://discord.gg/xB95beJ)

[![Twitch Status](https://img.shields.io/twitch/status/clarkio)](https://twitch.tv/clarkio)




[![Twitter Follow](https://img.shields.io/twitter/follow/_clarkio?style=social)](https://twitter.com/intent/follow?screen_name=_clarkio)



Twitch livestream bot that can control colors for overlays from Stream Elements, play sound effects, handle custom rewards (like text-to-speech) and more!

[![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors)

## Clarkio

This chatbot was built with 💙 live on stream with the programming community. Come and hang out with us over on Twitch!

> https://twitch.tv/clarkio

## Getting Started

1. Clone with: `git clone [email protected]:clarkio/ttv-chat-bot.git`

1. Goto project: `cd ttv-chat-bot`

1. Install node dependencies: `npm install`

1. If on:

   * **Debian/Ubuntu** run: `sudo apt install mpg123`

   * **Windows** install: [cmdmp3](https://github.com/jimlawless/cmdmp3)

   * **MacOS** you should have [afplay](https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/afplay.1.html) already available

1. Login on [https://twitch.tv](https://twitch.tv)

1. Go to [https://twitchapps.com/tmi/](https://twitchapps.com/tmi/)

   1. Click "Connect with Twitch"

   1. Click "Authorize"

   1. Copy the token value (starts with "oauth:")

1. Rename the file `.env-example` to `.env`

1. Update `TTV_CLIENT_TOKEN` with the token value you copied before in step 4.c

1. Update `TTV_CLIENT_USERNAME` to your client username (defaults to "clarkio")

1. 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

1. 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)

1. Change to the directory of the project `ttv-chat-bot` if you have not already done so.

1. Run `npm start`

1. Open your browser and go to [http://localhost:1337/scenes?sceneName=](http://localhost:1337/scenes?sceneName=)

   Example: [http://localhost:1337/scenes?sceneName=mainScene](http://localhost:1337/scenes?sceneName=mainScene)

### From VS Code

1. Go to the debugger view and confirm the debugger is set to "Server Start"

1. Press the "Start Debugging" button (the green play button)

1. Open your browser and go to [http://localhost:1337/scenes?sceneName=](http://localhost:1337/scenes?sceneName=)

   Example: [http://localhost:1337/scenes?sceneName=mainScene](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.

1. 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](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

1. 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](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](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) docs. This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification.  Contributions of any kind welcome!

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

- sockelo

- [frenck](https://github.com/frenck)

- [tallpants](https://github.com/tallpants)

- wwsean08

- l2ival

- ikoakmaindehoas

- codephobia

- styler

- [TheMartesLive](https://github.com/TheMartes)

- [eeevans](https://github.com/eeevans)

- TheMichaelJolley

- @jaredpsimpson

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Jake Nylund}
💻

    
_{Michael Jolley}
💻

    
_CodemanCodes
💻

    
_{jaredpsimpson}
💻

    
_{Edward Evans}
💻

    
_{Nicholas March}
💻

    
_PatPat1567
🐛

  

  

    
_{Timmy Kokke}
💻

    
_{Michael duBois}
💻

    
_{Benjamin Lannon}
💻

    
_{Jason Allan}
💻

    
_{Chris Gargotta}
💻 🤔

    
_Wingysam
🤔

    
_{LuckyNoS7evin}
💻

  

  

    
_{Sean Smith}
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!