Lock screen orientation

[AntoniaChimp]

I was working on a game and I dont want the player to change the device orientation. If the player starts in portrait, lock portrait and vice versa.

I was looking into screen.orientation.lock and requesting fullscreen, but I always get "(index):994 TypeError:" or "Uncaught (in promise) DOMException".
I was testing this in a Chrome Browser.

Does anyone have any tips for me?

[themoonrat]

Just like playing sound requires a user interaction to occur, so does the full screen API. So do it on a click or a touchend and it should work.

Ps beware of using this on iPad. If you are in full screen and it thinks your typing on a virtual keyboard, iOS keeps displaying annoying warnings. Games usually require regularly touching the screen.... so these warnings keep coming up over and over. Thanks Apple!

[AntoniaChimp]

35 minutes ago, themoonrat said:

Just like playing sound requires a user interaction to occur, so does the full screen API. So do it on a click or a touchend and it should work.

Ps beware of using this on iPad. If you are in full screen and it thinks your typing on a virtual keyboard, iOS keeps displaying annoying warnings. Games usually require regularly touching the screen.... so these warnings keep coming up over and over. Thanks Apple!

I tried to lock it after first click on the stage, but I get the same exceptions as before ?

[AntoniaChimp]

app.stage.interactive = true;
app.stage.on('pointerdown', function(){   
    lock();
    app.stage.interactive = false;
    app.stage.onpointerdown = null;
});

async function fullScreenCheck() {
    if (document.fullscreenElement) return;
       return document.documentElement.requestFullscreen();
    }

function lock() {
    try {
       await fullScreenCheck();
    } catch (err) {
       console.error(err);
    }
    screen.orientation.lock(screen.orientation.type);
}

That is my code.
Thats the error: "Uncaught (in promise) DOMException"

I read that its maybe not working with chrome. But I tried it on my phone not in Chrome and I was able to rotate it.

[AntoniaChimp]

function openFullscreen() {
   if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
   } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen();
   } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen();
   } else if (document.documentElement.msRequestFullscreen) { 
      document.documentElement.msRequestFullscreen();
   }
}
function lock() {
   if (!document.fullscreenElement){
      openFullscreen();
   }
   screen.orientation.lock(screen.orientation.type); 
}

Tried it like that as well without async and awaits and I got a : Uncaught (in promise) TypeError: fullscreen error and a Uncaught (in promise) DOMException

[themoonrat]

So I actually use https://github.com/sindresorhus/screenfull.js/ which is a great little library that handles it all for me.

You also might not be able to use pointerdown within pixi as it's not always classed as a valid unlocking event that touchstart or touchend are. I use a touchend / click callback on the window to get my event to then call screenful