Posted 1 year ago in
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
Step 2: Create a script to generate your application's authorization link and receive Twitch's callback request. This will require the application's
callback_urlyou 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.
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!
- PHP 7.3+ (CLI-only is OK)
- A Twitch app that you can create at https://dev.twitch.tv/console/apps, using
http://localhost:8000/twitchas redirect URI.
- Clone (or fork and clone) the project
composer installto install the dependencies. This will create a new
config.phpusing example values.
- Edit your
config.phpto 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:
- 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:
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
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
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