Happy holiday folks! All the best from us at Digitpaint
🔔

Day 23

Connecting with the Web Bluetooth API

What if you could change the colour of the light bulb in your living room to match your mood, without using an app, but directly from your browser? Wouldn't that be awesome?* The Web Bluetooth API lets you do just that!

In this demo we'll show you a video of how we control a light bulb in the browser. Since sending out light bulbs all over the globe is kind of expensive, we decided to make a video of how we control a light bulb in the browser.

This video shows this example by Google in combination with a Playbulb Candle.

So What is the Web Bluetooth API?

Bluetooth has been around since 1994. But until now, only native apps had the ability to interact with Bluetooth devices. The Web Bluetooth API is going to change that. The Web Bluetooth API allows you to interact with devices from the web. Just open your browser, pair with a nearby Bluetooth Low Energy (BLE) device and manage it from within your browser. You don’t even need to be online to connect to a local device, just make sure that you have Bluetooth enabled.

What could we use it for?

There are lots of cool applications for Web Bluetooth. How about light bulbs that change colour according to the weather? Or how about the many States in the USA that allow people to access their doctors over the internet with a webcam. What if the website could also detect the heart rate of the patient via a Bluetooth heart rate device? Or less practical, even a bit obscure, but how about a flying grumpy cat?

Try yourself

If you want to control your own light bulb, or flying grumpy cat, what do you need?

  1. A device that supports Web Bluetooth, so an Android 6, Mac OSX with Bluetooth 4 capable hardware, Linux, or Chrome OS.
  2. A BLE device to connect to. Anything will do, just make sure it is Bluetooth 4 and a Bluetooth Low Energy device.
  3. The Web Bluetooth API heavily relies on Promises, so make sure you're familiar with Promises first.
  4. In order to use Web Bluetooth, your site must be served over a secure connection (HTTPS).

How does it work?

Let's take a look at he code below to understand the basics of the Web Bluetooth API. In the example below we're going to get some battery level information of BLE device using the API. The example below show a simple button with an ID to identify it.

The API is exposed under the navigator.bluetooth JavaScript namespace. Since a user action is required to discover BLE devices with navigator.bluetooth.requestDevice, we're going to attach an eventListener to the click event on our button. Of course you can also listen for user gestures like pointerup and mouseend.

button.addEventListener('click', function() {
  navigator.bluetooth.requestDevice({
    filters: [{
      services: ['battery_service']
    }]
  }).then(device => {
    return device.gatt.connect()
  })
  .then(server => {
    return server.getPrimaryService('battery_service');
  })
  .then(service => {
    return service.getCharacteristic('battery_level');
  })
  .then(characteristic => {
    return characteristic.readValue();
  })
  .then(value => {
    // The value: value.getUint8(0);
  })
  .catch(error => { console.log(error); });
});  

The navigator.bluetooth.requestDevice method calls up a dialog showing a list of all available BLE devices matching our query filter. In the example above, we filter on BLE devices advertising a so-called “GATT service” called battery_service. Besides filtering on a certain service, you can also filter on name or a namePrefix

navigator.bluetooth.requestDevice asks the user to grant access to a device that matches any filter in the options.filter. Once the user has selected a device, the method can then print out the device name and its ID.

Does it have any limitations?

At the moment Web Bluetooth API can only communicate with Bluetooth Low Energy devices.

Browser compatibility

So what's the support for the Web Bluetooth API? It currently work in Opera and in Chrome, although the support varies per Operating System

  • Chrome
  • Chrome for Android
  • Opera

Further Reading

* Controling lights may just be a gimmick, but it's just one of the 1.000.000 things you could do with Web Bluetooth…

Demo source code

Do you want to dig in the nitty-gritty of the battery level demo, check out the source file:

Did you know that Bluetooth was named after a Viking King?

King Harald Gormsson is famous for ruling Denmark and Norway between about 940 and about 986, eventually uniting all of Scandinavia. Like many medieval kings, he had a nickname: Blåtand in Danish, or in English: Bluetooth. So Ericsson decided to name their 'wireless alternative to cables' after the Viking: Bluetooth.

Back to home