Presently, I am encountering a similar issue. The deviceorientation events work in Chrome desktop, but not in Chrome Android. Conversely, in FireFox, it's the opposite.
The reason for this behavior is unknown to me. However, I can offer a basic troubleshooting step and a potential solution to make it function in both Chrome and FireFox on desktop and Android.
To start, try uninstalling your Chrome browser or just its updates, then reinstall. This simple action resolved the deviceorientation issue on my phone.
The alternative solution is as follows:
You may utilize one of the OrientationSensors, specifically the AbsoluteOrientationSensor and RelativeOrientationSensor, from the Sensor APIs to ensure compatibility across Chrome Android while still retaining the fallback of deviceorientation where applicable, like Chrome desktop and FireFox Android. Sensor APIs are currently only accessible in Chrome. These Sensor APIs necessitate secure contexts such as https pages (more details at https://www.w3.org/TR/secure-contexts/). Speaking about device orientation measurement on the web, these sensor APIs distinguish between absolute orientation (relative to Earth's true North) and relative orientation. You can also achieve absolute orientation using the deviceorientation event by ensuring its absolute property is set to true. If the property is false, it indicates that your device lacks a magnetometer in theory. Additionally, mobile Safari does not consider this property. Instead, it uses webkitCompassHeading, mentioned in the Apple Developer documentation and MDN, although not explicitly listed in the specification. Moreover, the deviceorientation event specification includes references to additional features like the compassneedscalibration Event and deviceorientationabsolute Event, which seem overlooked by developers.
In my personal view, this process should be more straightforward. A simple boolean value indicating whether the orientation is absolute or relative would suffice, with the alpha value consistently representing the compass angle from either true North or magnetic North. Although the introduction of Sensor APIs promises simplification, their widespread implementation is yet to be seen.
When combined with the Permissions API, the usage should resemble the following example excerpted from MDN:
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.");
}
});
This API provides a quaternion, which is highly beneficial for orientations and rotations, especially when working with 3D engines like three.js or babylonjs. Utilize the sensor's onreading event handler to obtain the quaternion and update object orientations in the render loop of your chosen 3D engine.
You can explore some examples through developer tools inspector, including an AbsoluteOrientationSensor demonstration lower down the page:
An earlier comment mentions the necessity of using HTTPS for deviceorientation events, as per the specifications outlined here: https://w3c.github.io/deviceorientation/#security-and-privacy. Nevertheless, based on my tests, these events function even on HTTP pages. Unfortunately, in certain scenarios like ours, they might fail even within an HTTPS environment.
In conclusion, navigating the realm of web development involving sensors can indeed be challenging. Hopefully, these insights prove helpful amidst the current complexities.