With the new oAuth requirement and embedded player changes, I’ve modified my code to accommodate. However, I believe I’m stuck again! I’m not sure why the following code is not working:
<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>
/* User-defined variables */
var channel_name = "";
var client_id = "";
var client_secret = "";
/* Token variable used to store the access_token */
var token;
/* Retrieve the access_token using oAuth2 (Bearer Helix, NOT Twitch API v5) */
fetch(
'https://id.twitch.tv/oauth2/token',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'client_id': 'client_id',
'client_secret': 'client_secret',
'grant_type': 'client_credentials'
}
}
/* Store the access token */
).then(response => response.json()
).then(response => {
token = response.data[access_token];
});
/* Get Streams Endpoint (Is the livestream live?) */
fetch(
'https://api.twitch.tv/helix/streams?user_login=' + channel_name,
{
method: 'GET',
headers: {
'Accept': 'application/json',
'Client-ID': 'client_id',
'Authorization': 'Bearer + token'
}
}
/* Embed livestream if live, otherwise show nothing */
).then(response => response.json()
).then(response => {
if (response.data[0] != undefined){
var embed = new Twitch.Embed("twitch-embed", {
width: 1280,
height: 500,
channel: channel_name,
theme: "dark"
});
embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
var player = embed.getPlayer();
player.play();
});
};
}).catch(err => {
console.log(err);
});
</script>
You’d be correct! Corrected, code still isn’t working though… 'Authorization': 'Bearer {$token}'
I’ve opted not to grab the renew token per this documentation:
However, you should build your applications in such a way that they are resilient to token authentication failures. In other words, an application capable of refreshing tokens should not need to know how long a token will live. Rather, it should be prepared to deal with the token becoming invalid at any time.
your code fetches a token but doesn’t wait for that token before fetching the user.
Also this code seems to suggest every page load you’ll generate an access token instead of fetching and storing and reusing an active token.
Additionally this is all front end code, this violates the developer services agreement as you are leaking your client_secret and then the access_token generated with it.
Essentially you are leaking your password.
Only a users own token should be shown to the user. Never an app access token.
So whilst the fix is simple, you should not be doing this as it violates the agreement
Hey @Webman97, were you able to get this to work? If so, would you be willing to share your result? I have a stream embed that shows when the channel is live, but hides when offline (I believe our code is very similar) and it stopped working. I’m pretty out of my element here and not sure where to begin. Any help is appreciated!
You might want to start a separate thread and show the code you currently have and where you are stuck and we can go from there rather than hijacking this thread!
I figured since we have the same issue, it would be cleaner to just see if he could share his solution. I’d be happy to make a new thread though if that’s what is preferred!