Fetching thumbnail for a stream or video, via browser, with helix API?

API
1

I am trying to understand how to get the thumbnail of a channel or video, using the helix API, from the browser, but I am still a little stuck. All the examples I am finding refer to Kraken (example) or require an oauth key, which would require server code. Additionally looking at the API reference it is not clear how to get data for a specific channel or set of channels.

Can anyone indicate how to get a thumbnail for a given channel or video? Ideally only requiring the clientId. If it really needs server side code, what would the recipe be there?

2

For browsers, you want to use implicit flow to get an Oauth Token.

3

So this means the user needs to be logged in before seeing the thumbnail? What would the URL I should be fetching once I have the oauth token to get the thumbnail for a specific video?

BTW I had been hoping for something as simple as Vimeo: http://vimeo.com/api/v2/video/xxxxx.json , where xxxxx is the video id.

4

They don’t need to be logged in to see the thumbnail itself, they need to be logged in to access the API. If you want to do it only in the browser, your only option for Helix is to use the user’s access token. If you want to setup a server, the server can request the thumbnail from the API, then send that to the browser for the viewer to see without logging in.

5

Ok fair enough, but what is the right URL to call once the token is available?

Would it be like this:

GET https://api.twitch.tv/helix/streams/metadata/my_chanel_name

6

Helix uses user IDs not usernames. You need to convert a name to ID to use Helix.

https://dev.twitch.tv/docs/api/reference#get-streams is the streams reference.

7

No thats Kraken V5, most helix supports one or the other

No thats incorrect, for meta data

As documented

https://api.twitch.tv/helix/streams/metadata/?user_id=channel_id

or

https://api.twitch.tv/helix/streams/metadata/?user_login=channel_name

Depending on which if either you have or prefer

Or for streams

https://api.twitch.tv/helix/streams?user_id=channel_id

or

https://api.twitch.tv/helix/streams?user_login=username

1 Like
8

Thanks for your help.

In case it is useful to anyone else: I ended up using the ‘twitch’ package for this, in nodejs, with sample code:

// clientId and accessToken from https://dev.twitch.tv/console/
const client = TwitchClient.withClientCredentials(clientId, accessToken);

// For streams
const stream = await client.helix.streams.getStreamByUserName('nexxzz');
console.log(JSON.stringify(stream, undefined, 2));

// For video
const video = await client.helix.videos.getVideoById('125328655');
console.log(JSON.stringify(video, undefined, 2));
1 Like
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.