Under the Hood: Sensors in the Browser with Web Bluetooth

Web Bluetooth makes connecting sensors to a browser easier than ever before. All you need is a Bluetooth Low Energy sensor and the Chrome browser. No plugins or additional software are needed.

Five years ago, we prototyped an Ethernet-enabled Arduino, which made sensors in the Web browser possible without installing any software. (See “Under the Hood: Streaming Arduino Data to a Browser” in the Spring 2012 @Concord.) However, that solution was not easy to use on mobile devices, relied on a hidden feature of most operating systems, and was not supported by any educational sensor vendors. We then created a background service that connects many wired educational sensors to the browser called SensorConnector. Unfortunately, background services like the SensorConnector can only run on desktops and require an administrator to install them.

Bluetooth Low Energy (BLE) and Web Bluetooth solve all these problems. BLE is supported by every modern mobile and desktop operating system. Earlier this year, Web Bluetooth was released by Google for Chrome on Chromebook, Android, Linux, and OS X as an API that web pages can use to communicate with BLE devices. No plugins or apps are needed to use Web Bluetooth on the supported platforms. This is exciting because BLE sensors are cheap and easy to create. For $25 you can purchase a full-featured Arduino-compatible BLE device. Or for $35 you can get a Raspberry Pi with built-in BLE support.* With lots of examples and support groups, the Arduino and Raspberry Pi ecosystems are easy starting points to build custom browser-connected devices.

Even more exciting is that two of the major educational sensor vendors have already created several BLE sensors. We’re currently working with these vendors to see if we can connect to their devices directly from the browser, and we hope to have examples of these connections sometime next year.

In the meantime, we’ve put together a simple demo that connects with the TI SensorTag, a small, cheap self-contained device with multiple built-in sensors (Figure 1). Most important, it has a simple documented interface. Figure 2 shows example code that reads the light value every second. Getting the data out of the TI SensorTag is done using the GATT protocol, which is a key part of BLE. This protocol defines how central devices like phones or desktops send data back and forth to peripheral devices like the SensorTag. The GATT protocol data is divided into services. Each service can have one or more characteristics, which contain numbers or strings that can be read from or written to. Web Bluetooth provides an asynchronous API, so it’s easy to work with the GATT system of services and characteristics. And the SensorTag uses GATT effectively, which makes it simple to retrieve data from it. Other devices do not take this approach, so it can be harder to pull data out of them.

device = await navigator.bluetooth.requestDevice({
  filters: [{ services:[SENSOR_TAG_ID] }],
  optionalServices:[LIGHT_SERVICE_ADDR]});

server = await device.gatt.connect();

service = await server.getPrimaryService(LIGHT_SERVICE_ADDR);

enableChar = await service.getCharacteristic(LIGHT_ENABLE_ADDR);
await enableChar.writeValue(new Uint8Array([0x01]));

valueChar = await service.getCharacteristic(LIGHT_VALUE_ADDR);

setInterval(async () => {

  byteArray = await valueChar.readValue();

  lightValue = byteArray.getUint16(0, true);

  displayLight(lightValue);

},1000);

We’re passionate about making tools that open up opportunities for inquiry to as many people as possible. We’re excited these latest developments make sensors even easier to connect to browsers.

* We purchased these devices in 2017. Prices may change.

Scott Cytacki (scytacki@concord.org) is a Senior Software Engineer.

This material is based upon work supported by the National Science Foundation under grant DRL-1621301. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.

Even deeper under the hood

• Find more information about using await here, here, and here.
• A more robust bit of code for connecting to the SensorTag
• A working demo (Note: This is experimental software and may have issues.)