Giter VIP home page Giter VIP logo

chatbuzz's Introduction

ChatBuzz

ChatBuzz is a simple OBS Plugin that displays repeated messages from a Twitch chat.

Setup & Demo (click)

Setup & Demo Video

Table of Contents

URL Parameters

I've configured ChatBuzz so that its width and height are the same as the OBS Browser Source's default, 800x600. Because of this, it's as simple as putting in the URL and clicking "OK".

Your OBS Browser Source URL should look like "https://chatbuzz.app/?channel=CHANNEL", with CHANNEL being replaced by your Twitch channel's username (case insensitive). In addition, you can also add how ever many arguments to the end as you need, in any order, in the form '&PARAMETER=ARGUMENT'. For example, you may have "https://chatbuzz.app/?channel=xqc&notts&min=5&dur=10.5&color=red".

Table of Parameters

Parameter Definition Data Type Constraints Default Value
channel Channel username string - -
color Repeat font color string pink | red | orange | yellow | green | blue | purple yellow
fontsize Repeat font size float > 0.0 30.0
emotescale Emote scale when compared to font size float > 0.0 1.3
min Minimum number of identical messages required to display it. Text-To-Speech also activates when the repeat count is a multiple of this number int >= 2 3
dur Duration (in seconds) until a repeat expires without new identical messages float > 0.0 7.0
width Window width int > 0 800
height Window height int > 0 600
vol Text-To-Speech volume float >= 0.0 0.5
rate Text-To-Speech rate float > 0.0 0.8
pitch Text-To-Speech pitch float - 2.0
notts No Text-To-Speech bool* - false
norepeat No Text-To-Speech repeating messages after the initial displaying bool* - false
topdown Top-down instead of bottom-up bool* - false
rightside Right-side instead of left-side bool* - false
nobttv Exclude BetterTTV emotes bool* - false
noffz Exclude FrankerFaceZ emotes bool* - false
no7tv Exclude 7TV emotes bool* - false
debug Debug mode bool* - false

* the bool paremeters, notts–7tv, may be false on default, but I've made it so you don't need to provide "true" for it to be true. Simply include it as an argument e.g. "&topdown&notts" rather than "&topdown=true&notts=true".

Text-To-Speech Bug

The voice synthesis used by most web browsers, SpeechSynthesis, has issues with OBS as seen here. Because of this, you have to uncheck the browser source property box "Control audio via OBS" to hear the audio, and unfortunately the audio might play when you're in other scenes. The current workaround is to temporarily add the notts parameter or to delete the ChatBuzz browser source when needed. In the future, I may explore different TTS processes such as an API or a local program.

About

ChatBuzz is the first personal project that I can be genuinely be proud of. The need to create it came about when I wanted to personally use an OBS Plugin with a certain functionality while streaming on Twitch, but I couldn't find any that fit my needs. Specifically, the Twitch streamer Charborg has a similar program that was developed by Cagelight, seen here. I took it upon myself to make a free, open-source, public version.

(There exists a similar, widespread OBS Plugin concept of the "Combo" which is the number of consecutive identical messages. This is differentiated as a "Repeat", and uses a time duration which ignores whether or not messages are consecutive.)

I appreciate any and all feedback! Have you encountered any issues? Do you want new features e.g. emote-only mode, different font options? Any recommendations? Etc. Thanks for reading!

Learnings

  • TypeScript (& JavaScript)
  • HTML
  • CSS
  • APIs (tmi.js, teklynk_api_public)
  • Webpack
  • Node.js
  • General Web Development e.g. domain, hosting, favicon
  • Git
  • Unix shell
  • VS Code
  • UX (User Experience)
  • Project Management
  • Documentation
    • Markdown e.g. this (README.md)
  • Making a demo video (Setup & Demo (click))
  • Published to obsproject.com here

chatbuzz's People

Contributors

mattyherzig avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

totsu0jv sndwrx

chatbuzz's Issues

It's doubling for me

I am expirencing an issue with the ChatBuzz intergration on my Twitch stream. Whenever a word is repeated more than three times in the chat, the count gets split into two separate messages. For example, if someone types "HI" 13 times, it displays as "HI x 6" and "HI x 7" instead of "HI x 13". This splitting occurs consistently for any word repeated more than three times. My browser is Google Chrome and my operating system is WIndows 10.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.