When JPop / KPop fans goto concerts, the pen light is an integral part of the experience. I went to my first concert like this last summer - the Hololive All 4 One concert in Radio City Musical Hall, NYC. The penlights can change color, and the audience will change their colors to match the theme color of their favorite personality on stage. It's really fun to participate and see the crowd work in unison. Also much more interesting than everyone hold up their phone.
Many streamers and vTubers like to do Karaoke streams, and often have pen light emojis in chat.
But I had an interesting idea - a website that lets streamers set up a room for chatters to join and wave their mouse around. It would also provide a link to use as a Browser Source widget in OBS (the software streamers use to broadcast). The idea would be that rooms would have a code similar to how JackBox Games allows players and audience to join a room. Then everyone can wave their mouse around or wave their fingers on their mobile device, and have a pen light show up on the streamers screen.
I decided to throw together a prototype a week before a Karaoke stream and it worked great! You can see an example below:
The home page is simple and designed to be responsible and easy to use both on desktop and mobile:
Chatters can just type the code they see on screen and they'll be given an interface to move their pen light around:
The streamer can create rooms, with a number of useful options:
Streamers can set up which pen colors are allowed to be used, and even provide custom transparent PNGs to use as custom penglights.
I built the backend using NodeJS with a Websocket server to sync the pens. The front end is a combination of Vue3 as well as a canvas to render the optional glow trails for the pen lights.
The streamers can just copy their OBS link into the OBS software and anyone who joins the room will render in the widget!
I have plans to upgrade this by letting chatters earn points for the "mileagle" their pen travels, the ability to earn rare pen lights (provided by the streamer), a leader board for distance traveled, and the ability for chatters to record custom patterns to play on loop, so they can give their hand a rest.
The projected is managed with PM2 on the backend, and I'd like to scale the sockets system to use an in-memory NoSQL database so the platform could scale in case many streamers are using it simultaneously, which might have hundreds or thousands of chatters on platform at once, and a single websocket server would not scale.
Check it out here!