Creating a Twitch New Followers Overlay for OBS in PHP

#showdev #php #livecoding #twitch

Introduction

Twitch has their own ecosystem of points and rewards, and leveraging their API to showcase new followers on screen is a good starting point for those who want to give more recognition to their growing community.

I've been building something like this for my own stream sessions. Please don't reply with comments such as "there's extension X that does just that", since the exact objective of this experiment is to not depend on external services and build your own custom widgets or overlays. Freedom, at last! ;)

Building Your Own Twitch New Followers Overlay in Any Language

Here's a TL;DR of the whole process, using Twitch's implicit OAuth workflow.

Step 1: Create a new Twitch Application and obtain the client_id.
Step 2: Create a script to generate your application's authorization link and receive Twitch's callback request. This will require the application's client_id and the callback_url you set up with Twitch.
Step 3: Extract the user's access token from the callback URL. This will come in the following format: http://localhost:8000/twitch#access_token=TOKEN&scope=user%3Aedit&token_type=bearer, where TOKEN is your unique access token. Save it somewhere safe.
Step 4: Make a request to Twitch's API to validate the user token and get the user's ID. Include the Auth header with the user's access token.
Step 5: Make a request to Twitch's API to obtain recent followers for that user ID, and include the Auth header with the user's access token.
Step 6: Display the results nicely so that you can include that via an OBS Browser Source.

Note: If you're on Linux, as I am, you'll probably need to install a plugin to enable browser source (totally worth it!).

In the next section you'll see how to use the tool I've built during my live coding streams.

Using StreamWidgets

StreamWidgets is an experimental tool, and it's open source, so you can help improve it - actually, it's just a base, a starting point to give you an idea or inspiration. The idea really is to take control over our own overlays and interactive features, build fun things, and be totally free to experiment in our live streams. After all, we are coders ;)

And yes, I hate installing extensions!

StreamWidgets Requirements

PHP 7.3+ (CLI-only is OK)
Composer
A Twitch app that you can create at https://dev.twitch.tv/console/apps, using http://localhost:8000/twitch as redirect URI.

Installation Steps

Clone (or fork and clone) the project
Run composer install to install the dependencies. This will create a new config.php using example values.
Edit your config.php to include your application's CLIENT ID and Twitch username.
Run the built-in PHP server on the root of the project with php -S 0.0.0.0:8000 -t web/
Access the Twitch Auth endpoint from your browser: http://localhost:8000/auth
Follow the instructions, clicking on the auth link. You will be redirected to authorize the application on Twitch.
After authorizing, you will be redirected back to the /twitch endpoint. Look at the browser URL, your access token will be there in the following format:

http://localhost:8000/auth#access_token=TOKEN&scope=user%3Aedit&token_type=bearer

Where TOKEN is your unique access token. Copy that token to your config.php and keep it safe.

Once your access token is set up within your config file, you can get your latest followers at http://localhost:8000/followers.

Open a new browser source on OBS and point it to that address, then adjust the styling as needed! The CSS can be found at web/css/widgets.css.

Don't forget the web server (whether it's built-in, container-based or on a remote server) must be running so that you can pull the endpoint from your OBS studio. A JavaScript auto-refresh thing might be necessary to keep things updated from time to time!

Update: Subs Endpoint

I made a little update over the weekend to include a new endpoint that lists your recent subs. This uses the endpoint https://api.twitch.tv/helix/subscriptions and is available at /subs.