Gyro example not working on iOS 13.x due to newly introduced permission control

[6r33z3]

iOS 13 has introduced an extra permission control on fetching gyro data and the current DeviceOrientationControlMethod no longer works.

Is there any simple fix?

[campmdabt]

Instead of the window.addEventListener() line (28) you should be able to request permission as laid out in https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140

DeviceOrientationEvent.requestPermission()
.then(response => {
  if (response == 'granted') {
    window.addEventListener('deviceorientation', (e) => {
      // do something with e
    })
  }
})
.catch(console.error)

I haven't implemented or tested it yet, but try there first.

Edit: also not sure how that affects devices not requiring permission.

[Aykelith]

I can say that I have implemented it with permissions and it works

[6r33z3]

Thanks all, indeed a simple fix. Tested and worked. Only thing worth mention is above API access only works via HTTPS, in case people like me got confused when testing on local nginx.

[MobeenAshraf]

@tjgq Wanted to ask if the device orientation demo needs to be fixed for this issue?

[tjgq]

Sure, can you send me a PR to fix the demo?

[MobeenAshraf]

Yes, Sure.

Any thoughts/recommendation on how we should collect User permission (Since permission initiation request has to be a user-initiated event)

[tjgq]

You can attach it to the click handler for the toggle button, since the demo starts out in the disabled state: https://github.com/google/marzipano/blob/master/demos/device-orientation/index.js#L56