Generic Sensor API not working on localhost

Question

I'm trying to use Generic Sensor API(Gyroscope) in my project I've looked up for documentation on W3C and Intel Github and https://mobiforge.com/design-development/the-generic-sensor-api I've created/copied https://mobiforge.gitlab.io/sensors/gyroscope.html this HTML page to reference javascript it works fine when i open with this link or my github link: Screen Shot of my github page nishanksisodiya.github.io/gyro

But when i open it with a flask server running on my laptop it gives Gyroscope not supported error Screen Shot my localhost page

    let status = document.getElementById('status');
    if ( 'Gyroscope' in window ) {
        let sensor = new Gyroscope();
        sensor.addEventListener('reading', function(e) {
            status.innerHTML = 'x: ' + e.target.x + '<br> y: ' + e.target.y + '<br> z: ' + e.target.z;
        });
        sensor.start();
    }
    else status.innerHTML = 'Gyroscope not supported';

here's the javascript i used. Any help would be appreciated.

Answer 1

I myself had a ton of difficulty with the generic sensor api and discovered that one of the rarely mentioned requirements for it to work is that it has to be used within a secure context. Which means an SSL certificate for the hosting domain. Which... would make local development pretty difficult, right?

Well, I've found a way around that with localtunnel.

Deployment, however... is another story. I've had some issues for some time now moving it beyond my webpack dev server on this react application I've been working on for ages. Any and all help with that is VERY much appreciated.

PS: Biggest weird thing I've found, its supposed to only be supported by Chrome version 67+. But go ahead and click on this link with any other mobile browser and it works. Just. Fine. ???