Back to Aframe

device-orientation-permission-ui

docs/components/device-orientation-permission-ui.md

1.7.12.5 KB
Original Source

Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. The device-orientation-permission-ui component applies only to the <a-scene> element

To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

css
.a-dialog-allow-button {
  background-color: red;
}

.a-dialog-deny-button {
  background-color: blue;
}

.a-dialog-ok-button {
   background-color: green;
 }

The dialog can also be disabled all together if you prefer to handle the permissions workflow differently.

Example

html
<a-scene device-orientation-permission-ui="enabled: false"></a-scene>

Properties

PropertyDescriptionDefault Value
enabledWhether or not to display the dialog when requiredtrue
denyButtonTextDeny button textEnglish text
allowButtonTextAllow button textEnglish text
cancelButtonTextCancel button textEnglish text
deviceMotionMessageMessage in dialog requesting user permission to enable the Device Motion API.English text
mobileDesktopMessageMessage displayed in modal requesting user to switch to mobile browsing mode.English text
httpsMessageMessage requesting user to switch to HTTPS.English text

Events

Event NameDescription
deviceorientationpermissiongrantedUser has granted access to DeviceOrientation events
deviceorientationpermissionrejectedUser or browser has denied access to DeviceOrientation events
deviceorientationpermissionrequestedApplication has requested permission to access DeviceOrientation events