The web Bluetooth API provides the ability to connect and interact with Bluetooth Low Energy peripherals, according to developer.mozilla.org.
This API lets us access the Bluetooth low energy device on our phone and use it to share data from a webpage to another device. Imagine being able to create a web chat app that can send and receive messages from other phones via Bluetooth. The possibilities are endless.
The basic API is navigator.bluetooth.requestDevice
; this API makes the browser prompt the user with a device chooser, where they can pick one device or cancel the request.
navigator.bluetooth.requestDevice
takes a mandatory object. This object defines filters that are used to return Bluetooth devices that match the filters. Let’s see a simple demo that uses the navigator.bluetooth.requestDevice
API to retrieve basic device information from a BLE device.
<body>
<header>
<h2>Web APIs<h2>
</header>
<div>
<div>
<div>
Demo - Bluetooth
</div>
<div>
<div id="error"></div>
<div>
<div>Device Name: <span id="dname"></span></div>
<div>Device ID: <span id="did"></span></div>
<div>Device Connected: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">Get BLE Device</button>
</div>
</div>
</div>
</div>
</body>
<script>
function bluetoothAction(){
if(navigator.bluetooth) {
navigator.bluetooth.requestDevice({
acceptAllDevices: true
}).then(device => {
dname.innerHTML = device.name
did.innerHTML = device.id
dconnected.innerHTML = device.connected
}).catch(err => {
error.innerHTML = "Oh my!! Something went wrong."
error.classList.remove("close")
})
} else {
error.innerHTML = "Bluetooth is not supported."
error.classList.remove("close")
}
}
</script>
The device’s information is displayed here. The “Get BLE Device” button calls the bluetoothAction
function when clicked.
function bluetoothAction(){
navigator.bluetooth.requestDevice({
acceptAllDevices: true
}).then(device => {
dname.innerHTML = device.name
did.innerHTML = device.id
dconnected.innerHTML = device.connected
}).catch(err => {
console.error("Oh my!! Something went wrong.")
})
}
The bluetoothAction
function calls the navigator.bluetooth.requestDevice
API with an option of acceptAllDevices: true
. This makes it scan and list all nearby Bluetooth-active devices. It returns a promise, so we resolve it to get a param device from the callback function. This device param holds the information of a listed Bluetooth device. This is where we display the information on the device using its properties.
Try it here.