Login | Register 
FEATURES
APPLICATIONS
DOWNLOADS
EDUCATION
BLOG
WIKI
FORUM
STORE

Twitch API and PubSub access

Share your components here. First one to 100 wins!

Twitch API and PubSub access

Postby snaut » Mon Dec 03, 2018 5:27 pm

Hey,

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 https://dev.twitch.tv/dashboard. Here select "Apps" and click on "Register Your Application".
AppDashboard.png
AppDashboard.png (26.77 KiB) Viewed 805 times


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.
AppCreate.png
AppCreate.png (41.13 KiB) Viewed 805 times


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 https://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: https://dev.twitch.tv/docs/authentication/#scopes


Code: Select all
<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.
TwitchAccess.png
TwitchAccess.png (57.84 KiB) Viewed 803 times


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:

Code: Select all
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
TwitchParameters.PNG (10.28 KiB) Viewed 803 times


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:

Code: Select all
{
   '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: https://dev.twitch.tv/docs/pubsub/

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

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

Code: Select all
# 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.
Attachments
twitch.tox
TouchDesigner099 Build 2018.42310
Version:0.02
(13.59 KiB) Downloaded 43 times
User avatar
snaut
Staff
 
Posts: 858
Joined: Mon Nov 12, 2007 6:21 pm
Location: Toronto

Re: Twitch API and PubSub access

Postby snaut » Wed Dec 05, 2018 8:55 pm

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:
Code: Select all
# specify the path of the Twitch Component
twitchCOMP = op('twitch')
twitchCOMP.ChatRoomConnect(channel=<channelName>)


to send a message to another channel:
Code: Select all
# specify the path of the Twitch Component
twitchCOMP = op('twitch')
twitchCOMP.SendMsg(channel=<channelName>, msg=Sample Message)


to part from a channel:
Code: Select all
# 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:
Code: Select all
# 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.
User avatar
snaut
Staff
 
Posts: 858
Joined: Mon Nov 12, 2007 6:21 pm
Location: Toronto

Re: Twitch API and PubSub access

Postby WAMSAY » Mon Jan 28, 2019 11:33 am

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 https://id.twitch.tv

According to the Twitch wiki "The domain dedicated to Twitch authentication is https://id.twitch.tv. Code that uses the old, https://api.twitch.tv/kraken domain for Twitch authentication will continue to work until the end of 2018, when we remove Twitch API v5 functionality"
Captain.Code
http://www.captaincode.info
207-590-7877
User avatar
WAMSAY
 
Posts: 11
Joined: Sun May 27, 2012 3:05 pm
Location: Portland, Maine USA

Re: Twitch API and PubSub access

Postby snaut » Mon Jan 28, 2019 5:25 pm

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 https://www part...

The content of my index.html is:

Code: Select all
<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
User avatar
snaut
Staff
 
Posts: 858
Joined: Mon Nov 12, 2007 6:21 pm
Location: Toronto


Return to Shared .tox Components

Who is online

Users browsing this forum: No registered users and 2 guests