Best Device Orientation API In Web Using Javascript

In this tutorial, we see the hidden gem that is Detecting device orientation in Web Using Javascript. you need to make sure your browser supports it. You can easily check caniuse.com.

Detecting device orientation

It allows a device to detect its physical orientation with respect to gravity. If you ever see that on rotating the screen the device shows the effects mostly on mobile phones. Orientation is measured using three sides – alpha, beta, and gamma.

Browser Compatibility

We can check that if the browser supports the device orientation API by just writing the conditional code.

if (window.DeviceOrientationEvent) {
  // Browser supports DeviceOrientation
} else {
  console.log("Sorry, your browser doesn't support Device Orientation");
}

It can be really useful for use cases like gaming – for controlling a character or an object and even for gesture recognition in web applications for enhanced accessibility.

Capturing events

The event is emitted whenever a significant change occurs in orientation.

window.addEventListener("deviceorientation", (e) => {
 console.log(e);
});

The Alpha, Beta, and Gamma Angles

Device orientation defines the following rotations along the 3 axes –

The change in orientation returned by the event is expressed in terms of these values – Alpha, Beta, and Gamma.

Request For Enabling Device Orientation

In most mobile browsers it doesn’t allow access to sensor data due to security reasons. It can only be available for use by the web page after the user has granted permission to access the orientation data.
For requesting user permission to access the orientation data, the Permissions API can be used as follows –

if (DeviceMotionEvent.requestPermission) {
   DeviceMotionEvent.requestPermission()
   .then(response => {
     if (response == "granted") {
        window.addEventListener("deviceorientation", function(e) {
            const { alpha, beta, gamma } = e;
            document.getElementById("alpha").innerText = alpha.toFixed(0);
            document.getElementById("beta").innerText = beta.toFixed(0);
            document.getElementById("gamma").innerText = gamma.toFixed(0);
        });
    } else {
        alert('Device orientation permission not granted');
    }
   }).catch((err) => {console.log(err)});
} else {
   alert("Device motion permission access method not available");
}

Orientation using chrome dev tools

To simulate the device orientation we can make use of the chrome dev tool in-built device orientation sensor and simulates in different angles such as portrait, landscape, etc.
To Open the simulator on desktop first open the developer’s console the press Command+Shift+P (Mac) or Ctrl+Shift+P (Windows or Linux) to open the command menu. Type “sensors” and select show sensors.
Then from the Orientation list select the custom orientation option.

Browser support

As of now, the API is work in progress and is subject to change but the events themselves are supported by all modern browsers.