We chose challenge #3 by DJTechlive. As users of the ourselves, we noticed that a lot of energy is generated within a stream's chat. Most notable is the influx of emotes triggered by some event occurring on stream. We wanted to make use of this energy, to give it some sort of shape.

What it does

This extension keeps track of the amount of emotes sent in a channel's chat. A visual progress bar shows on the stream as an overlay, increasing with each emote sent. Once the bar fills all the way, an event is triggered. Currently we have an audio clip set to play.

How we built it

We built this in HTML, CSS, JavaScript, and Python (Django Framework). HTML, CSS, and JavaScript is used for our front-end (overlay and audio control). We use the Twitch API for IRC's to connect to the chat. We then use python to parse the chat messages for emotes, and send the response to django to finally process the results. The front-end JavaScript uses these results to display the appropriate information, and trigger the audio clip when needed.

Challenges we ran into

We originally tried to create the entire extension in only HTML, CSS, and JavaScript. The challenge we ran into was in using the JavaScript for tasks such as parsing chat, since we weren't as familiar with JavaScript. We decided to switch to Python and Django instead, languages we were more comfortable with. The switch came with it's own challenges though, as there were less documentations and resources making use of these languages in regards to Twitch Extensions. With some trial and error, we hacked together an implementation.

Accomplishments that we're proud of

We're proud of overcoming the challenges we faced. We played to our strengths, and came up with a solid product. It may not yet be fully fleshed out, but the initial concept is visualized. We believe that our project fits the theme perfectly.

What we learned

There are multiple ways to accomplish something. Feel free to take the road less taken, especially if its the road you're more familiar with. Along with some miscellaneous JavaScript, Python, and Twitch extension coding..

What's next for WEmote

We believe that there is much more we can build into our extension. There are a few areas for expansion that we have in mind. First are customizations, tailoring the extension to each individual streamer using it. Allowing streamers to upload their own audio clips and emote selection will be options. We also want to improve upon our front end. The completion of the progress bar should be also more eventful. Currently we're thinking visual animations and better interfaces with more options for both streamers and viewers.

Share this project: