CastMate - Shareable Dashboards

Create custom sharable dashboards to give other streamers access to your stream's automations. Play sounds remotely and control your guests devices to build fun and interactive collaborative streams.

Comment

Inspiration

Collaborative streams are fun, but very hard to run. If you want to have counters/scores, timers, shared information, buttons, lights, and sounds. It's quite a hard thing to have set up often requiring custom software solutions. CastMate already allows a single streamer to track, automate, and display things but doesn't have any way to share these features across the internet. This project aims to share access to the automations and production of CastMate remotely.

What it does

This project adds an entirely new system to CastMate to allow customizable and shareable control dashboards to allow streamers to build their own collaborative interactive stream setups. It adds a WebRTC based communication system allowing the host streamer to control the guest streamer's smart devices, play sounds out of the guest's computer, and allows sharing of buttons and other data to their guests.

How we built it

This project added an entirely new electron app for dashboard use, an editor to allow custom dashboard creation, a custom plugin based Dashboard Widget system, a new API server to manage remote access permissions, WebRTC connection signalling over Azure PubSub, and a WebRTC based bridge for RPC calls and automatic reactive state sharing. All written in typescript and Vue.

Challenges we ran into

CastMate's existing backend is in dire need of migration, so we had to spin up a new backend to handle the new API calls required for dashboard access permissions. Many internal CastMate systems needed updating to build the resource sharing and remote RPC calls required to share smart devices and sounds over the peer to peer connection. To play sounds remotely media files had to be sent over WebRTC and cached so I don't blow the bandwidth budget. A TURN server had to be set up in the event a user's network could not be navigated by STUN. Additional PubSub messages had to be created to handle the WebRTC connection exchange of ICE candidates.

Accomplishments that we're proud of

This project built a lot of core infrastructure in CastMate to support remote RPCs, custom widgets, and state sharing between remote clients. This allows new custom widgets to be created for the Dashboard system really easily and will pave the way for building higher production streams.

What we learned

This was my first time using WebRTC, so building the connection and RPC system was a new and interesting challenge. I also deployed an API server from a mono repo for the first time, which required special consideration for the build and deploy scripts using yarn's workspaces and git's spare checkouts.

What's next for CastMate - Collaborative Dashboards

Since this project built a lot of infrastructure and tooling it is now easier to build dashboard widgets and shared resources. So I will be continuing to add new dashboard controls and allow more configurable remote control. Possibly allowing the guest streamer to give the host streamer control of OBS sources and providing the guest streamer access to browser source overlays created by the host streamer.

Share this project:

Updates