How to handle screen rotation problems with Mozilla Firefox

Question

I have problems with the screen orientation in Mozilla Firefox. It seems to me that screen.orientation is not supported in Firefox.

We are building a SPA with Angular 9 and using webrtc inside of it, to take some pictures out of the video media stream like in the example Capturing Camera Images with Angular.

We have to support iOS and android devices and every thing is working as expected. But we also have to support Microsoft Surface Books and Microsoft Surface Pro devices with the common browsers Chrome, Edge (with Chrome engine) and Firefox and here we go, the last browser is our problem.

When we flip the MS Surface device from landscape to portrait, we have to rotate the video stream by our self. I added a change listener to screen.orientation and used the screen.orientation.angleto calculate the rotation angle which I used to rotate the native video element by using transform: rotate([...calculatedAngle...] deg).

Everything is working fine for Chrome and Edge(with the Chrome engine) but not for Firefox. I figured out, that in Firefox the change listener for screen.orientation is not triggered.

So I tried to find a solution for Firefox.

screen.orientation.addEventListener('change', () => {
   console.log('orientation.change event is fired - Browser is Firefox');
})

window.addEventListener('deviceorientation', (e) => {
   console.log('deviceorientation event is fired - Browser is Firefox')
})
// ==> In the console I found the warning "The orientation sensor should no longer be used."

window.addEventListener('devicemotion', () => {
  console.log('devicemotion event is fired - Browser is Firefox')
})
// ==> In the console I found the warning "The motion sensor should no longer be used."

None of the event listeners above are triggered when I rotated the device.

I found an other solution which helped me in this way, that I could decide between landscape and portrait but this only works for landscape-primary and portrait-primary. For landscape-secondary and portrait-secondary the video is upside down and I did not found any solution to figure out if I am in primary or secondary mode.

const test = window.matchMedia('(orientation: portrait)');
  test.addListener((m) => {
  if ( m.matches ) {
    // Changed to portrait
    console.log('portrait : ', screen.orientation?.type, screen)
  } else {
    // Changed to landscape
    console.log('landscape : ', screen.orientation?.type, screen)
  }
});

Did someone have the same or a similar problem and found a solution for this or do someone have any idea how to solve that.

Many thanks for help

UPDATE: I tried the following example from Developer Mozilla:

var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("Mmmh... you should rotate your device to landscape");
} else if (orientation === undefined) {
  console.log("The orientation API isn't supported in this browser :("); 
}

I run the script in each orientation an I always get "That looks good." as result.

How to handle screen rotation problems with Mozilla Firefox

0 Answers0