Twitch API and PubSub access

Hey,

New version:
The new version can now be found on github GitHub - wuestenarchitekten/Twitcher: a component to communicate with twitch with instructions here: https://derivative.ca/community-post/asset/twitcher-twitchwatching-everyone

this little component let’s you connect to the Twitch API v5 as well as the PubSub API to subscribe to topics such as when users “cheer” a channel, somebody subscribes to a channel, a purchase is made on the channel or somebody “whispers” your twitch account.

The underlying network consists of the webCOMP from the palette as well as a websocket DAT to connect to the PubSub interface.

To get started you need to:

  1. register an App on dev.twitch.tv
  2. create a callback page on a webserver you own
  3. retrieve an OAuth token
  4. start and configure the attached component

Register an App on dev.twitch.com
with a twitch account already registered go to dev.twitch.tv/dashboard. Here select “Apps” and click on “Register Your Application”.

Fill out the required fields and note the OAuth Redirect URL. This will be the place where you will retrieve your OAuth Token. Click the “Create” button.

create a callback page on a webserver you own
At the location you have specified for your OAuth callback URL create a page. The page needs to link to the id.twitch.tv/oauth2/authorize endpoint with parameters passed being the

  • redirect_url (exactly as you entered it in the App Create Page)
  • client_id (you can retrieve this from your Manage Application Page on twitch)
  • the scope strings which is a list of data points you want to have access to from your twitch component. A full list of available scopes and what access they will allow you can be found here: dev.twitch.tv/docs/authentication/#scopes
<a href=https://id.twitch.tv/oauth2/authorize?client_id=mwh9kz5xq550ojd9pf2mkbxxjpq29w&redirect_uri=https://www.webriot.de/twitch/&response_type=token&scope=chat:read%20channel:moderate%20chat:edit%20whispers:read%20whispers:edit%20channel_commercial%20channel_editor%20channel_feed_edit%20channel_feed_read%20channel_read%20channel_subscriptions%20viewing_activity_read>Click me for access</a>

retrieve the OAuth Token
Navigate in your browser to the callback page where you created the link shown above. Click onthe link and you should be asked to either login to your Twitch Account, or if you are already logged in, it will ask you if you want to give all the permissions to the App that you have been requesting via the scope parameter passed along in the link.

You should be redirected to the page with the link. Here, copy the url and search for the “access_token” parameter. An example url would look like this:

https://www.webriot.de/twitch/#access_token=4eg3t4by8z2jq4pnjt8ekaud9sx8i3&scope=chat%3Aread+channel%3Amoderate+chat%3Aedit+whispers%3Aread+whispers%3Aedit+channel_commercial+channel_editor+channel_feed_edit+channel_feed_read+channel_read+channel_subscriptions+viewing_activity_read&token_type=bearer

copy the access token.

start and configure the twitch component
Start the attached file and copy Client ID as well as OAuth Token into the parameters on the Twitch parameter page.
============================================================================
NOTE: KEEP THAT OAuth TOKEN A SECRET! depending on what rights you have given the application, anyone with the OAuth token now can make use of the API to control the account it is associated with. You can either recreate a token to invalidate the previous one or make sure to delete it from your file before passing it on to others or showing the parameters of the Twitch Component on a Twitch Stream!
==============================================================================

TwitchParameters.PNG

Switch over to the PubSub parameter page and click the “Get ChannelID” Pulse parameter.
If a ChannelID is being displayed in the ChannelID Parameter, you are now ready to start listening to Bits, Channel Subscriptions, Commerce Events and Whispers.

Any event is being passed into the callback DAT specified under the Callbacks parameter. By default the received json is printed to the textport. By editing the Callbacks DAT you can control what should be happening on such an event.

For example a whisper event will return a python dictionary similar to this:

{
	'thread_id': '104027510_114993034', 
	'tags': {
		'badges': [], 
		'login': 'touchdesigner', 
		'emotes': [], 
		'user_type': '', 
		'color': '', 
		'display_name': 'touchdesigner'
	}, 
	'recipient': {
		'profile_image': None, 
		'badges': [], 
		'display_name': 'Wuestenarchitekten', 
		'user_type': '', 
		'id': 104027510, 
		'color': '', 
		'username': 'wuestenarchitekten'
	}, 
	'body': 'Hello Wuestenarchitekten!!', 
	'id': 26, 
	'from_id': 114993034, 
	'sent_ts': 1543873537, 
	'nonce': '2af192ba897205942937d9cf7e14877f', 
	'message_id': '6ce98ed0-a944-44e1-9a31-204a6c262d32'
} 

