How to access accelerometer gyroscope data from Javascript

Question

I have recently come across a few websites that seems to access the accelerometer or gyroscope on my laptop  detecting changes in orientation or movement   How is this done  Must I subscribe to some kind of event on the window object   On which devices  laptops  mobile phones  tablets  is this known to work     NB  I actually already know  part of  the answer to this question  and I am going to post it right away  The reason that I am posting the question here  is to let everyone else know that accelerometer data is available in Javascript  on certain devices  and to challenge the community to post new findings on the subject  Currently  there seems to be almost no documentation of these features

User · Answer

Usefull fallback here  https   developer mozilla org en-US docs Web Events MozOrientation  function orientationhandler evt          For FF3 6    if   evt gamma  amp  amp   evt beta        evt gamma   - evt x    180   Math PI        evt beta   - evt y    180   Math PI              use evt gamma  evt beta  and evt alpha       according to dev w3 org geo api spec-source-orientation      window addEventListener  deviceorientation    orientationhandler  false   window addEventListener  MozOrientation       orientationhandler  false

User · Answer

There are currently three distinct events which may or may not be triggered when the client devices moves  Two of them are focused around orientation and the last on motion    ondeviceorientation is known to work on the desktop version of Chrome  and most Apple laptops seems to have the hardware required for this to work  It also works on Mobile Safari on the iPhone 4 with iOS 4 2  In the event handler function  you can access alpha  beta  gamma values on the event data supplied as the only argument to the function  onmozorientation is supported on Firefox 3 6 and newer  Again  this is known to work on most Apple laptops  but might work on Windows or Linux machines with accelerometer as well  In the event handler function  look for x  y  z fields on the event data supplied as first argument  ondevicemotion is known to work on iPhone 3GS   4 and iPad  both with iOS 4 2   and provides data related to the current acceleration of the client device  The event data passed to the handler function has acceleration and accelerationIncludingGravity  which both have three fields for each axis  x  y  z   The  earthquake detecting  sample website uses a series of if statements to figure out which event to attach to  in a somewhat prioritized order  and passes the data received to  a common tilt function   if  window DeviceOrientationEvent        window addEventListener  deviceorientation   function              tilt  event beta  event gamma           true     else if  window DeviceMotionEvent        window addEventListener  devicemotion   function              tilt  event acceleration x   2  event acceleration y   2           true     else       window addEventListener  MozOrientation   function              tilt  orientation x   50  orientation y   50           true       The constant factors 2 and 50 are used to  align  the readings from  the two latter events with those from the first  but these are by no means precise representations  For this simple  toy  project it works just fine  but if you need to use the data for something slightly more serious  you will have to get familiar with the units of the values provided in the different events and treat them with respect

User · Answer

The way to do this in 2019  is to use DeviceOrientation API  This works in most modern browsers on desktop and mobile    window addEventListener  deviceorientation   handleOrientation  true         After registering your event listener  in this case  a JavaScript   function called handleOrientation     your listener function   periodically gets called with updated orientation data       The orientation event contains four values          DeviceOrientationEvent absolute   DeviceOrientationEvent alpha   DeviceOrientationEvent beta   DeviceOrientationEvent gamma         The event handler function can look something like this   function handleOrientation event      var absolute   event absolute    var alpha      event alpha    var beta       event beta    var gamma      event gamma       Do stuff with the new orientation data

User · Answer

Can t add a comment to the excellent explanation in the other post but wanted to mention that a great documentation source can be found here   It is enough to register an event function for accelerometer like so   if window DeviceMotionEvent     window addEventListener  devicemotion   motion  false    else    console log  DeviceMotionEvent is not supported        with the handler   function motion event     console log  Accelerometer          event accelerationIncludingGravity x              event accelerationIncludingGravity y              event accelerationIncludingGravity z          And for magnetometer a following event handler has to be registered   if window DeviceOrientationEvent     window addEventListener  deviceorientation   orientation  false    else    console log  DeviceOrientationEvent is not supported        with a handler   function orientation event     console log  Magnetometer          event alpha              event beta              event gamma          There are also fields specified in the motion event for a gyroscope but that does not seem to be universally supported  e g  it didn t work on a Samsung Galaxy Note    There is a simple working code on GitHub

[javascript] How to access accelerometer/gyroscope data from Javascript?

Examples related to javascript

Examples related to accelerometer

Examples related to gyroscope