Merge pull request #7238 from RaananW/ios-requires-permissions

iOS permission management for device orientation events

dist/preview release/what's new.md

@@ -49,6 +49,7 @@
 - Added various (interpolation) functions to Path3D, also `alignTangentsWithPath`, `slice`, `getClosestPositionTo` ([Poolminer](https://github.com/Poolminer/))
 - Allow setting of `BABYLON.Basis.JSModuleURL` and `BABYLON.Basis.WasmModuleURL`, for hosting the Basis transcoder locally ([JasonAyre])(https://github.com/jasonyre))
 - PNG support for browsers not supporting SVG ([RaananW](https://github.com/RaananW/))
+- Device orientation event permissions for iOS 13+ ([RaananW](https://github.com/RaananW/))
 
 ### Engine
 

src/Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput.ts

@@ -2,6 +2,7 @@ import { Nullable } from "../../types";
 import { ArcRotateCamera } from "../../Cameras/arcRotateCamera";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { ArcRotateCameraInputsManager } from "../../Cameras/arcRotateCameraInputsManager";
+import { Tools } from '../../Misc/tools';
 
 // Module augmentation to abstract orientation inputs from camera.
 declare module "../../Cameras/arcRotateCameraInputsManager" {
@@ -67,7 +68,22 @@ export class ArcRotateCameraVRDeviceOrientationInput implements ICameraInput<Arc
         let hostWindow = this.camera.getScene().getEngine().getHostWindow();
 
         if (hostWindow) {
-            hostWindow.addEventListener("deviceorientation", this._deviceOrientationHandler);
+            // check iOS 13+ support
+            if (typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
+                (<any>DeviceOrientationEvent).requestPermission()
+                    .then((response: string) => {
+                        if (response === 'granted') {
+                            hostWindow!.addEventListener("deviceorientation", this._deviceOrientationHandler);
+                        } else {
+                            Tools.Warn("Permission not granted.");
+                        }
+                    })
+                    .catch((error: any) => {
+                        Tools.Error(error);
+                    });
+            } else {
+                hostWindow.addEventListener("deviceorientation", this._deviceOrientationHandler);
+            }
         }
     }
 

src/Cameras/Inputs/freeCameraDeviceOrientationInput.ts

@@ -52,7 +52,7 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
     private _gamma: number = 0;
 
     /**
-     * Can be used to detect if a device orientation sensor is availible on a device
+     * Can be used to detect if a device orientation sensor is available on a device
      * @param timeout amount of time in milliseconds to wait for a response from the sensor (default: infinite)
      * @returns a promise that will resolve on orientation change
      */
@@ -65,7 +65,7 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
                 res();
             };
 
-            // If timeout is pupulated reject the promise
+            // If timeout is populated reject the promise
             if (timeout) {
                 setTimeout(() => {
                     if (!gotValue) {
@@ -75,7 +75,21 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
                 }, timeout);
             }
 
-            window.addEventListener("deviceorientation", eventHandler);
+            if (typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
+                (<any>DeviceOrientationEvent).requestPermission()
+                    .then((response: string) => {
+                        if (response == 'granted') {
+                            window.addEventListener("deviceorientation", eventHandler);
+                        } else {
+                            Tools.Warn("Permission not granted.");
+                        }
+                    })
+                    .catch((error: any) => {
+                        Tools.Error(error);
+                    });
+            } else {
+                window.addEventListener("deviceorientation", eventHandler);
+            }
         });
     }
 
@@ -121,13 +135,30 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
         let hostWindow = this.camera.getScene().getEngine().getHostWindow();
 
         if (hostWindow) {
-            hostWindow.addEventListener("orientationchange", this._orientationChanged);
-            hostWindow.addEventListener("deviceorientation", this._deviceOrientation);
-        }
 
-        //In certain cases, the attach control is called AFTER orientation was changed,
-        //So this is needed.
-        this._orientationChanged();
+            const eventHandler = () => {
+                hostWindow!.addEventListener("orientationchange", this._orientationChanged);
+                hostWindow!.addEventListener("deviceorientation", this._deviceOrientation);
+                //In certain cases, the attach control is called AFTER orientation was changed,
+                //So this is needed.
+                this._orientationChanged();
+            };
+            if (typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
+                (<any>DeviceOrientationEvent).requestPermission()
+                    .then((response: string) => {
+                        if (response === 'granted') {
+                            eventHandler();
+                        } else {
+                            Tools.Warn("Permission not granted.");
+                        }
+                    })
+                    .catch((error: any) => {
+                        Tools.Error(error);
+                    });
+            } else {
+                eventHandler();
+            }
+        }
     }
 
     private _orientationChanged = () => {