javascript - How do you access the motion sensors (accelerometer, gyroscope) in a mobile browser webapp inafter 2019? Why does i

admin管理员组

文章数量:1315318

I have code that is intended to measure device motion on a mobile device, and it used to work in mobile browsers, but no longer does. Here's an example taken directly from the Mozilla web docs:

function handleMotionEvent(event) {

    var x = event.accelerationIncludingGravity.x;
    var y = event.accelerationIncludingGravity.y;
    var z = event.accelerationIncludingGravity.z;

    // Do something awesome.
}

window.addEventListener("devicemotion", handleMotionEvent, true);

As far as I can tell, code like this no longer works in a mobile browser (circa Aug 2019).

Why? What needs to be done?

After spending time trying to debug my own code, I discovered that the many examples/demos/testers available on the web also no longer work, eg:

/

/

It seems that this is related to some changes in modern browsers/permissions/etc, perhaps related to recently revealed security issues related to accelerometer access, and steps being taken by Apple and Google as a result, eg:

/

What I found is that neither a recent Android phone running up to date Chrome nor a relatively recent iOS phone running Safari seem to allow webapp access to the motion sensors anymore. However, when I load the same demo code (eg from the above demo websites) on an older Android device... it works fine as it used to.

What needs to be done to access motion data within a webapp?

Thank you

I have code that is intended to measure device motion on a mobile device, and it used to work in mobile browsers, but no longer does. Here's an example taken directly from the Mozilla web docs:

function handleMotionEvent(event) {

    var x = event.accelerationIncludingGravity.x;
    var y = event.accelerationIncludingGravity.y;
    var z = event.accelerationIncludingGravity.z;

    // Do something awesome.
}

window.addEventListener("devicemotion", handleMotionEvent, true);

As far as I can tell, code like this no longer works in a mobile browser (circa Aug 2019).

Why? What needs to be done?

After spending time trying to debug my own code, I discovered that the many examples/demos/testers available on the web also no longer work, eg:

http://www.gianpa./shake/

http://www.albertosarullo./demos/accelerometer/

It seems that this is related to some changes in modern browsers/permissions/etc, perhaps related to recently revealed security issues related to accelerometer access, and steps being taken by Apple and Google as a result, eg:

https://www.macrumors./2019/02/04/ios-12-2-safari-motion-orientation-access-toggle/

What I found is that neither a recent Android phone running up to date Chrome nor a relatively recent iOS phone running Safari seem to allow webapp access to the motion sensors anymore. However, when I load the same demo code (eg from the above demo websites) on an older Android device... it works fine as it used to.

What needs to be done to access motion data within a webapp?

Thank you

• javascript
• android
• ios
• google-chrome
• mobile-safari

Share Improve this question Follow asked Aug 26, 2019 at 18:25 user2330237user2330237 1,70355 gold badges2323 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Apparently it is now required to serve and access a website/webapp using https:// for it to be able to use the motion sensors. I accessed the same URL above that didn't provide any sensor data using http://, and it did work using https://

If you have an older version of Chrome 63, please enable the chrome://flags/#enable-generic-sensor flag.

If you are using environmental sensors, such as, Magnetometer or AmbientLightSensor, please also enable chrome://flags/#enable-generic-sensor-extra-classes flag.

Reference: https://intel.github.io/generic-sensor-demos/

本文标签：