Device Orientation API not working with local server" -> "Local server not working with Device Orientation API

Programming
, , , ,
1

Investigating a Strange Behavior with the Device Orientation API

I recently noticed something strange while using the Device Orientation API.

The following online demo works perfectly (except for “compassneedscalibration”): https://www.audero.it/demo/device-orientation-api-demo.html

However, when I clone the Source Code locally and provide the Web page via a local web server (python3 -m http.server), the API seems to no longer be available. The same browser tab is used. No messages, warnings, or errors appear in the JavaScript console. The Web page states:

deviceorientation event not supported
devicemotion event not supported
compassneedscalibration event not supported

Screenshot of non working Webpage

Screenshot of non working Webpage

I’m using “Chrome 79.0.3945.93” on “Android 7.1.1;VNS-L21 Build/NMF26V”. Is there something I’m doing wrong, or is this an intended behavior or a bug? Because I will need to provide my web app by a local web server.

2

This issue could be caused by the fact that the local web server is not running on a secure (HTTPS) connection, which is required by the Device Orientation API in some browsers. Try accessing the local web page using https:// instead of http:// and see if that resolves the issue.