HTML 5 Mobile Device Orientation API: Alpha (compass) value does not indicate north

Question

The alpha value in the following snippet of code should variate between 0 and 360 according to the device's rotation:

window.addEventListener('deviceorientation', function(eventData) {
    var LR = eventData.gamma;
    var FB = eventData.beta;
    var DIR = eventData.alpha;

    deviceOrientationHandler(LR, FB, DIR);
});

This variation should depend on the wind direction it's facing. To accomplish this the device utilises a magnetometer / compass.

When i tested this on an ipad 3 i encountered the following problem:

It varies from 0 to 360, but in a relative way. The page shows 0 when loaded and then varies between 0 and 360. But when the device is rotated and the page is refreshed it again starts by showing 0 and then varying between those values.

As it should follow wind directions and i am trying to find out where the North is i need it to do this in an absolute way instead of a relative way. AKA: always display the same value when facing somewhere regardless of when and in what direction the device is facing when the page is loaded.

These scources indicate the API should be capable of this:

html5rocks

And this one:

W3C

And here's an example where "direction" should be 0 when facing north (or at least return a consistent value):

the html5rocks page contains an example (ctrl + f and "try it out"). Can't post more then 2 URLS

Is this the correct way of indicating the wind direction the device is facing? I need to use this in combination with the Google Maps Api.

And lastly i know there are compass apps for the Ipad 3 so the device should be capable of doing this.

I am confused :)

Answer 1

According to W3C:

Implementations that are unable to provide absolute values for the three angles may instead provide values relative to some arbitrary orientation, as this may still be of utility. In this case, the absolute property must be set to false. Otherwise, the absolute property must be set to true.

Answer 2

This is an old question, but because of some changes (browser updates) in the last years I had the same problem. There are two ways to solve that:

Device Orientation Absolute

https://developers.google.com/web/updates/2016/03/device-orientation-changes

(works for opera,chrome, maxthon on android)

Device Orientation with Calibration

Check the compass-north is by using device motion or with HTML5 watchLocation movement

Answer 3

With Mobile Safari (iOS), alpha is based on the direction the device was pointing when device orientation was first requested. So when you activate deviceorientation listener while your iPad is showing East, then alpha is 0 at East. To get correct compass direction you need to use the webkit parameter webkitCompassHeading on iOS. All other browsers accept alpha as compass direction. To support them all:

var compassdir;
if(eventData.webkitCompassHeading) {
  compassdir = eventData.webkitCompassHeading;
}
else compassdir = eventData.alpha;