Highlights and Winners from the TwitchCon Hackathon 2018

This year’s TwitchCon Hackathon saw 70 developers from around the United States come to team up and build Twitch Extensions over the course of just 24 hours. We invited some of Twitch’s partnered broadcasters to participate by offering up challenges for the teams’ Extensions to solve.

At the end of the hackathon, we had 13 diverse Twitch Extensions to show off from our developer teams. You can check out all of the projects on our Devpost page, but here are a few of our favorites:

KnowClips

Q. What’s an elevator pitch for your Extension?

A. KnowClips integrates user-generated Twitch clips into an intuitive video overlay Extension to drive viewer engagement and retention in a stream.

Q. How did you come up with the idea?

A. Seung Woo and Nolan initially had the idea to auto-generate Twitch clips from exciting moments in a stream. As a result of technical barriers and time constraints, we realized that would not be feasible. We instead pivoted to an anomaly detection engine that did the opposite: to look for moments of low activity / engagement in the Chat and to recommend Twitch clips to viewers to keep them engaged in the streamer’s content.

Q. What did you manage to get done in 24 hours?

A. We managed to build out the anomaly detection engine on top of a Twitch Chat stream by looking at message volume on a given interval. We also managed to build a UI that overlays Twitch clips on top of a stream and embeds a video within the stream window itself to enable easy clip viewing and interaction.

KnowClips won the grand prize and our partnered broadcaster challenge sponsored by savinthebees: “Build an Extension that gives a viewer the tools they need to promote a streamer’s content.”

HandEmote

Q. What’s an elevator pitch for your Extension?

A. We were tasked with engaging a viewer within 15 seconds to 30 seconds of them joining a stream. So we asked ourselves, “What’s the most natural way of saying hello in real life?…pause for effect…You wave! And with that, HandEmote was born. Our product utilizes a Leap Motion to capture the hand movements of someone watching a stream. With our platform, you can wave hello to your favorite streamer and they’ll be immediately alerted that you’ve joined their stream! Since we’re able to capture every hand configuration possible, we thought: “How can we take this to the next level?” Not only are you able to wave at your favorite streamer, but you can also pat them to reassure them after a bad play or you can high five them to show your approval for something good! We’ve completely removed the need to use a keyboard when interacting with your favorite streamer in order to make the most human, realistic interaction possible.

Q. How did you come up with the idea?

A. We thought about the feeling of everyone doing the wave together at a concert, feeling that collective power to cheer on a band you all love. We knew that many Extensions already existed that let streamers interact with viewers via a hardware hack on the streamer side, but we wanted to give the power back to the people — to team up and cheer on the streamer they love. Another great source of inspiration came from within our team. Having never met each other before, we somehow became best of friends almost instantly; we’re literally memeing on Discord while we collectively write this on a Saturday evening. With this newfound eternal friendship (and lifelong memories), we decided we wanted to spread this love from our community to Twitch’s.

Q. What did you manage to get done in 24 hours?

A.

• Learn how to build a Twitch Extension
• Set up React applications for the overlay and the live config
• Attempt to use Twitch PubSub, fail miserably
• Integrate Unity 3D to encode and recognize gestures
• Set up REST calls to get gestures from the Unity 3D application and send to the overlay and live config feed
• Make tons of people laugh and be surprised by our demo
• And most importantly: Be a wholesome, loving team with great synergy, communication, and humor!
• Sleep one hour

HandEmote won an honorable mention and our partnered broadcaster challenge sponsored by DJTechLive: “Build an Extension that gives a personalized twist to stream engagement.”

Twiffle

Q. What’s an elevator pitch for your Extension?

A. Twiffle streamlines the raffle giveaway process with four unique types of raffle giveaways: “custom,” “trivia,” “boundary,” and “random”!

Q. How did you come up with the idea?

A. Giveaways and raffles should be more common on Twitch, but setting them up is difficult. There are a lot of pieces which need to come together, purchasing the item, setting up the giveaway and conditions, and finally getting the winner’s information in order to receive the prize. Twiffle solves this problem by: allowing to hold an item directly purchased from eBay (or give game keys directly, etc.), set up what type of giveaway you want to have (currently four supported types), and finally collect the necessary information to give the winner their prize. This cuts out two of the most inconvenient current problems when making a giveaway and will promote more giveaways at a higher frequency, allowing for more viewer/streamer interaction.

