There’s a lot of different ways that a creator’s live audience can engage with them. Using Node.js, the Twitch API and the Streamlabs API I programmed a rudimentary widget that let’s creators display a viewer’s profile picture & name on their phone so they can show it in their webcams.
When it receives an event from Twitch Chat or Streamlabs (For Twitch, YouTube, Facebook, Streamlabs Charity alerts), it grabs their Profile Picture and displays it on a web server that your phone can connect to.
There’s definitely a risk when displaying a random user’s profile picture on stream, it’s an opportunity for trolls to change their profile picture to something that’s offensive or might get you banned. I included a small protective measure by including settings that can limit usage to VIPs/Moderators/Subscribers-Only for Twitch Chat. That’s okay for a working proof of concept, but not sae enough for something that should be widely distributed.
This snippet connects to the Streamlabs Socket API then listens for events from platforms connected to the creators account. From there, a creator can define settings like enabling specific events and setting minimum tip, bit, raid, and superchat amounts to trigger those specific events.
This snippet uses tmi.js, a JS Package for interacting with Twitch Chat via IRC in Node.js. After connecting to a creator’s channel, it listens to their chat to handle interactions. It check’s the chatter’s stats (subscriber, moderator, etc) then uses the Twitch Helix API to grab that chatter’s Profile Picture.
From there it gets very hacky. It reads a local html layout, switches out some variables (username, profile image url), and overwrites the html file in an XAMPP directory as a local server. The phone, connected on the same wifi, accesses localhost and displays the contents of the html page.