Aframe: Make dialog to call DeviceMotionEvent.requestPermission in iOS 13+
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
All 23 comments
Related conversation: https://github.com/aframevr/aframe/issues/4277 and #3976
dmarcos
on 10 Oct 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!
davimello28
on 25 Oct 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
dmarcos
on 25 Oct 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.
davimello28
on 25 Oct 2019
Yes, the polyfill is responsible of head tracking using the sensors... probably you're overlooking something regarding 0.9.2
dmarcos
on 25 Oct 2019
@dmarcos, I created a fix that works with the URL below. Not sure where this should be included within the aframe repo.
KevinEverywhere
on 25 Oct 2019
@KevinEverywhere Thanks, the URL you shared points to the aframe examples.
dmarcos
on 25 Oct 2019
Yes, that is the URL I used to base it on. I have it functioning at the URL
below but wanted to ensure that I pared down the code to its essence. If
you go to the URL below, "Click Me Please" triggers the permissions
request; "TESTER" links to the aframe example. The two functions needed are
askDeviceMotion and grantedDeviceMotion. For those not requiring
permission, they go straight to the grantedDeviceMotion. The actual
function, if any, desired to be triggered by the granted permission is
passed as an argument to askDeviceMotion.
https://planetkevin.com/demo/kr_index.html
On Fri, Oct 25, 2019 at 12:03 PM Diego Marcos notifications@github.com
wrote:
@KevinEverywhere https://github.com/KevinEverywhere Thanks, the URL you
shared points to the aframe examples.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aframevr/aframe/issues/4287?email_source=notifications&email_token=AAE5AJKAXEE4TDOWTJ6CFYTQQM7G7A5CNFSM4I7PK4X2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECJISJI#issuecomment-546474277,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAE5AJMQNMU5352X3LFIWI3QQM7G7ANCNFSM4I7PK4XQ
.
KevinEverywhere
on 25 Oct 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.
dmarcos
on 25 Oct 2019
OK, I'm starting on it now. Thanks~
KevinEverywhere
on 25 Oct 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!
andonivianez
on 28 Oct 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.
Here is the code (still polishing): https://codepen.io/davimello28/pen/MWWOKar
For the lazy productive developers
Here is a full working exemple:
```js
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)
})
}
davimello28
on 31 Oct 2019
It looks pretty! Thanks.
dmarcos
on 31 Oct 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?
davimello28
on 31 Oct 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
dmarcos
on 31 Oct 2019
I have been working on this since the end of last week and have gotten most
of it working. I'm bringing it into A-Frame itself, as a sibling to
vr-mode-ui in the showcase directory. Should have something to review soon.
On Thu, Oct 31, 2019 at 8:44 AM Diego Marcos notifications@github.com
wrote:
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
https://github.com/aframevr/aframe/blob/master/src/components/scene/vr-mode-ui.js
as a staring point. Feel free to ask any other questions—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aframevr/aframe/issues/4287?email_source=notifications&email_token=AAE5AJK5SYQ7IFLGKA5ZJFDQRL4NHA5CNFSM4I7PK4X2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECYH6JA#issuecomment-548437796,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAE5AJM5RM3Y5E764PEC4MDQRL4NHANCNFSM4I7PK4XQ
.
KevinEverywhere
on 31 Oct 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
KevinEverywhere
on 4 Nov 2019
@KevinEverywhere Awesome progress. Feel free to open a PR. It's easier to view the changes and comment on them.
dmarcos
on 4 Nov 2019
Wasup. Any updates on this?
magisters-org
on 13 Nov 2019
dmarcos
on 13 Nov 2019
dmarcos
on 19 Nov 2019
If you have multiple pages, each with their own aframe components, do you need to add this prompt for each page? Is there a way to do this so that you only need to ask for permission once and scope it to the site rather than the aframe component?
rubensun
on 25 May 2020
Only one dialog per domain / session. Notice you can browse across examples in the aframe site:
dmarcos
on 26 May 2020
Related issues
FireDragonGameStudio
·
5Comments
jonikorpi
·
4Comments
minchnew
·
3Comments
ghost
·
3Comments
FranciscoPinho
·
3Comments
Most helpful comment
So, here is what I think:
The
DeviceMotionpermission is something that the developer using the platform should deal with. It means thataframeitself 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
aframeloads 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.
Here is the code (still polishing): https://codepen.io/davimello28/pen/MWWOKar
For the
lazyproductive developersHere is a full working exemple:
```js
window.onload = function () {
// Check if is IOS 13 when page loads.
if ( window.DeviceMotionEvent && typeof window.DeviceMotionEvent.requestPermission === 'function' ){
}
}
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)
})
}