DeviceOrientationEvent: requestPermission() static method

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The requestPermission() static method of the DeviceOrientationEvent interface requests the user's permission to access device orientation data from the accelerometer and gyroscope sensors. It can also request permission to access magnetometer data when absolute orientation is needed. This method requires transient activation, meaning that it must be triggered by a UI event such as a button click.

Syntax

js
DeviceOrientationEvent.requestPermission()
DeviceOrientationEvent.requestPermission(absolute)

Parameters

absolute Optional

A boolean indicating whether absolute orientation data is needed. When true, the permission request also includes the magnetometer sensor. Defaults to false.

Return value

A Promise that resolves with a string which is either "granted" or "denied".

Exceptions

The returned promise rejects with the following exceptions:

NotAllowedError DOMException

The permission state is "prompt" and the calling function does not have transient activation.

Security

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Examples

undefined

Requesting device orientation permission on click

js
document.querySelector("button").addEventListener("click", async () => {
  if (typeof DeviceOrientationEvent.requestPermission !== "function") {
    // The feature is not available, or does not need permission.
    return;
  }

  const permission = await DeviceOrientationEvent.requestPermission();
  if (permission === "granted") {
    window.addEventListener("deviceorientation", (event) => {
      console.log(`Alpha: ${event.alpha}`);
      console.log(`Beta: ${event.beta}`);
      console.log(`Gamma: ${event.gamma}`);
    });
  }
});

Requesting absolute orientation permission

When absolute orientation data is needed (e.g., for compass-based applications), pass true as the absolute parameter. This additionally requests access to the magnetometer.

js
document.querySelector("button").addEventListener("click", async () => {
  if (typeof DeviceOrientationEvent.requestPermission !== "function") {
    return;
  }

  const permission = await DeviceOrientationEvent.requestPermission(true);
  if (permission === "granted") {
    window.addEventListener("deviceorientationabsolute", (event) => {
      console.log(`Absolute alpha: ${event.alpha}`);
    });
  }
});

Specifications

See also