Channel Points Controlled Webcam

Inspiration

After a chance encounter with a former coworker, he talked about building video conferencing software using webRT which made me think that I could use that as a bases for controlling a webcam from external sources & styling it using CSS.

What it does

The project enabled the broadcaster to login into a dashboard & generated 10 different rewards options for their channel.

The reward options are all related controller a webcam & it's display.

Channel points can be spent to turn on the webcam, while the webcam is on, more points can be spent to trigger other effect on the webcam (bounce, rotate, color shifting, zooming & enlarging/shrinking) .

How we built it

We first started with getting the login system working so that we had an oauth connection to the twitch helix API.

Once we had that working we moved onto the vueJS frontend and the loading of the reward options into a dashboard that would communicate back to the nodejs server to keep track of reward & webcam data.

From there we moved onto adding the functionality to create & load rewards associated to the program. Then we added the pubsub listener which would trigger events in our store based on the rewardID associated to the redemption.

This is where we then setup a socketIO connection between nodejs and vuejs so that the server and dynamically send events to the overlay.

On the overlay we added triggers for each of the rewards so that they effect would apply to the webcam.

Challenges we ran into

The first major roadblock I ran into would have been an issue where the connection to the twitch api was being rate limited on connecting, which required me to upgrade my version of node.js as the dev of the plugin was not able to reproduce the error {I had a cursed environment}.

The next roadblock was figuring out why my vueJS frontend was not making a connection to the socket server.

Accomplishments that we're proud of

As I primarily develop in php whenever I get a project working outside of my comfortable language it makes me give a pat on the back.

What we learned

As this was my first 100% vueJS frontend I learned how to work with it component system, the use of bound variables made the updating of webcam features much simpler.

What's next for Channel Points Controlled Webcam

Future features would be adding points scaling so that the more the reward is used the more expense it gets.

Figuring a way for the system to support more than 1 user (user sessions) & attempt to setup a method so that both servers can be started from a single point and not have to be started separately.

More Demo Videos

Extended version that includes more details link Demo of just the rewards effects on the webcam link

Built With

• node.js
• vuejs