Twitch Viewer No Longer Works [JS]

I made this a long time ago and I was wanting to use it again for my WoW guild to list the streamers for the guild, but it no longer works at all when before it worked perfectly.

I’m not sure what to do here to fix this. I saw that the api was updated and that’s the reason it broke but is there an easy fix for this so that it works again? It took me weeks to make this little thing.

My code:

// App Controler
var app = angular.module('TwitchApi',[]);
app.controller('MainCtrl', function($scope, $http) {

// Streamer Arrays
$scope.allUsers = [];
$scope.onlineUsers = [];
$scope.offlineUsers = [];

  var streamers = [
    "djyumene","cyborgdox","drakwlya", "thedaedhrognir", "sarialinde"
  ];


  // Twitch App CB and API URL
  var cb = '?client_id=8wfqztc1xjv57czzf43y7bj05ikantv&callback=?';
	var url = 'https://api.twitch.tv/kraken/';
	streamers.forEach(function(stream) {
    var obj = {};
    
  // Is stream online? 
  // Yes? Do this!
       $.getJSON(url + 'streams/' + stream + cb).success(function(data) {   
      var streaming = (data.stream === null) ? false : true;
      if (streaming) {
        obj.status = 'green fa fa-check';
        var streamTitle = data.stream.channel.game;
        if (streamTitle.length > 36) {
          streamTitle = streamTitle.substring(0,33);
          streamTitle += '...';
        }
        obj.streamTitle = streamTitle;
		    obj.viewers = data.stream.viewers;
		    obj.streaming = 'background-color', '#ccffcc';
		    obj.tv = 'black fa fa-video-camera';        
      } else {
        obj.status = 'red fa fa-times';
        data.streamTitle = ''; 
      }

  // No? Do this!
      obj.username = stream;
      $.getJSON(url + 'users/' + stream + cb).success(function(data) {
        obj.name = data.display_name;
        obj.logo = data.logo;
        $scope.allUsers.push(obj);
        if (streaming) {
          $scope.onlineUsers.push(obj);
        } else {
          $scope.offlineUsers.push(obj);
        }
        $scope.profile = $scope.allUsers;
        $scope.$apply();

You are missing a v5 header

Requests
For client IDs created on or after May 31, 2019, the only available version of the Kraken API is v5.  For client IDs created prior to May 31, 2019, use the application/vnd.twitchtv.v5+json header on your requests to access v5 of the Kraken API.

You need to update your .getJSON calls to send the Accept and Client-ID headers

I saw that, but honestly, I’m not sure how to do that, it’s a bit over my head. Is there an easy fix? How do I add a v5 header? Client ID?

provides a suggestion for sending headers with .getJSON

Saw that but not sure how to add that to my snippet?

Still no luck in getting this to work. Please help! :sweat:

Ideally you also need to move off v5/kraken as kraken is depreacted

(If you are sticking with kraken you also need to convert the usernames to userID’s first)

For Helix this means you’ll need to use

and

To get the data you are after, and you can look up all the users in a single request.
But this also means you need an oAuth token as all of Helix requires a token.

A token cannot easily be used/obtained in the front end, which means you won’t be using getJSON unless you logged the user in to your program first.

I anticipate this tool you have is for displaying status on a website, which means the website should be doing the lookup on the backend via “server code”, which won’t be jQuery’s getJSON doing the call.

If that is the case then you’d probably also want to look at Webhooks instead

So that Twitch will tell you when a stream starts/stops and you can store that in your database, and your website displays from the database instead

I honestly don’t know where to start with all this. it’s been at least 2 years since I worked with code, and longer since I made this viewer. I still can’t figure this out.

I tried some minor changes, nothing. I looked at the links but it’s a bit over my head and don’t know what to do still, to be honest.

Still looking for help with this.

Still unable to get this working. Any help is appreciated! :slight_smile:

There are some implementation examples here:

Webhook Receivers: https://github.com/BarryCarlyon/twitch_misc/tree/master/webhooks/handlers

App Access Tokens: https://github.com/BarryCarlyon/twitch_misc/tree/master/authentication/app_access_tokens

Might be worth starting over than trying to modify, if you don’t know how it works enough to fix it and can’t trace it back, start over.

Build afresh.

Personally for this I’d move it to webhooks since you have a known list of streamers, then store the data in a database and recall it from that database, rather than each page load requiring API lookups