Embed Twitch API mobile locked screen

API
1

Hi!

I’m building a react app that uses the twitch embed API. I create the player and use it on the website using the following code:

const newPlayer = new window.Twitch.Player("player", options);
newPlayer.setVolume(0.5);
newPlayer.pause();

Everything works super well when I am in the mobile browser and use the player. Unfortunately, when I lock my cellphone screen the player stops the sound (the video does not matter much to my streams). My android lock screen shows me the option to play the sound once again (similar to a spotify player notification), but when I tap it, the button turns in a pause button, but I can’t hear any sound.

There seems to be a problem when trying to run the embeded twitch player in the background, even though im using mobile chorme, where it should work just fine. I tried to calling the media sessions api to force the player to play again like this:

window.navigator.mediaSession.setActionHandler('play', () => {
   newPlayer.play();
});

window.navigator.mediaSession.setActionHandler('pause', () => {
   newPlayer.pause();
});

But this still does not work :frowning:

There is not much more to my application beside some html and css visual things, so I don’t think there are code related issues causing this.

Anybody with a similar problem?

EDIT:

A strange thing: when I leave my mobile browser open, pull the notifications window and tap the notification pause button, the player pauses as it should. But when I tap the play button of the notification, the player does not resume playing. Maybe I am missing a configuration option?

Also, tried like this:

const iframe = document.getElementsByTagName("iframe")[0].contentWindow;
iframe.navigator.mediaSession.setActionHandler('play', () => {
   newPlayer.play();
});

Still no success T_T

2

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