Our extension in action installed below a stream.
We aimed to create a Twitch extension that would improve audience participation and a sense of community during streams. Our brainstorming process took us through many ideas, from a community mural to speedrun clocks shared between different streamers. Inspired by the Reddit subreddit /r/AskOuija, we settled on the idea of an interactive Ouija board broadcaster extension. In /r/AskOuija, Reddit users participate by answering questions through forming responses one letter at a time in the comment section. We saw this as an opportunity for an audience to similarly collaborate or compete to form messages in reaction to the stream.
What it does
twitch-ouija is a Twitch Panel Extension which allows the audience of a stream to vote for individual letters to be assembled into a message that is broadcasted to the streamer. A user or the streamer initiates the ouija poll using a button on the extension. In 10 second intervals thereafter, each user has a single vote for a letter to add to the message, and the letter with the most votes within that time interval is appended to the end of the message. The voting rounds are repeated until "end" becomes the highest voted selection, after which the message is broadcasted to the streamer.
How we built it
First, we used the Twitch Developer Rig to initialize our project and import starter code for our reference. Then, we created a simple chatbot to read and write messages to a stream's chat room. From then, we split into two teams working in parallel: one building the front-end using the Developer Rig and the other building a model of the functionality of the ouija board using the chatbot. After both tasks were completed, we combined the ouija board functionality with the front-end structure of the extension. Once we were able to complete the integration, we moved into the hosted test phase by hosting our back-end on Heroku so that the extension could be accessed by all viewers of the stream. Throughout the development process, we maintained updated code on our GitHub repository.
Challenges we ran into
One of the largest challenges we encountered was moving into the hosted test phase by hosting our back-end on a remote server. We attempted to host with AWS to no success; instead we implemented webhooks with Socket.io and hosted our back-end on Heroku. After a struggle with security certificates, we were able to have a fully functioning extension hosted by Twitch.
Accomplishments that we're proud of
We are proud of our streamlined workflow in the early development phase, in which we were able to seamlessly divide labor between front-end and back-end functionalities, then combine the two later on. The efficiency of this process granted us a great amount of time left in the hackathon to struggle with the hosted test phase.
What we learned
Half of our team had no prior experience in web development and none of us had any experience with Twitch development coming into this hackathon; we ended up with a functioning extension with a fleshed-out front-end and back-end, hosted by Twitch. We are especially for this opportunity to learn a great deal of web development skills, which are sure to prove useful in the future.
What's next for twitch-ouija
We had plans to implement configurations for the streamer, but were not able to complete them during this hackathon. However, we believe that the ability for the streamer to customize the extension is essential to a unique stream experience. The streamer should not only be able to change the duration of the voting rounds or restrict the initiation of the ouija poll, but also be able to enable certain emotes to be valid submissions to the ouija board. In addition, we want to create a front-end interface that reflects the design of a real ouija board, in order to give the extension an occult aesthetic.