An overview over all PubSub topics can be found here: dev.twitch.tv/docs/pubsub/

Access to the Twitch API v5
You can use the included webCOMP to access the Twitch API v5 dev.twitch.tv/docs/v5/

For example to get more information about your channel use following python code:

# specify the path of the Twitch Component
twitchCOMP = op('twitch')
url = 'https://api.twitch.tv/kraken/channel'
requestType = 'get'
header = {
	'Accept': 'application/vnd.twitchtv.v5+json',
	'Client-ID': twitchCOMP.par.Clientid.eval(),
	'Authorization': 'OAuth {0}'.format(twitchCOMP.par.Oauthtoken.eval())
}
twitchCOMP.Send(url=url, requestType=requestType, header=header)

The response from the Twitch server will be processed by a DAT called “webCOMPCallback” inside the Twitch Component. In it’s included “receive” function is were you would have to parse the responses.

small update to the Twitch component.

Features:
You can now connect to channel chats and chat rooms. Messages are relayed to a callback DAT and you can also send messages.

After following the instructions on how to get an app going and connected (don’t forget to click the “Get Channel Info” pulse parameter), you can now turn on the chat feature by enabling the “Connect” parameter on the “Chat” parameter page. All available rooms in your channel will be loaded and via the “Room” parameter dropdown, you can choose where to send messages to. All received messages are dealt with in the “chatCallback” DAT inside the Twitch component.

to join another channel:

# specify the path of the Twitch Component
twitchCOMP = op('twitch')
twitchCOMP.ChatRoomConnect(channel=<channelName>)

to send a message to another channel:

# specify the path of the Twitch Component
twitchCOMP = op('twitch')
twitchCOMP.SendMsg(channel=<channelName>, msg=Sample Message)

to part from a channel:

# specify the path of the Twitch Component
twitchCOMP = op('twitch')
twitchCOMP.ChatDisconnect(channel=<channelName>)

Enhancements:
to access the Twitch API v5, the header is now optional:

# specify the path of the Twitch Component
twitchCOMP = op('twitch')
url = 'https://api.twitch.tv/kraken/channel'
twitchCOMP.Send(url=url)

Bug fixes:

  • the webCOMP inside the Twitch component would not connect automatically on restart.

This is really cool! I’m very interested in getting this working.

I’m running into trouble getting the OAuth callback URL to work. I’ve created a webpage on a domain I own using your HTML code but when I click on the link the page just goes white.
I’ve changed the URL and client ID to my own in the code. Curious if you had any insight as to what I might be doing wrong??

Also, I think the URL in your WebCOMP needs to be changed to id.twitch.tv

According to the Twitch wiki “The domain dedicated to Twitch authentication is api.twitch.tv/kraken domain for Twitch authentication will continue to work until the end of 2018, when we remove Twitch API v5 functionality”

Hey,

thanks for the note about the changed URL. I’ll upload a new version in a bit.
Regarding the website on your server - I just had to make sure that the oAuth redirect URL and the link in it matched exactly what was specified in my application at twitch.tv.
Especially important is the whole www part…

The content of my index.html is:

<a href=https://id.twitch.tv/oauth2/authorize?client_id=vqr44qlsg0kc5qwbio3rafwrdcovf8&redirect_uri=https://www.webriot.de/twitch/&response_type=token&scope=chat:read%20channel:moderate%20chat:edit%20whispers:read%20whispers:edit%20channel_commercial%20channel_editor%20channel_feed_edit%20channel_feed_read%20channel_read%20channel_subscriptions%20viewing_activity_read>Click me for access</a>

I ran into an issue initially but it was all because of a typo… Took me a while to figure that out…

Cheers
Markus

I was able to get redirected back to my callback page with the access token, I put the access token and client id into the component parameters, but pulsing ‘Get Channel Info’ doesn’t seem to do anything. Any tips on what to look at to diagnose?

Man… I’m beyond confused here. I got my client ID and my authorization number, I have a website with hosting but have no clue what to do with that info…
For the client setup it said i could use http://localhost for testing, but that didn’t get me a link to my twitch account. Would love any help you could provide on how to get this to work. I was hoping it would be as simple as entering in your stream id and authorization key, like you do in OBS.

