Web Bluetooth based web-application

This post is about sharing my experience with Web Bluetooth capability in Browser.

Web Bluetooth is a javascript module for enabling Browsers communicating to any BLE enabled device (eg. toys, phones, drones) via underlying bluetooth stack.

navigator.bluetooth is the package that enables us to access nearby BLE devices.

To get started, Go to chrome browser, open chrome://flags/#enable-experimental-web-platform-features, enable the highlighted flag, and restart Chrome for now

Basics of Bluetooth:

GAP – Generic Access Profile

                This is the basic advertising packets by any Bluetooth service, which exposes the data like name, mac id & strength.

GAP defines the role of the Bluetooth device,

• Peripheral role –  In this role, the device as a Slave which exposes a GATT profile. Once peripheral device is connected to a Central device, the advertising stops. Peripheral device can communicate with one central at a time.
• Central role – In this role, the device acts as Master, it connect to the peripheral devices. A Master can connect with multiple devices.

GATT – Generic Attribute Profile

                This defines the services & characteristics of the peripheral device. A GATT profile can have list of services, every service can have a list of characteristics, each characteristic have a 16-bit value.

A Service can have many characteristics, each characteristic can have optional descriptors & will have a data associated with it.

Each Service is identified by a Unique UUID (eg. 00003105-0000-1000-8000-00805f9b34fb) like-wise each characteristic will be identified by a Unique UUID.

Peripheral Devices are GATT Server which exposes service(s) with appropriate characteristic data value. Central Devices are GATT Client which requests the server for data.

Browser handshake with BLE Peripheral Device

navigator.bluetooth.requestDevice() – Initiates the scanning process based on the specified filter (or) all devices can be scanned by “acceptAllDevices:true” option. This script opens a pop-up with the list of devices around.

Scan Device List in Browser

device.gatt.connect() – After pairing the target device, gatt.connect() will return a GATT server promise.
server.getPrimaryService() – returns a promise of service object

service.getCharacteristic() – returns a promise of requested characteristic object

characteristic.readValue() – returns a ArrayBuffer object, on decoding with Text Decoder, actual data can be retrieved.

Based on the permissions on characteristic, the data can be updated using characteristic.writeValue(<ArrayBuffer>)

Sample HTML Page for Scanning BLE & Connect using Web BLE

Things to be explored:
Pairing based on crypto keys.

Improve performance in accessing BLE services.

Web Bluetooth Security Model

References:
Web Bluetooth Specification
Web Bluetooth Samples