Web/API/OrientationSensor

From Get docs


The OrientationSensor interface of the the Sensor APIs is the base class for orientation sensors. This interface cannot be used directly. Instead it provides properties and methods accessed by interfaces that inherit from it.

If a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See Feature-Policy for implementation instructions.

Interfaces based on OrientationSensor

Below is a list of interfaces based on the OrientationSensor interface.

Properties

OrientationSensor.quaternion
Returns a four element Array whose elements contain the components of the unit quaternion representing the device's orientation.

Methods

OrientationSensor.populateMatrix()
Populates the given object with the rotation matrix based on the latest sensor reading. The rotation maxtrix is shown below.

Examples

Basic Example

The following example, which is loosely based on Intel's Orientation Phone demo,  instantiates an AbsoluteOrientationSensor with a frequency of 60 times a second. On each reading it uses OrientationSensor.quaternion to rotate a visual model of a phone.

const options = { frequency: 60, referenceFrame: 'device' };
const sensor = new AbsoluteOrientationSensor(options);

sensor.addEventListener('reading', () => {
  // model is a Three.js object instantiated elsewhere.
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener('error', error => {
  if (event.error.name == 'NotReadableError') {
    console.log("Sensor is not available.");
  }
});
sensor.start();

Permissions Example

Using orientation sensors requires requsting permissions for multiple device sensors. Becuase the Permissions uses promises, a good way to request permissions is to use Promise.all.

const sensor = new AbsoluteOrientationSensor();
Promise.all([navigator.permissions.query({ name: "accelerometer" }),
             navigator.permissions.query({ name: "magnetometer" }),
             navigator.permissions.query({ name: "gyroscope" })])
       .then(results => {
         if (results.every(result => result.state === "granted")) {
           sensor.start();
           ...
         } else {
           console.log("No permissions to use AbsoluteOrientationSensor.");
         }
   });

Specifications

Specification Status Comment
Orientation SensorThe definition of 'OrientationSensor' in that specification. Candidate Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
OrientationSensor Chrome

Full support 67

Edge

Full support 79

Firefox

No support No

IE

No support No

Opera

Full support 54

Safari

No support No

WebView Android

Full support 67

Chrome Android

Full support 67

Firefox Android

No support No

Opera Android

Full support 48

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

populateMatrix Chrome

Full support 67

Edge

Full support 79

Firefox

No support No

IE

No support No

Opera

Full support 54

Safari

No support No

WebView Android

Full support 67

Chrome Android

Full support 67

Firefox Android

No support No

Opera Android

Full support 48

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

quaternion Chrome

Full support 67

Edge

Full support 79

Firefox

No support No

IE

No support No

Opera

Full support 54

Safari

No support No

WebView Android

Full support 67

Chrome Android

Full support 67

Firefox Android

No support No

Opera Android

Full support 48

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

Legend

Full support  
Full support
No support  
No support