New Developer - Unsure how to Integrate API

API
1

I’ve been attempting to integrate the Twitch API into my websites for days with no success. The documentation is nowhere near new-user-friendly. I’ve lived on these forums and Google/Reddit for literal days attempting to learn everything I can about how to integrate this API. Most of the content I find is under the old API which will be phased out later this year. As such, I’d like to develop on the new API (helix?).

My Goal: When a Twitch Channel is live, embed Twitch on the webpage. Otherwise, Twitch should never be present on the webpage.

I am by no means asking for code - I’m asking how someone as new to this as me is supposed to start learning how to integrate this API with documentation that provides zero framework for actual integration… only explaining how the API works (based on my findings, hopefully I’m missing something!).

2

Make a request to the Get Streams endpoint https://dev.twitch.tv/docs/api/reference#get-streams

If a stream object is returned then the channel is live, in which case your can embed the stream https://dev.twitch.tv/docs/embed

If an empty data array is returned it means the stream is offline, in which case your site can just not embed anything.

3

How does one “make a request to the Get Streams endpoint”?

This is what I’m trying to resolve here - I haven’t found any useful information to answer that question throughout days of research. I know the question in it’s nature is very “noobish”, and I’m assuming an experienced developer knows exactly what you’re saying, but as someone who’s moving from simple web development to API Integration I have no idea what the answer to the above question is. Any feedback would be greatly appreciated!

4

API requests are literally just HTTP requests. You can can use any HTTP request library you like, such as fetch, or axios, or whatever. You just need to make the request to the endpoint you wish, with the required parameters and any optional ones as specified in the docs, and the required headers, and you’ll get back a response with JSON data.

The docs show an example:

curl -H 'Client-ID: uo6dggojyb8d6soh92zknwmi5ej1q2' \
-X GET 'https://api.twitch.tv/helix/streams?first=20'

This is the simplest way of showing a HTTP request that’s platform/language independent. It’s “Send a HTTP GET request, to the URL https://api.twitch.tv/helix/streams, with the first=20 querystring parameter, and the Client-ID: uo6dggojyb8d6soh92zknwmi5ej1q2 header.”

If you don’t yet have a Client ID, the Getting Started guide in the docs explains where to get one Twitch API | Twitch Developers

5

I knew I was missing something very basic here! I’ll review the HTTP request libraries and report back with findings/questions or concerns.

6

So I’ve decided to work with fetch. I’ve written some code and I’ve run into the same issue I explained earlier - most examples I’ve found are with the old API. Quite literally every single example I’ve found under the new API no longer works…

Here’s what I’ve got so far (converted to pseudocode obviously), please let me know if this is the correct place to post this code or if I need to open a new thread elsewhere: https://pastebin.com/S8grYWJa

7

whats not working whats the error returned?

In the past I have avoided async and used

    fetch(
        'https://api.twitch.tv/helix/users?id=' + twitch_id,
        {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Client-ID': client_id
            }
        }
    ).then(response => response.json()
    ).then(response => {
    }).catch(err => {
        // hmm
        console.log(err);
    });

In an extension

8

I’m getting a bunch of syntax errors for things such as “variable twitch_id/variable myclientidnumber is not defined”. Feels like I’m missing something that should be obvious here.

9

my sample code, requires you to substitute or create a variable called client_id and twitch_id

Client_id needs to contain you client ID and twitch_id the TwitchID of the user to lookup on Helix.

10

Thank you @Dist and @BarryCarlyon! The last part I need to solve is where to actually insert the embedded Twitch player per the example provided by @BarryCarlyon. Is there a recommended syntax?

11

Follow the documentation here it provides how to embed.

12

Thank you!

13

I was able to resolve this with the following code:

<div id="twitch-embed"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script>
var channel_name = "";
var client_id = ""
fetch(
    'https://api.twitch.tv/helix/streams?user_login=' + channel_name,
    {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Client-ID': client_id
        }
    }
).then(response => response.json()
).then(response => {
  if (response.data[0] != undefined){
      new Twitch.Embed("twitch-embed", {
      width: 1280,
      height: 500,
      channel: channel_name,
      theme: "dark"
    });
  };
}).catch(err => {
    console.log(err);
});
</script>
14

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