Блог

У меня проблемы с ориентацией экрана в Mozilla Firefox. Мне кажется, что screen.orientation не поддерживается в Firefox.

Мы создаем SPA с Angular 9 и используем webrtc внутри него, чтобы сделать несколько снимков из видеопотока, как в примере захвата изображений с камеры с помощью Angular.

Мы должны поддерживать устройства iOS и Android, и все работает так, как ожидалось. Но мы также должны поддерживать устройства Microsoft Surface Books и Microsoft Surface Pro с обычными браузерами Chrome, Edge (с Chrome engine) и Firefox, и вот, последний браузер — наша проблема.

Когда мы переворачиваем устройство MS Surface из альбомной ориентации в портретную, нам приходится поворачивать видеопоток самостоятельно. Я добавил прослушиватель изменений screen.orientation и использовал screen.orientation.angle для вычисления угла поворота, который я использовал для поворота собственного видеоэлемента с помощью transform: rotate([...calculatedAngle...] deg) .

Все работает нормально для Chrome и Edge (с Chrome engine), но не для Firefox. Я выяснил, что в Firefox прослушиватель изменений для screen.orientation не запускается.

Итак, я попытался найти решение для 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."
  

Ни один из прослушивателей событий, описанных выше, не запускается при повороте устройства.

Я нашел другое решение, которое помогло мне таким образом, что я мог выбирать между альбомной и портретной ориентацией, но это работает только для основной альбомной ориентации и основной портретной ориентации. Для альбомно-вторичного и портретно-вторичного видео перевернуто, и я не нашел никакого решения, чтобы выяснить, нахожусь ли я в основном или дополнительном режиме.

 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)
  }
});
  

У кого-нибудь была такая же или похожая проблема, и он нашел решение для этого, или у кого-нибудь есть идеи, как это решить.

Большое спасибо за помощь

ОБНОВЛЕНИЕ: я попробовал следующий пример от разработчика 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 :("); 
}
  

Я запускаю скрипт в каждой ориентации, и я всегда получаю «Это выглядит хорошо». в результате.