Building a Live Stream Feed for Twitch Extensions

1. Every 10 minutes, a CloudWatch Rule invokes a sync_live_channels Lambda function which queries the Twitch Extension API for live activated channels — paging through the returned pages — and stores the results in a DynamoDB table called live-channels.
2. The live-channels table has an item TTL of 15 minutes, so stale items are removed 15 minutes after insertion. This keeps the list of live channels fresh — streams that go offline will be removed within 15 minutes.
3. To get a list of channels, the get_live_channels Lambda function runs a DynamoDB query against the live-channels table’s by_view_count index — sorted by a streamer’s view_count — and returns that list to the caller.
4. To produce a list of newly live channels, the DynamoDB Stream from live-channels is forwarded to a Lambda consumer called notify_live_channels which then posts a message to Discord using their webhooks API.

Let’s break some of those steps down with some code examples! These examples are in TypeScript, a typed superset of JavaScript that JS developers should feel at home reading.

The sync_live_channels Lambda function

The sync_live_channels Lambda function is responsible for pulling the list of live channels from Twitch and storing them in our DynamoDB table.

Here we can see some pseudocode for querying the Twitch API and storing the results in our live-channels DynamoDB table. At the moment, there’s a bug in the API response: occasionally, you’ll receive a response with an empty list of channels but still receive a cursor for the next page. Once you query that cursor again, Twitch will return the next page of live activated channels to you, so your code must be able to handle the case where no channels are returned in the response, but a cursor still provides another page. The TwitchAPI team is aware of this minor issue, though it’s always advisable to check your data!

The notify_live_channels Lambda function

This Lambda function is subscribed to DynamoDB Stream events from our live-channel table, so it gets invoked when items are added. This Lambda’s job is to take the new stream, combine it with other information we know about the streamer — using the Twitch API — and publish that information to our Discord channel.

Notice how we use the Twitch brand purple — encoded in decimal — as the color for our Discord embed; that’s what gives us the pretty purple border to the left of Discord messages! Also notice that we restrict Discord notifications to streamers with at least 5,000 total views on their channel; this helps us avoid spam from accounts with low view counts that may install the Extension.

To get a Discord Webhook, set up a webhook in the channel you’d like messages to appear.

And then enjoy the result!

The get_live_channels Lambda function

This Lambda function is in charge of querying the currently live channels and returning that to the caller. In a production application, you would expose this with an API Gateway route or an AppSync resolver and cache the result.

This Lambda function queries the DynamoDB index for the top 20 live channels ordered by their view_count, merges that data with extra information about the streamer we know, like their profile_image_url and login, and returns the bundle of data to the caller.

On the frontend, we can build our UI with the following elements:

• the streamer’s profile_image_url
• a recent frame from their stream, which is provided via thumbnail_url in the /helix/streams endpoint, and adding our dimensions of 256x144
• a link to their Twitch channel like https://twitch.tv/{login}

That’s All, Folks

To check out this feed in action, visit stickersbydot.com or join the Stickers Discord.

For more information on Extensions, visit dev.twitch.tv/build or join the TwitchDev Community Discord.