How do I get DeviceOrientationEvent and DeviceMotionEvent to work on Safari?
I'm trying to implement DeviceOrientationEvent and DeviceMotionEvent on my website for a 3D effect. However, the console doesn't log any info and apparently iOS 13 requires a user set permission to start doing this. I can't seem to figure out how to set it up properly.
I've done some research and this is what I found: https://github.com/w3c/deviceorientation/issues/57#issuecomment-498417027
All other methods provided online are not usable anymore sadly.
window.addEventListener('deviceorientation', function(event) {
console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});
I get the following error message:
[Warning] No device motion or orientation events will be fired until permission has been requested and granted.
Answer
As of iOS 13 beta 2, you need to call DeviceOrientationEvent.requestPermission() to access to gyroscope or accelerometer. This will present a permission dialog prompting the user to allow motion and orientation access for this site.
Note that this will not work if you try to call it automatically when the page loads. The user needs to take some action (like tapping a button) to be able to display the dialog.
Also, the current implementation seems to require that the site have https enabled.
For more information, see this page