Q. What did you manage to get done in 24 hours?

A. We managed to get a simple Python 3 backend using the latest async I/O features running in tandem with a Twitch Extension frontend that was built with Javascript and ReactJS. We were able to pull live item listings data from eBay all the way to the checkout process. We chose to use the eBay API instead of the Amazon API as there is an implemented break of endpoints between submitting card details for a card transaction and actually finalizing a transaction. This was necessary for the streamer end, so that they may fulfill billing information and for a stream viewer to “finish” the transaction by placing their shipping address. The Python 3 backend also sported universal multi-processing queue endpoints which allow for fast, in-memory based push/pull event messaging, which supported a lot of real-time events/notifications that need to be made on a granular app/user level for the Extension.

Twiffle won an honorable mention.

Twitchlight

Q. What’s an elevator pitch for your Extension?

A. Twitchlight is a Twitch Extension (and more!) that allows streamers to interact with their viewers through a physical decor piece: an LED strip light that flashes colors in response to special events like subscriptions and to communicate the winner of streamer-initiated polls. Instead of an overlay on the screen, viewers can control a physical device that sits right beside the streamer and in the camera frame. Twitchlight is also a customized branding tool, for the LED lights can be used to create logos of streamers.

Q. How did you come up with the idea?

A. We searched for a creative way to promote streamer engagement with viewers, but we wanted to something different from a normal overlay. The LED lights were an appealing new challenge to tackle since none of us had solid hardware experience, so we decided to make a “real-life overlay”!

Q. What did you manage to get done in 24 hours?

A. We put together the LED piece by constructing the Twitch logo out of strip lights, which we programmed with Arduino to flash specific colors. Our Node.js Extension listened for special events like subscriptions and donations, flashing the lights to celebrate. Streamers could also administer polls by typing in questions, choices, and their corresponding colors. Within a certain time frame, viewers vote by sending emotes of that specific color, and the color of the winning choice is flashed by the strip lights. We also created an overlay that would assist the LED light in flashing the winning color and communicating the poll questions and event celebrations.

Twitchlight won our partnered broadcaster challenge sponsored by wish: “Build an Extension that helps a streamer celebrate a subscription.”

StreamerTrivia

Q. What’s an elevator pitch for your Extension?

A. Streamer Trivia is a Family Feud-style quiz Extension that allows viewers to guess what the broadcaster would answer to a multiple choice question and collect points over time by guessing correctly. It’s a great way for for the streamers to bond with their viewers and for viewers to show how well they know a streamer!

The streamer will send out a request for a set number of questions and the first viewers to respond to that question will get to create a short multiple choice question that follows channel guidelines. Once the viewers create questions, the streamer will review and answer them. The streamer can reject any questions that don’t follow channel guidelines. After the streamer answers a question, viewers have a minute to guess what the streamer would answer. Once all the answers are in, the correct answer is revealed and viewers are awarded points based off of how right they are! Scores are tallied in a leaderboard to celebrate viewers who engage and know the streamer.

Q. How did you come up with the idea?

A. Our ideation process was to first learn more about streamers and viewers by exploring TwitchCon and talking with Twitch Staff. Then we thought about different types of viewers and how we wanted to engage them. We identified two different types of interactions we wanted to focus on: how to reward subscribers and how to create ways for lurkers to feel safe enough to engage. A few ideas we had initially were making Twitch Emote heat map, a prize wheel, a rewarding viewers for emote spamming to welcome new subscribers, and subscription based question asking system where new subscribers get to ask a question. We finally decided on a Family Feud-like quiz system that polls viewers for questions and allows viewers to get points.

Q. What did you manage to get done in 24 hours?

A. We managed to get all the front-end functionalities for our Extension up and running, but had troubles making our backend usable in time. We underestimated the amount of time we were actually going to spend at TwitchCon (a lot) which ate into the amount of actual work time we had.

StreamerTrivia won our partnered broadcaster challenge sponsored by SirSlaw: “Build an Extension that lets a streamer engage their audience with a question.”

As always, we were absolutely blown away by the quality of this year’s submissions. We hope that these Extensions will be fully finished and put on the Twitch Extension store for all streamers to add to their channels!

This event would not have been possible without the support of our partners at Major League Hacking and all of the resources they provided us. We had a blast with everyone in San Jose this year, and we can’t wait to host our next event. See you all in 2019!