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();
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
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.
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
