Download to read offline
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-38-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-39-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-40-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-41-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-42-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-43-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', boop);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function boop(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-44-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-45-2048.jpg)
![@dan_jenkins
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options)
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService('heart_rate'))
.then(service => service.getCharacteristic('heart_rate_measurement'))
.then(characteristic => {
characteristic.addEventListener('characteristicvaluechanged', beep);
return characteristic.startNotifications();
})
.catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowseremf-160805135704/75/Getting-physical-with-web-bluetooth-in-the-browser-46-2048.jpg)
Uploaded byDan Jenkins
Getting physical with web bluetooth in the browser
This document discusses getting physical with Web Bluetooth in the browser. It begins with an introduction to the Physical Web and how it allows interacting with nearby devices. It then demonstrates how to use the Web Bluetooth API to connect to and read data from Bluetooth Low Energy devices like heart rate monitors directly from the browser. It notes that Web Bluetooth support is currently limited but improving. The document encourages building things that connect the physical world to the web using these new browser capabilities.
More Related Content
Similar to Getting physical with web bluetooth in the browser
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-aifortheunderdogsinnovationforsmallbusinesses-251124030839-72a599a4-thumbnail.jpg?width=640&height=640&fit=bounds)
Getting physical with web bluetooth in the browser
- 1. Getting Physical with WebBluetooth in the browser Dan Jenkins @dan_jenkins
- 2.
- 3.
- 4. @dan_jenkins Ever wished youcould "click" on things in real life and find out more about them?
- 5.
- 6.
- 7. @dan_jenkins But there are manyother places where we want to interact with something around us
- 8.
- 9.
- 10.
- 11. @dan_jenkins How do Iuse this magic?
- 12.
- 13.
- 14. @dan_jenkins Android iOS • Location& Bluetooth turned on • Android "Nearby" enabled (default) https://android.googleblog.com/2016/06/introducing-nearby-new-way-to-discover.html • Bluetooth turned on • Chrome Notifications enabled (Allow the Chrome widget in Notification Center) https://docs.pushmote.com/docs/how-to-enable-chromes-physical-web-extension-on-the-ios
- 15.
- 16.
- 17. @dan_jenkins How do Iuse this magic?
- 18. @dan_jenkins Eddystone • Open Message Format • Afew different parts to Eddystone but all we care about here is Eddystone URL format • Eddystone URLs have 18 bytes worth of data that can be broadcast • Eddystone is supported by over 30 vendors • Eddystone is also compatible with iBeacon • https://developers.google.com/beacons/eddystone
- 19. @dan_jenkins Chrome• Chrome on iOSand Nearby on Android scans for BLE beacons with Eddystone URLs • Chrome only supports HTTPS URLs • Chrome then sends those URLs up to Google's Proxy service (does some extra magic) • The Proxy service then sends those URLs back to Chrome • Chrome/Nearby shows a notification So all of this doesn't work unless you have data!
- 20.
- 21. @dan_jenkins When you addin Progressive Web Apps, your reason for having a Native app dwindles
- 22. @dan_jenkins And they're beingused today
- 23.
- 24.
- 25. @dan_jenkins And there arebeacons here today
- 26.
- 27.
- 28. @dan_jenkins Your browser can connectto Bluetooth Low Energy (BLE) devices directly
- 29. @dan_jenkins Using JavaScript, we cannow connect to physical devices using BLE and control them
- 30.
- 31.
- 32. @dan_jenkins BLE (not justtoys) 32
- 33. @dan_jenkins BLE (not justtoys) 33
- 34. @dan_jenkins BLE (okay... afair few toys) 34
- 35. @dan_jenkins Stepping back, whatis BLE? • Low Bandwidth • Bluetooth v4 - Bluetooth Low Energy (0.3 Mbps) • Bluetooth v3 (54 Mbps) • A set of Standard Services • But you can also build your own services
- 36. @dan_jenkins BLE GATT Server GattServer Custom ServiceBattery Service Battery Level Characteristic Custom Characteristic #1 Custom Characteristic #1
- 37. @dan_jenkins Let's take alook at the Web Bluetooth API
- 38. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 39. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 40. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 41. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 42. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 43. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 44. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', boop); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function boop(event) { console.log(event.target.value); }
- 45. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 46. @dan_jenkins var options ={ filters: [{ services: ['heart_rate'] }] }; navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); }); function beep(event) { console.log(event.target.value); }
- 47. @dan_jenkins But what ifthe device was broadcasting a URL where it can be controlled from?
- 48.
- 49. @dan_jenkins Today, there's noway to bypass that device selection Which kinda sucks
- 50. @dan_jenkins But that's changingsoon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 51. @dan_jenkins But that's changingsoon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 52. @dan_jenkins Where can Iplay with Web Bluetooth today? In short.... Chrome/Chromium on... Android M & N ChromeOS Linux Android L with Chromium OSX (Chrome 53)
- 53. @dan_jenkins But for moreinfo... https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md
- 54. @dan_jenkins And you haveto enable it... chrome://flags
- 55. @dan_jenkins Oh and onlyon Localhost & HTTPS... There are quite a few hoops!
- 56. @dan_jenkins Loads of demosout there https://webbluetoothcg.github.io/demos/
- 57. @dan_jenkins And you canmake your own peripherals BBC micro:bit Arduino Tessel Raspberry Pi 3
- 58. @dan_jenkins In the past2 months developing for Web Bluetooth has become easier
- 59.
- 60. @dan_jenkins Hardware with BLEis cheap
- 61. @dan_jenkins And you don'tneed to use ChromeOS or Android now
- 62. @dan_jenkins Physical Web &Web Bluetooth Some beacons now run a GATT server inside them They run a "Eddystone URL Configuration Service"
- 63. @dan_jenkins Physical Web &Web Bluetooth http://cf.physical-web.org (redirects to a HTTPS url)
- 64.
- 65. @dan_jenkins There are less andless reasons to build native apps
- 66. @dan_jenkins goo.gl/7uAtkY 3 great GoogleI/O videos about the Physical Web and Web Bluetooth
- 67.
- 68. @dan_jenkins We're hiring Developers! Remote /Node.js / JavaScript / VoIP / WebRTC / Other Cool Sh*t