WebBluetooth – the Missing Link

Rate this content
Bookmark

The WebBluetooth API finally closes the gap between the browser and devices around us. And that suddenly opens up a rabbit hole, in which we inevitably encounter a few hurdles - the story of a frontend developer dipping his toes into the IOT world.

Nico Martin
Nico Martin
24 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk introduces the Web Bluetooth API and its role in bridging the gap between browsers and peripheral devices. It covers how to interact with devices using the API, explores creating BLE devices like a buzzer and a small car, and discusses the limitations and availability of the Web Bluetooth API. The Talk also highlights the potential of the Web Audio API for hardware development and mentions the current lack of support for the Web Bluetooth API on iOS devices.

Available in Español: WebBluetooth: El eslabón perdido

1. Introduction to Web Bluetooth API

Short description:

Please welcome Nicole. Today, I'm here to take you through my journey with the web Bluetooth API. Browsers have always been great at rendering data, but it was difficult to interact with devices next to the browser. With progressive web apps and project Fugu, new APIs like web USB, web serial API, web HID API, fill the gap between the browser and peripheral devices. Bluetooth is a wireless technology standard that exchanges data over a short distance. BLE, Bluetooth Low Energy, is a new standard for IoT devices. Web Bluetooth uses BLE. Bluetooth works with a central device and peripheral devices. The GATT is the way a peripheral device exposes its data. GATT services and characteristics are identified by UUIDs. GATT values are low-level data structures. The web API is straightforward.

Please welcome Nicole. Hello, everyone. My name is Nicole. I was running a little bit late today because I was so busy at work that I spent way too much of my free time playing around with all the new web technologies and browser API APIs and today, I'm here to take you through my journey with the web Bluetooth API.

So, browsers have been built about this idea that they would request data from a server, and they would render that data. So, browsers have always been great at rendering data. But it was always quite difficult to interact with devices that were right next to the browser. Now, with the whole movement of progressive web apps, with the project Fugu, we have seen a couple of new APIs, we have seen the web USB, web serial API, web HID API, and so on and so forth, and they all try to fill this gap between the browser and the peripheral devices.

Now, let's have a look at some basics. So, Bluetooth is a wireless technology standard to exchange data that uses the same frequency as wireless LAN, but it sends really small amounts of data over rather short distance. If you now think about this old and buggy and frustrating experience you had with your first smartphones or your first cell phones, I have very good news for you, because that was the old Bluetooth, Bluetooth 4.0, we also have BLE, which stands for Bluetooth Low Energy, and that's a completely new standard that was built specifically for IoT devices, so it's very energy efficient, and it also runs over quite a long distance. And with Web Bluetooth, we always talk about BLE, because that's a standard that was implemented.

Bluetooth normally works like this. You would have a central device which is the more capable device in terms of CPU and battery usage, and then you would have peripheral devices. Now, we also refer to them as the client and the server, and that's very important that you can connect one central device to multiple peripheral devices, but one peripheral device can only be connected to one central device at the same time. That's also the reason why, for example, you can't connect your headphones and your smart watch to the same smart phone, but you can't connect your headphones to two smart phones at the same time. That's just not possible. Now, as part of BLE, the Bluetooth special interest group introduced the GATT, the generic attribute profile, and that's basically the way how the peripheral device exposes its data to the client. You would have the GATT server that contains a list of GATT services, each service is then just a group of characteristics, and now, one characteristic identifies a value and it also defines what operations can be performed on that value.

For example, if you have a battery level, there it makes sense that you can read the battery level and you also want to be notified when the battery level changes on the device, but it doesn't make sense to make that writeable because you can't just override the battery level and then expect it to be magically 100 per cent if that would be the case, or our energy problems, climate change problems would be solved. But that's not. But if you have the flight direction of a drone, for example, there it does make sense or it's crucial that you can control the direction that you can't control your drone. It needs to be writeable. Now, a GATT value is a low-level data structure, so it's just an array of bytes. If you now look at the right side, here I have the implementation of a GTT server from the play bulb sphere which is a BLE light bulb, and we have the services, we have the characteristics, and that's very important to mention that services and characteristics are not really identified by their names, but by UUIDs. So there's the list of standard UUIDs maintained by the Bluetooth special interest group that cover common use cases like information about the device, or battery levels, so we do know that on each device, the characteristic, or let's say the service 180F, would be the battery service, but then we also have non-standard services like in that example the light service and the light characteristic, and there we can reach for either 128-bits, so long, unique UUIDs, or we can choose 16-bit UUIDs that are not yet specified, in that case we have FF0F for the light service, and FFFC for the characteristic. The tricky part is now, how are those values structured? The first two are pretty basic, that's basically just a UTF-8 encoded string. The battery level is the decimal representation of our byte, so 5a would be 90 per cent, and now for the custom characteristics, there we need to reach out for the documentation, and in most cases, there is no documentation, but in our case, we have documentation, so we do know that the play box here has four bytes, four LEDs inside the light bulb, and with the value of each byte, you can control the intensity of one of those LEDs, and the cool thing is now with red, green, and blue, we can basically create any colour that we have in the RGB colour space. So, now that we have the basics, let's have a look at the web API. So, the web API is pretty straightforward.

2. Interacting with Devices using Web Bluetooth API

Short description:

To interact with devices using the web Bluetooth API, you need to request a device, specify the services and characteristics, and connect to the server. You can read values by getting the service and characteristic using UUIDs, and write values by calling the write value function. Additionally, you can listen for characteristic value changes and receive notifications for battery efficiency. You can then test the API by connecting to a Playbop Sphere device and selecting services to read and write values.

