What is a Bluetooth API in web API?
Web Bluetooth API
The web Bluetooth API provides the ability to connect and interact with Bluetooth Low Energy peripherals, according to developer.mozilla.org.
Experimental technology
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.
Free Resources
- undefined by undefined
