deviceShaken() and deviceMoved() not working on p5.js sketch

Question

function deviceMoved(){
  moved = true;
  bulb.stop();
  playing = false;
}

On my sketch.js (p5.js) this event is not fired on mobile phone, neither is deviceShaken(). Google Chrome version is around 80 or something, my phone is a Huawei P20 Lite. I'm using http, but https as well did not produce any result. Anyone know why or how to solve this issue?

Answer 1

Solved! It was a rather tricky one. In both Android and iOS you'll need to enable https. In iOS 13+ you'll also need to ask for permission (and it needs to be done within a user interaction).

Something like this:

if (typeof DeviceMotionEvent.requestPermission === 'function' &&
typeof DeviceOrientationEvent.requestPermission === 'function'
 ) {
 // iOS 13+
  askButton = createButton('Permission');
  askButton.size(windowWidth*6/8, windowHeight/8);
  askButton.position(windowWidth/2 - drumButton.width/2, windowHeight/2);
  askButton.mousePressed(() => {
    DeviceMotionEvent.requestPermission()
    .then(response => {
      if (response === 'granted') {
        window.addEventListener('devicemotion', deviceMotionHandler, true);
      }
    });

    DeviceOrientationEvent.requestPermission()
    .then(response => {
    if (response === 'granted') {
      window.addEventListener('deviceorientation', deviceTurnedHandler, true)
    }
  })
  .catch(console.error)