Aframe: Show message on iOS to request user to enable devicemotion manually

[dmarcos]

Since iOS 12.2 Safari devicemotion API comes disabled by default. The user has to enable manually on settings. We could detect iOS and if the API is disabled we can display a message above the enter VR button asking the user to enable.

[dmarcos]

It's not trivial to implement but not super hard either. We could use some help if someone is interested in contributing to A-Frame

[eyexpo-dan]

How would you detect iOS safari privacy & security settings? I am listening to devicemotion, and it'll not trigger for either desktop, iOS 12.2+, and mobile devices without gyroscope. Is there a granular method of detection for all these possible devices?

[dmarcos]

Can just one feature detect devicemotion? A bit ugly but maybe:

var deviceMotionEvt;
setTimeout(function () { 
  if (!deviceMotionEvt && AFRAME.utils.isIOS()) { showMessage(); };
}, 1000);

window.addEventListener('devicemotion', function(event) {
  deviceMotionEvt = event;
});

[eyexpo-dan]

Is aframe using VRDisplay in the background?

navigator.getVRDisplays().then((displays) => { // Do something with the available VR displays });

Would any of the following properties be useful for confirming if the permission is turned on or off in iOS?

• isIOS: true
• gyroscope { x: 0, y: 0, z: 0 }
• sensor: null
• errors: ... Can't find RelativeOrientationSensor

[dmarcos]

Whatever works. In my snippet above I assumed the only way to detect devicemotion is listening to events that would always fire at page load if the API is enabled. A synchronous way would be better if there’s any.

[EslamNemr]

using callback
https://aframe-ios-motion-orientation-access.glitch.me/
tested on i phone xs-max
can we use promise ?

[dmarcos]

not sure If I understood. devicemotion is not promise API

[EslamNemr]

I mean Async/Await to avoid timeout.

[micsun-al]

iPad Air (MD785LL/A) running iOS 11.4 (15F79) laying flat on a table does not send any devicemotion events until the device actually moves, so this setTimeout devicemotion check fails ... wonder what other things we can check for hrmmm (time for more googling).

[dmarcos]

Maybe is not that big of a deal. Is that common to browse on a tablet flat on a table? One could hide the message as soon as the event fires that would happen if the tablet is moved.

[dmarcos]

Example on how 8th wall deals with the issue: https://github.com/aframevr/aframe/issues/3976#issuecomment-493035158

[dmarcos]

I think a message is not necessary anymore. Disabling devicemotion and relying on user settings was an interim solution. iOS 13 beta has a DeviceOrientationEvent.requestPermission that we should use. It will prompt the user for permission.

[jamesdigid]

I think a message is not necessary anymore. Disabling devicemotion and relying on user settings was an interim solution. iOS 13 beta has a DeviceOrientationEvent.requestPermission that we should use. It will prompt the user for permission.

That seems ideal, it also appears that in Chrome on my iPhone X (iOS 12.3.1) with tracking turned off it is still completely functional in Chrome. Talk about security... If there are any other small issues you could recommend that could get me familiar with the code would be much appreciated. I'm still learning the syntactic sugar coming mostly from Python, and Java codebases.

**
Also, there is a discrepancy in my local dev test env, and what is being tested on when I submit a PR. When running locally I get:

CyberneicNode1A:aframe digid$ npm run test:node

> [email protected] test:node /Users/digid/Projects/aframe
> mocha --ui tdd tests/node



  node acceptance tests
A-Frame Version: 0.9.2 (Date 2019-06-07, Commit #9f8e41a)
three Version (https://github.com/supermedium/three.js): ^0.105.2
WebVR Polyfill Version: ^0.10.10
    ✓ can run in node (1060ms)
    environment
      ✓ isNodeEnvironment is true for node
      ✓ isBrowserEnvironment is false for node


  3 passing (1s)

However, upon submitting the same test fails. Is there a docker image I should be using to build out my dev environment? Or something I'm missing with onboarding? Thanks

[brianpeiris]

Closed by #4303?

[dmarcos]

Correct. Thank you 🙏