Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make dialog to call DeviceMotionEvent.requestPermission in iOS 13+ #4287

Closed
dmarcos opened this issue Oct 10, 2019 · 21 comments
Closed

Make dialog to call DeviceMotionEvent.requestPermission in iOS 13+ #4287

dmarcos opened this issue Oct 10, 2019 · 21 comments

Comments

@dmarcos
Copy link
Collaborator

@dmarcos dmarcos commented Oct 10, 2019

8th wall dialog is a good example to follow (open link on iOS 13)

https://apps.8thwall.com/8w/jini/

requestPermision has to be called in a handler triggered by a user gesture

  buttonEl.addEventlistener('click', function () {
    DeviceMotionEvent.requestPermission().then(response => {
      if (response == 'granted') {
        window.addEventListener('devicemotion', (e) => {
        // do something with e
      })
    }
  }).catch(console.error)
 });
@dmarcos dmarcos changed the title Make dialog to call DeviceMotionEvent.requestPermission in iOS 13 Make dialog to call DeviceMotionEvent.requestPermission in iOS 13+ Oct 10, 2019
@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Oct 10, 2019

Related conversation: #4277 and #3976

@davimello28

This comment has been minimized.

Copy link

@davimello28 davimello28 commented Oct 25, 2019

Just to make it clear:

We need to load aframe after enabling the motion sensors, right?

I've tested just asking for permission before launching the script, but it didn't work. I'll make more tests today. If I make it, I will submit the code.

Have a nice day!

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Oct 25, 2019

In iOS 13 or newer requestPermission has to happen the probably before the Polyfill loads here https://github.com/aframevr/aframe/blob/master/src/index.js#L22

@davimello28

This comment has been minimized.

Copy link

@davimello28 davimello28 commented Oct 25, 2019

Are polyfills needed in that case? Safari seems to respond to the 0.9.2 version without the polyfills, but better testing is required.

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Oct 25, 2019

Yes, the polyfill is responsible of head tracking using the sensors... probably you're overlooking something regarding 0.9.2

@KevinEverywhere

This comment has been minimized.

Copy link
Contributor

@KevinEverywhere KevinEverywhere commented Oct 25, 2019

@dmarcos, I created a fix that works with the URL below. Not sure where this should be included within the aframe repo.

https://aframe.io/aframe/examples/showcase/spheres-and-fog/

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Oct 25, 2019

@KevinEverywhere Thanks, the URL you shared points to the aframe examples.

@KevinEverywhere

This comment has been minimized.

Copy link
Contributor

@KevinEverywhere KevinEverywhere commented Oct 25, 2019

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Oct 25, 2019

@KevinEverywhere Good job! To integrate in A-Frame we would have to create a new devicemotion-permission-ui.js scene component. A good starting point would be looking at vr-mode-ui that creates and displays the rotation modal when entering VR on a phone. If you want to take a stab at it it will be super appreciated. Let me know if you have any other questions.

@KevinEverywhere

This comment has been minimized.

Copy link
Contributor

@KevinEverywhere KevinEverywhere commented Oct 25, 2019

OK, I'm starting on it now. Thanks~

@andonivianez

This comment has been minimized.

Copy link

@andonivianez andonivianez commented Oct 27, 2019

Hi!
You can use this example I found surfing Google ;)
https://elegant-dryosaurus.glitch.me/
It requests permissions and it simply works; take a look where is the code placed (inside body tag).
Good luck!

@davimello28

This comment has been minimized.

Copy link

@davimello28 davimello28 commented Oct 31, 2019

So, here is what I think:

The DeviceMotion permission is something that the developer using the platform should deal with. It means that aframe itself should not be responsible to make this request.

Although, I think that we should do add the banner as an option to be inserted when aframe loads and use it in the exemples provided. This will help developers to get things done.

I've done this, based on the home website. I'm also making the IOS 12 version, with the step-by-step on how enable it.

possible-banner

Here is the code (still polishing): https://codepen.io/davimello28/pen/MWWOKar

For the lazy productive developers

Here is a full working exemple:

window.onload = function () {

  // Check if is IOS 13 when page loads.
  if ( window.DeviceMotionEvent && typeof window.DeviceMotionEvent.requestPermission === 'function' ){

      // Everything here is just a lazy banner. You can do the banner your way.
      const banner = document.createElement('div')
      banner.innerHTML = `<div style="z-index: 1; position: absolute; width: 100%; background-color:#000; color: #fff"><p style="padding: 10px">Click here to enable DeviceMotion</p></div>`
      banner.onclick = ClickRequestDeviceMotionEvent // You NEED to bind the function into a onClick event. An artificial 'onClick' will NOT work.
      document.querySelector('body').appendChild(banner)
  }
}


function ClickRequestDeviceMotionEvent () {
  window.DeviceMotionEvent.requestPermission()
    .then(response => {
      if (response === 'granted') {
        window.addEventListener('devicemotion',
          () => { console.log('DeviceMotion permissions granted.') },
          (e) => { throw e }
      )} else {
        console.log('DeviceMotion permissions not granted.')
      }
    })
    .catch(e => {
      console.error(e)
    })
}
@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Oct 31, 2019

It looks pretty! Thanks.

@davimello28

This comment has been minimized.

Copy link

@davimello28 davimello28 commented Oct 31, 2019

I've been searching for a way to insert these dialogs into a-frame, but it seems to me that we do not have a way to do this properly since the permissions belong to another scope.

This is what I am working on.

<script src="../../path/to/devicemotion-permission-ui.min.js"></script>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>

Is that correct?

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Oct 31, 2019

You have to modify A-Frame itself. I would create a new component device-motion-permission-ui that contains your logic. Look at vr-mode-ui as a staring point. Feel free to ask any other questions

@KevinEverywhere

This comment has been minimized.

Copy link
Contributor

@KevinEverywhere KevinEverywhere commented Oct 31, 2019

@KevinEverywhere

This comment has been minimized.

Copy link
Contributor

@KevinEverywhere KevinEverywhere commented Nov 4, 2019

Almost there with device motion; and I think that it will need to have device orientation available as well. It works on iOS 13, but I have not yet gotten this working on iPad 13. The additions made were to aframe.css and a new file, sibling to vr-mode-ui, device-motion-permissions-ui. The code can be seen in my fork, and a functioning example at the URL below.

Functioning on iOS 13 on Firefox, Chrome and Safari;
Functioning on iPad 13 on Chrome only

https://github.com/KevinEverywhere/aframe/

https://planetkevin.com/aframe/examples/showcase/device-motion-permission/a.html

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Nov 4, 2019

@KevinEverywhere Awesome progress. Feel free to open a PR. It's easier to view the changes and comment on them.

@magisters-org

This comment has been minimized.

Copy link

@magisters-org magisters-org commented Nov 13, 2019

Wasup. Any updates on this?

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Nov 13, 2019

WIP in #4303

@dmarcos

This comment has been minimized.

Copy link
Collaborator Author

@dmarcos dmarcos commented Nov 19, 2019

Fixed by #4303

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.