motion-sensors-polyfill

W3C Generic Sensor API polyfills

Beware, we're still under active development. Expect rough edges.

This is a polyfill for Generic Sensor-based motions sensors to make migration from the old DeviceOrientationEvent/DeviceMotionEvent to the new APIs a smoother experience.

In particular, this polyfill will allow the users of modern browsers to get a feel of the new API shape before it ships (Chrome 63 has a native implementation).

src/motion-sensors.js implements the following interfaces:

• Sensor
• Accelerometer
• LinearAccelerationSensor
• GravitySensor
• Gyroscope
• RelativeOrientationSensor
• AbsoluteOrientationSensor

How to use the polyfill

• Copy src/motion-sensors.js (source) into your project, or install via npm ($ npm i motion-sensors-polyfill).
• Import the motion sensor objects in your HTML (see <script type="module"> browser support or use a polyfill to load this polyfill!):

<script type="module">
// Import the objects you need.
import {
  Gyroscope,
  AbsoluteOrientationSensor
} from './src/motion-sensors.js';

// And they're ready for use!
let gyroscope = new Gyroscope({ frequency: 15 });
let orientation = new AbsoluteOrientationSensor({ frequency: 60 });
</script>

• That's it. See AbsoluteOrientationSensor demo and RelativeOrientationSensor demo (code) for examples.

How to enable the native implementation in Chrome

There are two ways: Origin Trial and Enable via chrome://flags.

Origin Trial

Generic Sensor APIs are currently available as an Origin Trial in Chrome 63+.

To enable native Generic Sensor API implementation for all Chrome users on your site:

1. Go to https://bit.ly/OriginTrialsSignup to get a token.
2. Add the token to your web page as follows (replace ... with your token):

<!-- Origin Trial Token, feature = Generic Sensors, origin = https://example.org, expires ="2018-01-18" -->
<meta http-equiv="origin-trial" data-feature="Generic Sensors" data-expires="2018-01-18" content="...">

1. Optional: add motion-sensors.js polyfill to cater for non-Chrome users (see How to use the polyfill).

Enable via chrome://flags

The native implementation is behind the following feature flags in Chrome 63+:

Generic Sensor (chrome://flags/#enable-generic-sensor):

• Accelerometer
• Gyroscope
• LinearAccelerationSensor
• AbsoluteOrientationSensor
• RelativeOrientationSensor

Generic Sensor Extra Classes (chrome://flags/#enable-generic-sensor-extra-classes):

• AmbientLightSensor
• Magnetometer

Test suite

Run web-platform-tests with this polyfill enabled here.

Known issues

• GravitySensor and LinearAccelerationSensor polyfills do not work on Android with Pixel 2, since DeviceMotionEvent.acceleration returns only null values, see Chromium bug 796518.
• AbsoluteOrientationSensor on iOS uses non-standard webkitCompassHeading that reports wrong readings if the device is held in its portrait-secondary orientation. Specifically, the webkitCompassHeading flips by 180 degrees when tilted only slightly.

Learn more

• Sensors For The Web article on Google's Web Fundaments - a web developer-oriented article explaining how to use the Generic Sensor-based APIs.