Building GIPHY’s Extension for Twitch

August 21, 2018 by Nick Santaniello

We’re super excited about the recent launch of our GIPHY extension for Twitch!

Twitch has put a lot of and work and attention to detail into creating their Extensions platform and we’re excited to be a part of it. If you’ve used GIPHY on Slack, GIPHY for Twitch works in much the same way except with a slim, graphical interface. Viewers can insert a term and GIPHY will automagically deliver the perfect GIF and layer it atop a broadcaster’s stream for all of the audience to see. This integration offers a new way for viewers to visually comment on a broadcaster’s stream. In the past, streamers have had to set up complicated pipelines with their professional broadcast software to bake visual effects into their streams and adding an interactive effect was impossible. Twitch’s new extension platform allows developers like GIPHY to make native HTML5 widgets that overlay atop a stream, thus simplifying the process for streamers and allowing for greater interactivity with viewers.

Technically, the GIPHY for Twitch extension is composed of two parts: a lean HTML5 widget that interacts with both the public GIPHY API and the Twitch API, and a new GIPHY API. The existing public GIPHY API provides most of the functionality we need, while the new API is used for queueing up GIFs to be played on Twitch.

When a user enters a search term on Twitch, the extension fetches an appropriate GIF from the public GIPHY API and queues it up in the new service, which stores the queues in a Redis database. The Twitch API then interacts with the new service and the extension to display the GIFs on a broadcaster’s channel.

The new service periodically connects to Twitch’s PubSub system to deliver a list of all pending GIFs for a channel to each viewer’s browser. The PubSub system delivers the list to the frontend of every client watching the stream, so that the GIFs can be shown to all viewers.

One problem we noticed while testing was what I like to call “busy jukebox” syndrome. Have you ever requested a song in a popular jukebox only to end up waiting forever, not knowing when your song would play, or if it would even play at all? The same problem could occur with our extension on Twitch if too many GIFs are queued on a given stream. We solved this problem in our frontend by shortening the duration of GIFs as the queue grows. This ensures that all GIFs are played in a timely manner, shortly after they were initially requested.

Finally, we wanted to ensure that artists and partners were properly attributed when their GIFs were shown on Twitch. We do this by allowing users to hover over the GIF which will then display which GIPHY user the GIF comes from.

We’re looking forward to hearing users’ feedback and response to the extension and ways we can make it even more useful and fun for Twitch streamers and viewers in the future!