# Fetching thumbnail for a stream or video, via browser, with helix API? **URL:** \ **Category:** API\ **Created:** [May 18, 2020, 4:19pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719 "2020-05-18T16:19:45Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![ajmas](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/ajmas/32/8739_2.png) [@ajmas](https://discuss.dev.twitch.com/u/ajmas)\ **Post date:** [May 18, 2020, 4:19pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/1 "2020-05-18T16:19:45Z")
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](https://stackoverflow.com/questions/46722459/how-to-get-twitch-video-thumbnail-url)) 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? ---
**Author:** ![WLG3R](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/wlg3r/32/6985_2.png) [@WLG3R](https://discuss.dev.twitch.com/u/WLG3R)\ **Post date:** [May 18, 2020, 4:24pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/2 "2020-05-18T16:24:46Z")
For browsers, you want to use implicit flow to get an Oauth Token. > **[Getting OAuth Access Tokens](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth/)** > > Getting OAuth Access Tokens ---
**Author:** ![ajmas](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/ajmas/32/8739_2.png) [@ajmas](https://discuss.dev.twitch.com/u/ajmas)\ **Post date:** [May 18, 2020, 4:32pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/3 "2020-05-18T16:32:31Z")
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](http://vimeo.com/api/v2/video/xxxxx.json) , where xxxxx is the video id. ---
**Author:** ![WLG3R](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/wlg3r/32/6985_2.png) [@WLG3R](https://discuss.dev.twitch.com/u/WLG3R)\ **Post date:** [May 18, 2020, 4:36pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/4 "2020-05-18T16:36:41Z")
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. ---
**Author:** ![ajmas](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/ajmas/32/8739_2.png) [@ajmas](https://discuss.dev.twitch.com/u/ajmas)\ **Post date:** [May 18, 2020, 4:43pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/5 "2020-05-18T16:43:59Z")
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` ---
**Author:** ![WLG3R](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/wlg3r/32/6985_2.png) [@WLG3R](https://discuss.dev.twitch.com/u/WLG3R)\ **Post date:** [May 18, 2020, 5:34pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/6 "2020-05-18T17:34:40Z")
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](https://dev.twitch.tv/docs/api/reference#get-streams) is the streams reference. ---
**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\ **Post date:** [May 18, 2020, 5:36pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/7 "2020-05-18T17:36:54Z")
> [@WLG3R](#): > > Helix uses user IDs not usernames. You need to convert a name to ID to use Helix. No thats Kraken V5, most helix supports one or the other > [@ajmas](#): > > GET [https://api.twitch.tv/helix/streams/metadata/my\_chanel\_name](https://api.twitch.tv/helix/streams/metadata/my_chanel_name) No thats incorrect, for meta data > **[Reference](https://dev.twitch.tv/docs/api/reference/)** > > Twitch Developer tools and services to integrate Twitch into your development or create interactive experience on twitch.tv. As documented > [https://api.twitch.tv/helix/streams/metadata/?user\_id=channel\_id](https://api.twitch.tv/helix/streams/metadata/?user_id=channel_id) or > [https://api.twitch.tv/helix/streams/metadata/?user\_login=channel\_name](https://api.twitch.tv/helix/streams/metadata/?user_login=channel_name) Depending on which if either you have or prefer Or for streams > **[Reference](https://dev.twitch.tv/docs/api/reference/)** > > Twitch Developer tools and services to integrate Twitch into your development or create interactive experience on twitch.tv. > [https://api.twitch.tv/helix/streams?user\_id=channel\_id](https://api.twitch.tv/helix/streams?user_id=channel_id) or > [https://api.twitch.tv/helix/streams?user\_login=username](https://api.twitch.tv/helix/streams?user_login=username) ---
**Author:** ![ajmas](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/ajmas/32/8739_2.png) [@ajmas](https://discuss.dev.twitch.com/u/ajmas)\ **Post date:** [May 18, 2020, 7:04pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/8 "2020-05-18T19:04:56Z")
Thanks for your help. In case it is useful to anyone else: I ended up using the ‘[twitch](https://www.npmjs.com/package/twitch)’ package for this, in nodejs, with sample code: ```auto // 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)); ``` ---
**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\ **Post date:** [June 17, 2020, 7:04pm UTC](https://discuss.dev.twitch.com/t/fetching-thumbnail-for-a-stream-or-video-via-browser-with-helix-api/25719/9 "2020-06-17T19:04:58Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.