Orientation and motion sensors on iOS web browser Safari (SOLVED)

Questions
#1

Hello guys!

I’m looking again for anyone who managed to get iOS web browser (Safari) to allow me to get device motion and orientation data on HTML5.

The iOS is requesting permissions to be given after user input and it doesn’t work by Defold’s input, but I managed to do so from javascript by adding and handling a button in HTML5 on top of the Defold’s canva that requests permissions after clicking onit.

I got a popup with information about requested permissions, I clicked agree, but I don’t see any icon(?)/information, whether motion data is being collected or not.

Event handling code (JS):

DeviceOrientationEvent.requestPermission().then(response => {
    if (response === "granted") {
         window.addEventListener('deviceorientation', function(event) {
               _processGyroscopeData(event.alpha, event.beta, event.gamma);
         });
         console.log("DeviceOrientationEvent permission granted.");
     } else {
         console.error("DeviceOrientationEvent permission denied.");
     }

And code passing it to C++:

EMSCRIPTEN_KEEPALIVE void processGyroscopeData(double alpha, double beta, double gamma) {
    currentGyroData.x = alpha;
    currentGyroData.y = beta;
    currentGyroData.z = gamma;
}

And then to Lua:

static int GetGyroscopeEuler(lua_State* L) {
    // Gyroscope data is already in Euler angles (alpha, beta, gamma)
    lua_pushnumber(L, currentGyroData.x); // Roll (alpha)
    lua_pushnumber(L, currentGyroData.y); // Pitch (beta)
    lua_pushnumber(L, currentGyroData.z); // Yaw (gamma)
    return 3; // Returning Euler angles
}

And the data in deviceorientation event is 0… (alpha = 0, beta = 0, gamma = 0) (as initialized) all the time. How can I start data collection after getting permission form user?

Testing on iPhone Xs (iOS 16.6)

#2

The solution for this turned out to be simpler than I thought. Just self host it.

I was testing on itch. When I hosted it on a server, so it was run directly from index.html and not in iframe, iOS allowed to pop-up the permission request for DeviceOrientation and everything is working there without any more problems.

If you (or me in a distant future :sweat_smile:) will ever try to host such an application with access to data like gyroscope or magnetometer - check if this is an issue. Especially, if you are receiving a response and it’s always “denied”.

For reference, here’s also a topic on itch to maybe change some settings to allow it for iOS applications (but it’s also very rare to use this data in games) 'DeviceOrientationEvent' requires magnetometer permissions - Questions & Support - itch.io

3 Likes