![A Tour of Web Capabilities](https://static.frontendmasters.com/assets/courses/2023-07-11-device-web-apis/thumb.webp)
Check out a free preview of the full A Tour of Web Capabilities course
The "Bluetooth Light Demo" 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 demonstrates how to use the Web Bluetooth API. Bluetooth lights are connected to the Cooking Masters application. When a time finishes running, the lights flash and the gamepad rumbles.
Transcript from the "Bluetooth Light Demo" Lesson
[00:00:00]
>> So I have here with me Bluetooth lights. It can be any light, but again, this is not a standard service, so we need to actually understand how that work. And actually, I google the name of these lights and I tried to find if someone has already understood how these work.
[00:00:21]
And I found a Python library to work with the slides with all the services ID, some characteristic IDs, so then I can use it in my code. Let's look at the code. Let's go and look at the code Bluetooth. And actually, because it was so complicated, I created a new file, BTLights.js, BluetoothLights.js.
[00:00:48]
So look at this. This is how a service ID looks like. This is the service ID for these lights. And then the lights have different characteristics for changing the color, for checking the power, for whatever they have. And they have one characteristic ID like that one. And by the way, who is defining this?
[00:01:10]
The manufacturer. They can use any value. So there is no list of IDs by manufacturer on a Bluetooth foundation website, no. So it's just that. So I'm requesting a device, and here you can see the difference. I can ask for a device with a prefix, Govee, that's the name, that's the brand.
[00:01:36]
And I can ask for optional services. I want a device with that ID. But I don't need that. So I can just say I want all the devices, I want the device with that name, or I just want all the devices. And the problem is that the list will be really, really large.
[00:01:57]
Let me show you an example that we have here, the Web Bluetooth tester. This is a tester to test this API, where you can actually pick all the devices or just one by prefix, by name. And when you click Get Bluetooth Device Info, let's say all devices, now these are all the Bluetooth devices around me.
[00:02:28]
And there are more, lots of Bluetooth devices we have and we don't know, Apple watches, headphones, computers, laptops, a lot of things they have Bluetooth. So then you can pick one, we have a Samsung The Frame 65. I'm not sure if from here, maybe it from a neighbor, maybe it's not from this apartment, and they can pair with it and they can see the information, some information.
[00:02:56]
Samsung The Frame 65, okay, with the ID, and it's not yet connected. Probably, we'll need the connection or something like that. And you can get the services and do something with it. So it can get really complicated. So on this here, so after I have the device, okay, I have different functions, turn on, turn off, more brightness, less brightness.
[00:03:26]
And look at that, that's the bytes that I need to send for that special operation, turnOn, turnOff, and it's calling writeData. writeData is that code that is connecting to the device, getting the service, getting the characteristic, converting that string into an actual array of bytes for JavaScript, and finally writing that value to the characteristic.
[00:03:57]
So it gets complex. You need experience working with binary data, and also to understand, what is this? Well, this comes from a manual or from someone that already sniffed the device to understand how that works. In fact, the last digit, it's actually, in this case, a digit that is for error checking, it's a checksum.
[00:04:22]
And you need to understand which protocol they're using for that to actually make that work. So let's see if we can call, because right now we are exporting these turnOn, turnOff from here. And now on our app.js, we have an alertTimerFinished where we do several stuff. For example, when the timer finishes, I'm calling a rumble on my gamepad.
[00:04:54]
So then you will hear when the timer finishes, you will hear a rumble. And then if we do have a Bluetooth connected, I'm sending different messages with set timeout. So that means in 0 seconds, so right now, 300 milliseconds, 300 milliseconds, and doing all these kind of chain commands to the Bluetooth device.
[00:05:17]
So let's try this. So I'm going to start cooking. I'm going to the next step, that's the one that lets me add a timer, and I'm going to connect both the gamepad and the lights. And I'm going to add a timer. Let's wait for it. And now we have alerts everywhere saying, hey, hey, hey, your eggs, okay?
[00:05:50]
Your chicken is ready. And remember the idea here is that you can add more than one and they will, for every step, you can add more than one and have them there. And remember, we can also use the speech synthesis to shout, hey, hey, the chicken. Hey, we can do that.
[00:06:06]
We can add something really quickly to our code. In our code, that part is currently in app.js, like in the main part, we have an alertTimerFinished function that is called every time a timer is finished. And in this case, you can see with this code, I'm rumbling a gamepad, if I do have a gamepad connected.
[00:06:31]
And then if I have a Bluetooth light connected, I'm calling this code that is turning on and off and changing the brightness. I can change the colors as well, and everything that the Bluetooth device is offering to you. But just have in mind that everything looks complicated when you look at it, okay, because it has to do with hardware manipulation.
[00:06:54]
You need to understand how that hardware works. And most of the hardware out there, at least the commercial hardware, is typically not open, it's closed. So we need to find, hack a way to get into how to do that. But for example, some interesting ideas, in fact, I was about to do that, but I said, too many devices I have here.
[00:07:15]
But for cooking, you also have Bluetooth thermometers for the meat, for example, iGrill. And we do have all the characteristic IDs and service IDs for those devices. So you can also receive alerts when the meat is reaching the expected temperature. And you can get alert in your web app through Bluetooth, and then speak, or watch the lights, or whatever you want.
[00:07:44]
So that's the idea of connecting devices on web app. Yeah, they are not going to probably do this on a newspaper website, okay? This is more experimental to play with games or to do something fun. It's not for every website, okay, but that's how Bluetooth works. Well, that's all for Bluetooth.
[00:08:02]
Remember, it's not on Safari, that means not on the iPhone. By the way, if you wanna try this on iPhone, there is a Web Bluetooth browser in the app store that is using Safari and is injecting a Web Bluetooth implementation. It's just for fun because no user will actually go and download the browser just for your web app.
[00:08:21]
But if you wanna play with it on iOS, it's possible. So there is one browser available.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops