Twitch status api online/offline

API
1

Hey guys, I would like to ask for help. Back in time I got a twitch api script for showing twitch status who is online & how many viewers are watching.
But since Twitch API changed, It doesn’t work now and I’m asking for help what should I change or add to the scripts?

There is .js file which contains:
$(document).ready(function() {

$("#chg").click(function() {
    var name = document.getElementById("input").value;
    name = name.toLowerCase();
    getChannelInfo(name);
    isOnline(name);
});

function getChannelInfo(username) {
    var url = 'https://api.twitch.tv/kraken/channels/' +
        username;
    $.ajaxSetup({
       headers : {
'Client-ID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' //bad
       }
    });        
    $.getJSON(url, function(object) {
        var iconUrl = object.logo;
        if(iconUrl !== null){$("#logo").attr("src", iconUrl);}
      else {$("#logo").attr("src","https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png")}
        $("#channel").html(object.display_name);
    })
    .fail(function() {
        $("#channel").html(username + " not found");
        $("#game").html("");
        $("#title").html("");
      $("#logo").attr("src","https://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_150x150.png")
      $("#status").html("")
      
    });
}

function isOnline(username) {
    var streamUrl = " https://api.twitch.tv/kraken/streams/"+username;
    $.getJSON(streamUrl, function(obj) {
      if(obj.stream !== null){
        if(obj.stream.game !== null) {
             var link = "https://twitch.tv/"+username;
            $("#game").html("" + obj.stream.game +"");
            $("#status").html("LIVE");
            $("#title").html(obj.stream.channel.status)
        }
        
      }
       else {
         $("").html("OFFLINE");
         $("#game").html("");
         $("#title").html("");
       } 
    });
}

getChannelInfo(“dreamhackcs”);
isOnline(“dreamhackcs”);
});

and in the .html file there is script /script command

(function() {
  var user_name, api_key, twitch_widget;

  user_id = "dreamhackcs";
  api_key = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
  twitch_widget = $("#dreamhack_twitch-widget");
  limit = "1"

  twitch_widget.attr("href","https://twitch.tv/" + user_name);

  $.getJSON('https://api.twitch.tv/kraken/streams/' + user_name + '?client_id=' + api_key + '&callback=?', function(data) {	
      if (data.stream) {
          twitch_widget.html("<span class='online'></span> " + data.stream.viewers);
      } else {
          twitch_widget.html(" OFFLINE");
      }  
  });
})();

I would be very grateful if anyone could help.

2

Please refer to the migration guide

https://dev.twitch.tv/docs/v5/guides/migration

or jump straight to Helix

As per the migration guide and helix you need to declare the client_ID as a header

If you are using kraken you also need a v5 header and to use user_id’s instead of user_names.
If you are using helix you can use either user names or ID’s

3

Like this?

$(document).ready(function() {
url -H ‘Accept: application/vnd.twitchtv.v5+json’
-H ‘Client-ID: xxxxxxxxxxxxxxxxxxxxx’
-X GET https://api.twitch.tv/kraken/streams/

$("#chg").click(function() {
    var name = document.getElementById("input").value;
    name = name.toLowerCase();
    getChannelInfo(name);
    isOnline(name);
});

function getChannelInfo(username) {
    var url = 'https://api.twitch.tv/kraken/channels/' +username;
    $.ajaxSetup({
       headers : {
'Client-ID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' //bad
       }
    });

and in the script

user_id instead of user_name?

4

Because I’m kinda new to coding. Sorry if I don’t understand.

5

Heres a Fetch example

fetch(
    'https://api.twitch.tv/kraken/videos/SOMEID',
    {
        headers: {
            'client-id': 'SOMECLIENTID',
            'accept': 'application/vnd.twitchtv.v5+json'
        }
    }
)
.then(resp => { return resp.json() })
.then(resp => { console.log(resp) })
.catch(err => { console.log(err) });
6

Thank you very much, but where do I put it?

7

It replaces the code you already have but it is not a complete example. If shows how to use fetch instead of jQuery to make the call