We were looking for fun ways for our viewers to interact with our different stream elements such as Hue lights, sound files, and OBS scenes. It started with a "Disco Party" channel reward and quickly evolved into so much more. Our focus for the hackathon was improving the broadcaster and viewer experience with an emphasis on broadcaster tools. As variety gamers ourselves, we were frustrated by the need to reconfigure active channel rewards every time we would switch games. There is already a lot of setup that goes into starting a Twitch stream and we wanted to make this experience easier for the broadcaster.
What it does
- Change OBS scenes (trigger cat cam).
- Change Philips Hue lights (disco time!!!).
- Play sound files ("Never Gonna Give You Up...").
- Read text-to-speech ("wololooooo").
- Trigger keyboard and mouse inputs (throw a grenade, jump out of a moving vehicle, drop weapon, etc.).
- Interact with customizable OBS overlays (change score, fill the screen with emotes, etc.).
- Execute Minecraft commands (spawn sheep with a viewer's name).
- Create scenes that dynamically activate/deactivate channel rewards (activate Minecraft related rewards when your "Minecraft In-Game Scene" is activated, turn off in-game related rewards when your "Age of Empires Lobby" scene is activated, etc.).
- Create custom profiles with the CastMate UI that link with your OBS scenes. Unique triggers can be created within each profile such as channel rewards, chat commands, follow/sub events, Hue commands, etc. You can also create global triggers that are available in all of your profiles.
- Create chat commands that trigger events (play a sound file, change lights, etc.).
- Create Twitch Sub, VIP, or Moderator only commands (moderator can change your scene when you forget!).
- Create overlays with counters, goals, notifications, random wheel, and emotes.
- Age of Empires 3 (leaderboard stats, unit stats)
- CSGO (game state stats)
- Minecraft (execute Minecraft commands dynamically)
How we built it
We used Electron, Vue, Element UI, and @d-fisher's incredible Node.js Twitch API packages. CastMate is focused on being plugin friendly. We took inspiration from Vue components and allowed plugins to be defined by a simple configuration object. The plugin configuration is used to generate the front end ui, setup reactive state, and define actions available to the streamer. Plugin State, similar to Vue and React is reactive so things like overlay updates and profile changes are handled automatically.
We came up with the idea of the action queue by wanting to synchronize lights and sounds together but quickly found it was a powerful tool for describing all sorts of interactions. We went through several iterations before settling on a triggers and actions setup. Plugins can define and activate triggers. Users can setup sequences of actions to be done when a trigger happens.
Challenges we ran into
Dynamically generating a configuration UI using Vue is tricky and making sure you maintain proper reactivity has a few traps. We originally planned to just toggle on and off channel point rewards the streamer made on twitch's Stream Manager but discovered that the API prohibited this.
Accomplishments that we're proud of
CastMate is our daily driver for our streams, it's held up and lets us achieve fun viewer interactions. We use it to allow our mods to change OBS scenes. LordTocs' baking stream uses CastMate to pick the weekly challenge. FitzBro enjoys using the input simulation to let viewers do Jedi things in Star Wars: Fallen Order. Viewers seem to really love the enhanced interactivity particularly with changing the streamer's lights.
What we learned
This was our first project using Electron. We learned a lot of new things about Electron's IPC, the bundling process, and UI frameworks.
What's next for CastMate
We are looking forward to continuing to develop CastMate and hope for a Beta release sometime in 2021! Enhancements that are on our radar include:
- Create an elegant UI that is easy to use
- Integration with new Twitch endpoints as they are exposed (polls, predictions, etc.)
- More plugins for popular games
- Stream deck integration
- Support for more smart light brands
Since we built CastMate to be fully pluggable, other developers can easily write their own plugins and contribute to the future of this open source broadcasting tool.