Thanks :slight_smile:

Hi @arvold,

i’ll see if i can go over this in more detail tomorrow and fix it up to work with the Web Client DAT.

Cheers
Markus

@snaut … Any update on this? Im just bumping it… I cant seem to wrap my head around it either, not at all privy to web languages. A twitch extension data pass through for touchdesigner would be an absolute game-changer right now. and would open up alot of doors for TD devs, i.e. building custom twitch tools etc, ones that could work on chat data and potentially even the screen click data for an overlay extension. Talk about a tutorial that would blow up.
.
.
.
Currently the closest I am able to get is attempting use of the twitchio python module, and customizing the “heat” extension for click data

1 Like

Would also love an update and/or tutorial for this!

yup - working on it… it’s a bit more then initially expected.

2 Likes

Just wanted to point to @elburz’s article on howto get the Twitch Chat into TouchDesigner:

I think this resolves this?

Cheers
Markus

I may be wrong because some of this is definitely over my head, but I believe he’s just connecting to the chat using IRC, and not using the PubSub API that was in the original post. I don’t believe you can get channel follow, subscription, etc events from Twitch through the IRC method. So, I guess my question now is, can Elburz’s methods in the tutorials be applied to the original PubSub API, or is that process going to be much different?

1 Like

Here’s a Twitch to OSC and DMX output app I wrote using the building blocks Elburz provided…
This is a tutorial: Twitch To OSC Tutorial - YouTube
And this is the download link for the .toe: Twitch To OSC

1 Like

Hey,

here is a little update on the Twitch Component. I removed the webCOMP and replaced it with the webClient DAT which prooved to be enough to get the whole thing working again.
I then went a bit further and implemented the authorization workflow as a combination of webBrowser COMP and webServer DAT. When registering your application, use http://localhost:9980 as the Redirect URL. Make note of the Client ID and Client Secret as you will need to fill out these 2 fields on the Twitch component.

I also switched some parts over to the new Twitch API, I’ll continue a bit more and add Extension functions to make custom calls on the v5 API as well as new API - but for now if anybody is interested in testing this, please do…

Cheers
Markus

New version:
The new version can now be found on github GitHub - wuestenarchitekten/Twitcher: a component to communicate with twitch with instructions here: https://derivative.ca/community-post/asset/twitcher-twitchwatching-everyone

Hi Markus’
Thank you once again for this. I’m more than happy to test this thing in full. But right off the bat the chat element does not seem to authenticate properly. Perhaps the extension needs different credentials for the IRC element. Trying to get the Pubsub alerts tested now.

Hey @Timesquid,

sorry for the delayed response - i was up north for a bit.
Turns out the issue came from the initial scope string creation which must have taken spaces initially but now only accepts + as the divider between permission strings.

It’s been updated on github!
Best
Markus

Hey @snaut – thanks for this object. It’s been an enormous help hitting the ground running with Twitch interactions.

I’m currently having an issue where the PubSub connection appears to be working but I’m not receiving events, and I can’t tell which of the many strategies I’ve been employing to reconnect works consistently, if any at all. I’ve tried:
• Resetting the Active par on the pubsub Websocket DAT
• Getting my twitch auth Token again
• Getting my Channel Info again
• Toggling off and then on again the par (and thus sending a Listen request to PubSub) for a given Topic (eg Bits, Whispers, etc)

… that last one seems to help in most cases but not always, and this connection is failing silently - the websocket appears to be open and I’m not receiving any errors through it when the events stop, I just notice things are happening on the Twitch side that I’m not finding out about.

It seems pretty inelegant to periodically toggle the permissions, but that’s likely to be the next thing I try.

Any ideas before this show I got on thursday? :sweat_smile: I’m out of guesses!

TIA

Seeing a few changes in the API recently Changelog | Twitch Developers

Did you recognize some specific events not going through @hardworkparty ? What are the things happening on the Twitch chat that you are not receiving ?

Maybe @snaut will have an idea on what could be affected - if affected by some API changes.

1 Like

Hey hey Michel!

Events that aren’t coming through include Bits, Subs, and Channel points, and I feel as though it might be one Topic at a time, as the other day I was able to receive Channel Points and Bits but not Subs, although each has failed to come through at one time or another.

1 Like

Hey @hardworkparty,

having a look now.

Cheers
Markus

1 Like