Twitch.Player javascript broken?

API
1

It seems that invoking any player events via javascript is broken.

These callse don’t seem to be doing anything:
twitchPlayer.play();
twitchPlayer.setVolume(1.0);
twitchPlayer.setMuted(false);

Am I missing something? check code below:

twitchPlayer = new Twitch.Player("twitchDiv", {
	channel: "sinjinhawkemusic",
	height:"360",
    	width:"480",
	controls: false,
	muted: false,
	autoplay: false,
});

onMouseDown() {
     twitchPlayer.play();
     twitchPlayer.setVolume(1.0);
     twitchPlayer.setMuted(false);
}
2

My code example

https://barrycarlyon.github.io/twitch_misc/player/html/

Is working fine here.

So if this is your full code, looks correct from what I can tell.

So check your console for errors

3

Thank you I sorted it out using your player example :slight_smile: must have been some issue with how I was invoking the player.

Also fyi, I was able to get the setMuted = false consistently working. You need to set the player options to “muted: true” and then call setMuted on a button click. chrome/safari autoplay policy seems to require a button click from the user. Theres no info on this anywhere ^

—-

completely unrelated question:

is there any plans of relaxing the strictness of the “parent” policy to include non-standard port numbers? its made development of a node app im working on quite difficult.

Youtube api allows for this, and vimeo aswell. I noticed some other developers struggling with it. it also makes it impossible to test node apps on mobile locally.

4

Thats assumed knoweldge as it’s an issue with autoplaying video in browsers regardless of the source of that video.

You could create a uservoice but I doubt it would happen.

But then I test all my work behind a proper domain name with SSL on it for the optimal environment testing so my local dev is as close to real as possible. So I never run into this issue myself (even before the parent parameter was introduced)

5

thanks for such prompt replys, appreciate it :slight_smile:

Yes I meant that the “setMuted = false” command only works if the player is initialized as muted. Not about chromes autoplay policy. If you initialze normally, the player trys to play with audio, gets muted and cannot be unmuted with js. I thought it might be helpful to others to add to twitch API documentation.

Hmm interesting, so you deploy to a server every time you test a change?

The strictness of the parent policy also means you can’t embed node apps on your website as iframes - for instance i have a subdomain club.fractalfantasy.net for my node app and a main domain fractalfantasy.net where I host all projects/apps as iframes. We have a big release tomorrow and I had to kill our main site and redirect to the subdomain because twitch won’t load in the iframe (even if the subdomain and domain are specified). This may seem like a niche use case, but ive seen other developers struggling with the parent policy and other APIs like youtube dont have this limitation.

I understand the reasoning for the parent policy but was just thinking perhaps it doesnt need to be this strict?

6

No I use a reverse SSH tunnel.
So a subdomain on my server is properly SSL’ed and NGINX proxy passes to a port and then I just ssh -R to the server.

Which is basically how NGROK functions, it just comes with none of the limitations of NGROK

I described both methods in Twitch Extensions Part 5 – Dev Environment – Barry Carlyon

Jump to Just one more thing

Sure you can, just put each iframe domain inte the stack into the parent list.

This is how it’s done on Google Sites and Wix - you can find the megathread of people I’ve helped on Wix/Google sites here The great big "I'm using WIX/SomeWebsiteMaking Tool and I don't know how to fix my embed" thread

So your parent would be

  • the outer site fractalfantasy.net
  • and club.fractalfantasy.net

You can declare more than one parent

so

    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat",
        parent: ["fractalfantasy.net", "club.fractalfantasy.net"]
      });
    </script>

Reference notes for Google Pages: https://github.com/BarryCarlyon/twitch_misc/tree/main/player/googlesites

Google Sites requires 3 parents, wix only requires 2.

The behaviour and requirement is also noted in the code example. (Sure it’s not 100% clear it means iframe stacks but that would be the embedded on other websites statement)

        // Only needed if this page is going to be embedded on other websites
        parent: ["embed.example.com", "othersite.example.com"]
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.