General API question

Hey guys, first of all: I am trying my best with coding but stuff won’t work.

I am working on a streaming website, kinda creating a small streaming community.
I got so far to embed the livestreams/streams to the website and now I am stuck with the VOD:

I kinda looked into the live code of the twitch site and I guess that there is no way around using the API to get the last X VOD. In my mind i would like to have the last 3 VOD in a row and some sort of description.
Simple example:

Description | VOD1 | VOD2 | VOD3

Now the million dollar question:
Can I grab the latest vod’s WITHOUT using the API and get a code into my html/css/js?

For example: I used following code to show the preview you get when you are looking for a streamer; it shows in intervalls (dont know exactly which ones) the video that is been streamed (does not work on offline streams) but it is a fun little gimmick:

div>
div data-a-target=“search-result-live-channel” class=“search-result-card tw-flex”>
a class=“tw-link tw-link–inherit” href=“https://www.twitch.tv/USERNAME”>
div class=“search-result-card__img-wrapper tw-overflow-hidden tw-relative”>
img class=“search-result-card__img tw-image” src=“https://static-cdn.jtvnw.net/previews-ttv/live_user_USERNAME-214x120.jpg”>
/div>
/a>
/div>
/div>

Is there a possibility to use such thing without the API for the latest 2,3 or 4 (X) VOD’S

How do you grab the latest vod’s without calling the API which is the only source for VOD’s? No idea.

To do what you describe your backend would call the Video’s API and cache the ID’s periodicially (via a Cron job using an app access token).

Then your front end will fetch those cached video ID’s

So basically there is no work around around the api?
Checking the Sourcecode of the VOD section of my stream it gives the video an ID, and I guess that that ID is being called from the database through the API, am I right with that?
(I am seriously a noob and I feel uncomfortable)

Without calling the API where do you get the video ID’s from?

Basically yeah, the API will lookup videos on Twitch’s database filtering by the search parameters you feed in (broadcasterID, video type etc) and return them

Generate one of these, an “App Access Token”

Then call

Something like

https://api.twitch.tv/helix/videos?user_id=123&first=3&sort=time&type=archive

That’ll grab the last three VOD’s for user_id/broadcaster 123

I understand a little bit more now, thank you a lot Barry <3
The OAuth token is no problem, I also understand the code snippet you provide.

What would now be the most elegant solution to implement it into JS and HTML?

Well your front end needs to get fetch the video ID’s from the backend and just invoke after loading those ID’s. Whether you do that via server side rendering or post load fetch request via an API style endpoint you provide is up to you

1 Like

Since I am very bad at coding I fired up google and found the following;

I followed the steps but could not make it work and I wonder what I did wrong

Well what error(s) did you get?
What isn’t working?

nothing shows up basically. I know the workaround with the OAuth token is not the most elegant but just literally nothing shows up on the website.

Edit:
I went to dev.twitch and created a new app, gave it a name etc and copied the Client ID and the Secret (I assume the Bearer Token) into the script

What you have linked to doesn’t cover token generation, and describes using tokens in the front end, (which generally speaking you shouldn’t use unless it’s the website users own token)

This is the documentation for server side token generation

Provides three different language examples on generating a server side token.

A Client Secret IS NOT A BEARER TOKEN

I understand and don’t understand. This is way to complicated for me and I thank you for your effort and time. <3

  1. Your Front end calls your backend
  2. Backend loads/generates an app access token
    3 .Backend uses the token to get the last 3 VODs
  3. Backend returns those videoID’s
  4. Front end draws

You just need to sovle step 2. But the only guide you found is for front end Javascript, when you need to be using backend programming