Connect to Bluetooth Devices From Web Browser

In this tutorials, we’re going to use javascript to setup the BleuIO and quickly start scanning or advertising as an iBeacon or an Eddystone simply by pressing a button.

Before we start

The article assumes you have some general knowledge of how Bluetooth Low Energy (BLE) work. Since the Chrome Serial specification on Google Chrome is not finalized yet, you will have to go to enable the highlighted flag, and restart Chrome.

Things we need :

• Google chrome
• BleuIO, Bluetooth Low Energy USB dongle*

Step 1: Setup Chrome

open chrome://flags/#enable-experimental-web-platform-features in chrome browser and

enable the #enable-experimental-web-platform-features flag in chrome://flags

Step 2: Copy Script

You can also the source code from GITHUB PAGE.

The script contains

index.html

Here we create a simple html page with a title, buttons and a field to display the output. We also add a textbox that will show up if the user doesn’t meet the requirements for Chrome Serial.

script.js

This script handles the functionality. We hook up our buttons with click-listeners and write the functions we need. By running:

port = await navigator.serial.requestPort(); from the serial api we can get list of avalible com ports. Then we connect to that port and start listening for input from the dongle. The “make ibeacon” and "make eddystone" button uses ‘writeCmd()’ and access the appropriate AT commands available on the dongle to turn the device as beacon.

In the ‘readLoop()’ function we just print out everything we get from the dongle to the ‘log’ element. But you could just as well listen for the response message after a command that signals that the action has been successful or not (like OK, ADVERTISING or ERROR etc.) and handle that and print what you like as response.

style.css

It gives basic styling to the script.

The output looks like the image.

Step 3: Run the Script

Run the web app by simply opening index.html in the Chrome web browser.

Make sure BleuIO is connected to your computer. Click Connect and wait a moment for your device to show up on the port screen. Select your device and press Connect.

Once the device is connected. You will be able to start scanning for nearly devices or turn the device in iBeacon or Eddystone Beacon.

Follow this video for more details.

Good Luck.