Accessing the iPhone Accelerometer with Javascript in iOS 13-16+
TL;DR: Demo here. Hit the button at the top to start.
I recently tried out a bunch of different Javascript accelerometer demos that claimed to access the IMU sensor in-browser. It was usually a simple demo: dots rolling across a screen due to gravity, or perspective shifting a 3D scene based on your orientation. However, none of these demos worked at all — no popup asking about permissions or anything. What gives?
In iOS 13, Apple added an option under Safari to allow webpages to request accelerometer access. However, the webpage couldn’t just spam you with a “Please Let Us Use Your Accelerometer” screen until you responded yes — Instead, the user had to purposefully trigger the request, by hitting a button or performing an action to allow the site to request access. Whew!
This is a tutorial on how to do that. I’ll walk you through
- How to set up a webpage
- How to request permission to access the accelerometer through DeviceMotionEvent
- Visualizing the sensor values
Let’s start!
Setting up the webpage
To start, you’ll need to create an HTML page. We’re going to be making the background light blue, because white is boring.
You’ll see I’ve also added a custom class indicatorDot, which draws a small orange dot on the screen that overlays onto other things. You’ll also see that I’ve added a button. The accelPermsButton is the button the user will press to allow the browser to use the accelerometer.
Your HTML page should look like this when opened in browser:
Requesting Accelerometer Permissions
If you noticed earlier, our button is bound to a getAccel() function, which doesn’t exist yet. We’ll be writing it in the <script> tag in the header. The <script> tag is for inserting Javascript into the page — everything written…