First you have to request a device, pass a set of filters, we need to specify the services we will use later on, and, when that code is executed, the user will see this prompt, there we can select one of all the devices that match the filters we defined.

In our case, we want to filter by the name Playbop sphere, and therefore we can select the playbop sphere, once the user connects to that, we can call device.connect to connect to the server.

To read the value, we can get the service using the UUID and also the characteristic using the UUID. Now, on the characteristic, we can call characteristic.read value to read the value, and, in that case, we will receive a data view, and we are now interested in the first byte of the data view in the decimal format, so, right now, we just want the console log the battery level of the characteristic of the device.

Since the battery characteristic also allows the notify operation, we can add an event listener characteristic value changed, and that will be fired whenever the battery level changes on the device. It is very important here as well that we need to call notifications because in the sake of, or for the sake of battery efficiency, those events are not sent by default.

To write values, again, we need to request the service, the characteristic, this time for the light service. Now we can read the value as before, but now we're interested in the RGB value. So the second, the third, and the fourth value. And now to write a value, we can call the write value without a response, or with response. That depends on the device you're using. But both functions, they accept a new data view. So in that case, we will just override the current data view and that will change the characteristic on the device.

Now let's start with a little demo. First of all, my slides are browser or they're run in the browser. What I can do is I can just open up the console. And those are exactly the commands you have seen before. First of all, let's copy this. I'm not a trackpad person but I think that will work. Now we can connect to the Playbop Sphere. On the device, we can then select server. On the server, we can then select the slide service. And on the light service, we can now write a new value. So in our case, we want to overwrite that value and we expect the light bulb to turn. Yeah, OK. I forgot to sorry, I forgot to get the characteristic. Let's try again. Here we go. No, sorry. Wait.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Install Nothing: App UIs With Native Browser APIs
JSNation 2024JSNation 2024
31 min
Install Nothing: App UIs With Native Browser APIs
You might not need as much JS as you think to accomplish common UI patterns with these new native browser APIs. Dive into new and future CSS, HTML and JS APIs that make our code leaner and faster to ship.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.
How I've been Using JavaScript to Automate my House
JSNation 2022JSNation 2022
22 min
How I've been Using JavaScript to Automate my House
Software Programming is naturally fun but making something physical, to interact with the world that you live in, is like magic. Is even funnier when you can reuse your knowledge and JavaScript to do it. This talk will present real use cases of automating a house using JavaScript, Instead of using C++ as usual, and Espruino as dev tools and Microcontrollers such as Arduino, ESP8266, RaspberryPI, and NodeRed to control lights, doors, lockers, and much more.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!

Workshops on related topic

Build an IoT App With InfluxDB
JSNation Live 2021JSNation Live 2021
105 min
Build an IoT App With InfluxDB
Workshop
Miroslav Malecha
Miroslav Malecha
InfluxDB is an open source time series database that empowers developers to build IoT, analytics and monitoring software. It is purpose-built to handle the massive volumes and countless sources of time-stamped data produced sensors, applications and infrastructure.
This workshop showcases a fully functional sample application called IoT Center that is built on InfluxDB. This application demonstrates the capabilities of the InfluxDB platform to develop a JavaScript-enabled time-series-based application. It collects, stores and displays a set of values that include temperature, humidity, pressure, CO2 concentration, air quality, as well as provide GPS coordinates from a set of IoT devices. With this data stored in InfluxDB, the application can query this data for display as well as write data back into the database.
This hands-on workshop will show students how to install this open source code to learn how to query and write to InfluxDB using the InfluxDB JavaScript client, and gain familiarity with the Flux lang query language which is designed for querying, analyzing, and acting on time series data. And finally, collect and visualize performance data of the Node JS application.
Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.
IoT Center Workshop by InfluxData
Node Congress 2021Node Congress 2021
131 min
IoT Center Workshop by InfluxData
Workshop
Miroslav Malecha
Miroslav Malecha
InfluxDB is an open source time series database that empowers developers to build IoT, analytics and monitoring software. It is purpose-built to handle the massive volumes and countless sources of time-stamped data produced sensors, applications and infrastructure. This workshop showcases a fully functional sample application called IoT Center that is built on InfluxDB. This application demonstrates the capabilities of the InfluxDB platform to develop a JavaScript-enabled time-series-based application. It collects, stores and displays a set of values that include temperature, humidity, pressure, CO2 concentration, air quality, as well as provide GPS coordinates from a set of IoT devices. With this data stored in InfluxDB, the application can query this data for display as well as write data back into the database.
This hands-on workshop will show students how to install this open source code to learn how to query and write to InfluxDB using the InfluxDB JavaScript client, and gain familiarity with the Flux lang query language which is designed for querying, analyzing, and acting on time series data. And finally, collect and visualize performance data of the Node JS application.
Prerequisites
Registered free InfluxDB Cloud account at https://cloud2.influxdata.comThree options available (via Google account, via Microsoft account or via email)Test login after the registration and save credentials for the workshopInstallation of the git tool (e.g. from https://git-scm.com/downloads)IoT Center cloneRun: git clone https://github.com/bonitoo-io/iot-center-v2Installed nodejs (from https://nodejs.org/en/download)Installed yarn package manager (from https://classic.yarnpkg.com/en/docs/install)Installed required packagesIn the cloned directoryRun: cd appRun: yarn install