Inspiration

Twitch Plays Pokemon and live stream games have been a great inspiration. Especially the multiplayer aspect and how it pits chaos vs democracy. We soon realized that live stream games sometimes suffer from complex mechanics and are not that fun during long sessions.
We believe that live stream games for short sessions appeal for a broader audience and can create great value for all parties when combined with advertisement. This way we also want to solve known problems such as viewers drop-offs during breaks and AdBlock usage. With StreamBreak we are now building fun games that are specifically designed for live stream audiences!

What it does

StreamBreak develops multiplayer games that can be played by your entire audience during breaks (-think Mario Party meets "Twitch Plays"). With StreamBreak you can keep viewers and drive interaction even when you are AFK. Instead of a pause screen or a countdown you can simply start a StreamBreak game and let your viewers play. We started out with games using chat as interaction but soon realized that our games would be even more fun and accessible with the help of Twitch Extensions. So we used this challenge to build an extension with a scalable backend.

How we built it

For the extension frontend we use a React+TypeScript stack which connects to our backend via a websocket.

The backend is deployed on the AWS cloud running in a node.js environment (again developed in TypeScript). It was very important to us to build a robust and scalable infrastructure. The main task of our backend is to deliver messages from our games to the correct extension participants and vice versa. Our backend consists of two services: The GameService, that manages the websocket connections to our games running on the streamers system and the StreamService that manages the websocket connections to the extension. The two services communicate via a redis data store which enables us to scale either service horizontally if the demand requires it.

Challenges we ran into

First time using TypeScript it took some time to get used to the type definitions. Especially for the twitch extension javascript helper we needed to write our own type-file because no was provided.

First time deploying on the AWS cloud it took quite some time to understand what all the AWS services do, how they work together and how to connect them. Elastic Beanstalk was a great entry point because it set up a working environment and we then were able to explore all the services which were required and tailor them to our needs.

Accomplishments that we are proud of

  • Building a product that can be used by both small streamers as well as big live stream event organizers and solves a problem for both of them.
  • Having an easy way for the viewers to interact with our games (e.g. they simply click on the video screen where an action should occur).
  • Having a backend that is able to scale with the growth of our community.

What we learned

We learned a bunch from the new technologies we used (TypeScript, React,...) and how to design a scalable service. The extension development was straight forward thanks to the Twitch Developer Rig.
...and never use Windows Movie Maker D:

What's next for StreamBreak

  • We are planning on introducing bits to let viewers unlock cool effects or skins!
  • On the business side we want to create even more value for broadcasters and advertisers with the help of growth and sales mechanics - let only subscribers play or rewards viewers with offer links!
  • We want to develop even more cool games and scaling mechanics for very large viewer numbers.

Stay tuned via our social channels @streambreaktv, Facebook or visit us at https://www.streambreak.tv

Demo

For the time being we have our games running on our twitch channel. Hop over and join the fun! (Stream offline)

Built With

Share this project:
×

Updates