What it does

It engages viewers with a voting tug-of-war where they compete to show their favorite clips. Streamers push a single button or send a single chat message, then are free to go AFK.

How I built it

By myself, during the TwitchCon hackathon, over about 14 hours.

Challenges I ran into

I'd forgotten a lot of React, so had to get back in that groove, and working alone meant moving fast and ugly, which increased cost of change as time went on.

What's next for AFK Clip Battles

Going to need to refactor the backend service and move it to a production environment, and add monetization to hopefully support the cost of running the backend. Viewers will be able to cheer bits to put their clip up in one of the voting spots.

It's also turbo-ugly, so I'll need to make the front-end presentable. Need to add clip previews, and also show updates as people vote to animate the tug of war, which will make it more interesting for people to spam.

Also need to make the voting configurable -> let streamers set the vote "keys" to emoji rather than "A" or "B."

Known Issues

  1. Can't autoplay without being muted in most modern browsers without user permission. There's probably a way to get permission, and if the overlay is hosted on Twitch and the viewer has interacted with the site, it might just work anyway, but for now, shipping with muted video.
  2. Some clips have differently formed urls which include a pipe (|) that will break everything. Need to fix before testing more than just me :)
  3. There's no security between the extension and the EBS, especially the websocket server. The EBS should validate that the messages coming in are from valid clients before accepting votes, and should not mirror messages blindly.

Todo

  1. Refactor and port the EBS. Documentation made it seem like node was advisable and Twitch would host the service, but that's not the case. Should be redone to be more readable and plunked on AWS.
  2. Cleaner separation between client (extension) and server (EBS)
  3. Integrate with plugin config service to get things like the broadcaster's name and user ID.
  4. Investigate monitization - cheer with bits to choose an upcoming clip? (80/20 split on bits used in extension, streamer/dev)
  5. Investigate clip IDs - why do some (https://clips-media-assets2.twitch.tv/AT-cm%7C365489304-preview-480x272.jpg) have that weird AT-cm%7 (%7C = |) prefix? (kinda moot since they work)
  6. Make the portable app to allow for GUI or hotkey-based activation of the plugin. Compiled Autohotkey? Compiled Python?

Built With

Share this project:
×

Updates