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:
- Go to https://bit.ly/OriginTrialsSignup to get a token.
- 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="...">
- 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
andLinearAccelerationSensor
polyfills do not work on Android with Pixel 2, sinceDeviceMotionEvent
.acceleration
returns only null values, see Chromium bug 796518.AbsoluteOrientationSensor
on iOS uses non-standardwebkitCompassHeading
that reports wrong readings if the device is held in itsportrait-secondary
orientation. Specifically, thewebkitCompassHeading
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.