Twitch.player not firing events (again)

[StPhilipandJohn]

I am using the JS embedded file used as the interactive player. It has worked for over a year fine but now it is not recognising any EVENTS that are fired, specifically the ONLINE and OFFLINE events. Nothing has changed in the code and neither of these EVENTS are firing. Looks like something has changed in the backend, there is no change to the documentation. There are also no errors on the Browser Console.

Here is the code I use. It was working but now no longer reacts to the EVENTS (ONLINE + OFFLINE).
Please help, when the stream goes offline the embedded video just hangs now with a rotating wait timer, when the Stream Starts the EVENT ONLINE is not fired and the player doesn’t start - it requires a reload of the browser now, which is far from ideal.

THX

<script  type="text/javascript" src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="SamplePlayerDivID" style="padding:10px;font-size:20px;font-weight:700;"></div>
<div id="msgContainer" style="margin: 0 10px;color: #fff;background-color: #4e054e;padding: 10px;min-height:20px;">
<p style="margin:0;padding:0;text-align:center" id="msg">OFFLINE MESSAGE CONTAINER</p>
</div>
<script type="text/javascript">
	  var options = {
		width: 797,
		height: 480,
		channel: "myChannel"
	  };
	  var streamStatus = false;
	  var player = new Twitch.Player("SamplePlayerDivID", options);
	  player.setVolume(1.0);
	  player.setMuted(false);
	  player.addEventListener(Twitch.Player.ONLINE, function() { 
			$('#msg').fadeOut(3000,function() { 
			$('#msgContainer').css('backgroundColor','#427724');
			$('#msg').html('ONLINE MESSAGE CONTAINER').fadeIn(3000); }); 
			streamStatus = true; 
	});
	player.addEventListener(Twitch.Player.OFFLINE, function() {
		if (streamStatus == true) {
			$('#msg').fadeOut(3000,function() { 
                            $('#msgContainer').css('backgroundColor','#4e054e');$('#msg').html('OFFLINE MESSAGE CONTAINER').fadeIn(3000); });
			}
	  });
</script>

[BarryCarlyon]

I tested the events on my player test with a test channel.

And was unable to replicate a fault with online/offline event capture

Code: Twitch Embed example

[StPhilipandJohn]

Thanks Barry for taking the time to respond,

Firstly I note you are using a different path to the JS file. If I use the same path then this version seems to work in getting the ONLINE event. (they are both v1.js). Working is:

<script src= "https://embed.twitch.tv/embed/v1.js"></script>

I have used you code in its entirety, just replacing your test stream with my stream. This is the output of your LOG DIV using my stream:

1638206156735: Captured pause
1638206154793: Captured playing
1638206154792: Captured play
1638206122172: Captured pause
1638206094182: Captured playing
1638206094182: Captured play
1638206093196: Captured online
1638206070986: Captured offline
1638206070985: Captured ready

Starting from the bottom (oldest event) you can see it all looks good, OFFLINE, (start streaming) ONLINE etc, etc. but when I STOP the stream it just HANGS at the PAUSE EVENT and DOES NOT trigger an OFFLINE EVENT.

So looks like I can now get the stream to start in my embedded page but it just hangs now at the end because there is no OFFLINE event triggered.

So there still is an issue, any ideas, I’m sure if you try it you will see the same.

Best Nathan

[BarryCarlyon]

Yeah I’m using “Everywhere”

Everything

Instead of “straight” interactive iFrames. Video & Clips | Twitch Developers

Not sure what the problem is as in testing on the github repo it works as expected, when using Everywhere

Have you tested your channel in my github example?
As the github example includes a “channel change”

When you terminate the stream is it a normal stop or something else. If you don’t disconnect “normally” Twitch might be running the “disconnect protection” and you didn’t wait “long enough” for the stream to actually end on Twitch’s side?

Since that would explain why the player stops are pausing ring of death rahther than shutting down?

[StPhilipandJohn]

Thanks again Barry, I have done a lot more testing but still finding an issue, even with your test page (loaded on my server - I’ll explain why).

Firstly, I checked the two versions of the JS file and they are identical so that is a red herring.

You’re right about the OFFLINE message, this does work but takes a while as our stream is not ended gracefully (the camera will just be turned off). I can work with this and just reload the page when the OFFLINE event is triggered.

So the fault now appears to be replicated as follows (in both Chrome and Edge browsers).

1. Open a new TAB or Browser
2. Load the page BEFORE the stream is ONLINE
3. Start the Stream
4. No ONLINE message is triggered and nothing is displayed in the player
5. If you reload the page / browser, the ONLINE event is detected and the stream is shown
6. Subsequent OFFLINE messages are received.
7. If the stream is put ONLINE it now works and will continue to work.

Summary, the fault only appears when the browser is first opened and it does this with your code. A subsequent reload after the stream has started, kicks it into action. I can’t replicate this with your Github example and the page loads with your stream, changing the stream has the effect of reloading and jumping to step 5 above. I have taken your code (html page) and placed in on another server it is 100% the same except for the channel option.

I will continue to look for solutions, it may be a timing thing on how a page loads… perhaps you can confirm this with your stream (by loading the page first when the stream is OFFLINE and then starting the stream)
THX again
Nathan

[StPhilipandJohn]

Hi all, So there does appear to be an issue with the code as I described, as it happens with Barry’s code and mine (and it did use to work) can anyone help out there? The issue is that if the Stream is OFFLINE and the web page loaded, once the Stream comes ONLINE the ONLINE event is not fired. Easily replicated as it does it every time.

Or is there a support desk for Twitch Support Staff?

Thanks in advance