Check out a free preview of the full A Tour of Web Capabilities course

The "Sensors" Lesson is part of the full, A Tour of Web Capabilities course featured in this preview video. Here's what you'd learn in this lesson:

Max introduces sensors and explains how the APIs will vary based on a device's capabilities. Available sensors may include an accelerometer, gyroscope, magnetometer, proximity, and light sensors. Global DOM APIs still exist for accessing sensor data. The Sensor API is the new promised-based API which is still gaining browser support.

Preview
Close

Transcript from the "Sensors" Lesson

[00:00:00]
>> So let's start with the category of APIs now, talking about sensors, geolocation, and input devices. So this is a suite of APIs that we will cover now. Let's start with sensors. So first, what's a sensor? A sensor is a chipset that is available in one particular device that is measuring something, okay?

[00:00:25]
So we have different kinds of sensors today on different devices. But talking about the API first, we will have different APIs and different sensors. So mostly on mobile devices, we have a lot of sensors. Typically, we have an accelerometer on three axes. The accelerometer is a sensor that is sensing acceleration.

[00:00:50]
Question for you. Do I have acceleration right now? In this phone?
>> Yes.
>> Yes. Which acceleration?
>> Down.
>> Gravity. Down on one axis. If I have the phone upside down. It's on the same axis but negative value. And based on where I am, that's acceleration. Sometimes you can ask for acceleration, removing the gravity.

[00:01:13]
So sometimes some API's will let you do that. So you can get the gravity or not, but you can also go over the gravity so you can actually move it harder, you can apply more force to it, and you can read that with JavaScript. That actually was, after geolocation, probably the next API that appear in history on the web, how to read the accelerometer.

[00:01:39]
So why do you wanna use the accelerometer? We will see some examples in a minute. But typically some effects to know how the user is using the phone. Because you can know, for example, if you are like this, you can know if you are maybe laying down a bed looking at the phone because the gravity is different on different axes based on how are you using your phone and based on that you can change something in your app.

[00:02:14]
Gyroscope that's another sensor I think on the iPhone, it was the iPhone 4 or 3GS. I don't remember now, the first one that added gyroscope. With gyroscope we can know how do we have the phone like this? In this case, the force is the same on one axis, the same force, but I'm changing the angle, okay?

[00:02:37]
Something that I'm simplifying this. But with gyroscope we can also read the values. On accelerometer, we get three axes, X, Y, and Z. And the current value of acceleration on each axis. On gyroscope, we typically get alpha, beta and gamma. Also three values for gyroscope. We also have magnetometer that is kind of the compass.

[00:03:05]
Okay, so it's also a sensor. It's not typically something that comes with a GPS or something like that. It's a different sensor. Okay, so if you have a compass app in your phone, it's using the magnetometer. And you can read that also in your website. Proximity sensor. A proximity sensor will detect if you have the phone like this, or if I have the phone like that, it knows proximity to the user.

[00:03:39]
Because, I mean, if it's a game, and then you realize that the user is doing this, you should pause the game probably. It depends on the game but that's the proximity sensor. Light sensor. So the light sensor will measure the light in looks and it will detect how much light do you have in the room.

[00:04:00]
So based on that, for example, you can change the theme color, okay, things like that. So you can swap from dark to light or something like that because you can read that. And there are more, so more are applying. These are the ones that are currently available on the web, but now you have humidity sensors as well, okay?

[00:04:21]
On some devices, on Samsung devices, they have a humidity sensor. Altimeter, the iPhone has an altimeter, also the watch. That's how we can measure if you're using a stairs, if you're climbing. So those are the sensors and you need to pick which sensors do you want, do you need and there are typically two ways to consume them on the web.

[00:04:51]
So we started with the first API. This is kind of the weird, because we have two ways not one. We have all API's that actually were kinda created by Apple. Okay, and the rest Chrome basically cloned them. So Safari was the one that was pushing the boundaries are the time.

[00:05:12]
I'm talking about 2009 something like that and in this case we are talking about DOM APIs. I will show you the code in a minute and this is the only API available still today on iPhones, okay? So if you wanna do this on iPhones, you'd still need to use the old API's.

[00:05:30]
But also we have another API called sensor or generic sensor API that is a new API promise based so it's not just the DOM event, the global DOM event but it's not yet in Safari. Will it be? Who knows, okay? It's not today, I didn't see it in the words, right?

[00:05:53]
They should implement because if they have the old API, I mean, they're close to that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now