Main Overlay UI
We wanted to create a great extension that helps Twitch streamers retain their viewers. We saw that the current clip system is prone to inertia - viewers have to leave the stream to watch clips, and there's no broadcaster control over which clips are prioritized over others
What it does
- Browse and watch clips directly in the stream during downtimes (queues, bathroom breaks)
- Drag, drop, resize the clip viewing window
- Configure which clips are 'Featured' to viewers, and appear first in the highlights bar
- Configure which clips are hidden, i.e. duplicates, unflattering moments, etc.
- Configure how clips are sorted (most recent vs. most viewed)
- Configure how many clips show up in the highlights bar
- Configure clip window resizability / draggability
How I built it
I used the twitch developer rig to build out the frontend. I used NodeJS, Typescript, and Express for the HTTP webserver logic, and I hosted it on AWS Elastic Beanstalk, using Amazon Route 53 and Cert management to support SSL for my API.
Challenges I ran into
Twitch had some content security policies for iframes that prevented video overlayment. I got around this through the help of a Twitch engineer, who suggested a clever workaround that managed to satisfy the content security policy.
Accomplishments that I'm proud of
I'm proud of the fact that the extension is usable and practical, and of the fact that I was able to get an API up and running on AWS infrastructure
What I learned
I learned about typescript OOP patterns for API development, how SSL certs and domains can be managed, as well as a few tricks that I can keep in my back pocket for deploying on AWS infrastructure
What's next for knowclip
- Likes on clips, as well as sorting based on likes
- One-click social media sharing, where viewers can share links to both the clip and the stream on their various social media outlets
- ML engine for recommending clips during slow times
- Community polling for 'Highlight of the Week' or something similar