Hi, I work on streamrunners.fr with 2 other devs and we encountered an issue and we currently have no idea how to solve it anymore. We read multiple times the documentation, tried to modify the code in a lot of ways but the bug is still occurring.
This bug occurs straight after being connected to the website through Twitch Authentication, an iframe is generated using :
watch.nunj declares :
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
Then TwitchViewer.vue declares :
<div class="row">
<div id="twitch-embed" class="embed-responsive embed-responsive-16by9 col-sm-12 col-lg-8"></div>
<iframe
:src="chatUrl"
frameborder="0"
scrolling="no"
height="456"
class="col-sm-12 col-lg-4 p-0"
></iframe>
</div>
</template>
<script lang="ts">
const Twitch = window['Twitch'];
export default {
name: 'TwitchViewer',
props: {
channel: String,
},
data() {
return {
player: null,
chat: null,
};
},
computed: {
chatUrl() {
return `https://www.twitch.tv/embed/${this.channel}/chat?parent=${window.location.hostname}&darkpopout`;
},
},
watch: {
channel(val) {
this.player.setChannel(val);
},
},
mounted() {
var embed = new Twitch.Player('twitch-embed', {
channel: this.channel,
layout: 'video',
autoplay: true,
parent: ["127.0.0.1", "streamrunners.fr"]
});
embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
this.player = embed.getPlayer();
this.player.play();
});
embed.addEventListener(Twitch.Player.PLAYING, () => {
this.$emit('playing');
});
embed.addEventListener(Twitch.Player.PAUSE, () => {
this.$emit('paused');
});
},
};
</script>
<style scoped>
</style>
But when a user connects, when the page loads immediately after that, the iframe that contains the current livestream will load the menu of Twitch or the “Developer” error (telling that the devs needs to put correct infos for it to work, I don’t have the exact translation) and in the Dev Tools console it will indicate a 404 error originating from this request made by v1.js :
https://api.twitch.tv/api/channels/passport-callback/access_token?oauth_token=undefined&need_https=true&platform=_&player_type=site&player_backend=mediaplayer
EDIT : Forgot to mention this error originating from “twitch-passport” and “core-…” :
[ERROR] [auth] Login nonce mismatch. Error: Login nonce mismatch.
END EDIT
As you can all see, the oauth_token is undefined which is quite bizarre considering the player shouldn’t need it… ?
If anyone has a clue about what’s going on, I’d like to hear your thoughts and provided more code if needed.
We actually also checked if it was on our side (bad oauth token management or stuff like that) but after thinking about it for 2 days, there was nothing indicating there was a mistake or anything like that on our code (the code we made), and since you don’t need an oauth token for the player, it’s really suspicious.
