p5js device orientation not working on my website

user_18127984 0
Viewed 142

I'm trying to build mobile web applications using p5js, and I want to host them on my personal website. In particular I want to use the phone's gyroscope sensors to influence parts of my sketch. However I find that the sensors don't return anything useful when testing on my own site. Please can anyone find the solution, or else advise me how to troubleshoot?

Some details

  • My website is hosted on github pages (link to repo)
  • My phone is an Oppo A9 2020
  • Android version 11
  • I'm testing these websites in android chrome

Example 1:

I've got this sketch called GyroscopeTest. The program hosted on the p5.js web editor works just fine (the device orientation values are updated). However the same program hosted on my personal website doesn't update the values properly.

Example 2:

This is a simpler example. Here's someone's example of using the gyroscope sensors on their website, which works fine on my mobile. I copied the html and javascript sketch over to my own website (removing a few lines of html that were causing minor problems). And on my website it doesn't work.

p5.js android-sensors mobile mobile-website processing
1 Answers

After more digging I found that the issue was because my website was served with http, not https, which has extra security stuff!

Clearly these other websites were served with https, which is why the sketches wored o nthose sites and no my own.

Because I had not enabled https, chrome deemed the website unsecure, and thus did not allow the website access to the phone's sensors. Changing the site to https also allowed other sketches to access the phone's camera.

user_181279840
Related