Download as PDF, PPTX
![@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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-51-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-52-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-53-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-54-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-55-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-56-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-57-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-58-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/gettingphysicalwithwebbluetoothinthebrowserhackference-161021141256/75/Getting-physical-with-web-bluetooth-in-the-browser-hackference-59-2048.jpg)
Uploaded byDan Jenkins
Getting physical with web bluetooth in the browser hackference
The document discusses getting physical with web Bluetooth in the browser. It describes how the Physical Web and Web Bluetooth APIs allow browsers to detect and interact with Bluetooth Low Energy devices in the real world. The Physical Web allows browsers to detect URLs broadcast by nearby beacons, while Web Bluetooth provides JavaScript APIs to discover, connect to, and read from/write to BLE devices directly from the browser. Examples are given of reading heart rate measurements from a fitness tracker using Web Bluetooth. Requirements and browser support are also outlined.
Technologyā¦
More Related Content
Similar to Getting physical with web bluetooth in the browser hackference
![[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-agenticaiarchitectureredefiningsystemcommunication-251124030838-e6c70cc2-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 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-themodernstackbuildingwebaiapplicationswithserverless-251124030844-388cf04f-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)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Getting physical with web bluetooth in the browser hackference
- 1. Getting Physical with WebBluetooth in the browser Dan Jenkins @dan_jenkins
- 2.
- 3. @dan_jenkins Wouldn't it be coolto interact with real life using JavaScript In the Browser?
- 4.
- 5. @dan_jenkins And being able touse it. With the Web.
- 6. @dan_jenkins Drones, BB8, Fitbits, Adulttoys... Bluetooth Low Energy
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. @dan_jenkins Ever wished youcould "click" on things in real life and find out more about them?
- 13.
- 14.
- 15. @dan_jenkins But there are manyother places where we want to interact with something around us
- 16.
- 17.
- 18.
- 19. @dan_jenkins How do Iuse this magic?
- 20.
- 21.
- 22. @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 Notiļ¬cations enabled (Allow the Chrome widget in Notiļ¬cation Center) https://docs.pushmote.com/docs/how-to-enable-chromes-physical-web-extension-on-the-ios
- 23. @dan_jenkins Android caveat They've justrolled back to Chrome doing the Physical Web notiļ¬cations in latest Chrome for Android https://goo.gl/MrAXUw https://goo.gl/PMwBY2
- 24. @dan_jenkins Android caveat But that'llonly be for 6 or so weeks...
- 25.
- 26.
- 27.
- 28.
- 29. @dan_jenkins Anything that canemit using Bluetooth Low Energy
- 30. @dan_jenkins What makes upthe Physical Web?
- 31. @dan_jenkins Eddystone ā¢ Open Message Format ā¢ EddystoneURLs have 18 bytes worth of data that can be broadcast ā¢ https://developers.google.com/beacons/eddystone
- 32. @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 notiļ¬cation All of this doesn't work unless you have data & location turned on
- 33.
- 34. @dan_jenkins And they're beingused today
- 35.
- 36.
- 37. @dan_jenkins And there arebeacons here today
- 38. @dan_jenkins And you don'thave to use Chrome to get them https://www.phy.net/physical-web-browsers/
- 39. @dan_jenkins That's great for linkingthe Physical World to your Phone
- 40.
- 41.
- 42. @dan_jenkins Your browser can connectto Bluetooth Low Energy (BLE) devices directly
- 43. @dan_jenkins Using JavaScript, we cannow connect to physical devices using BLE and control them
- 44.
- 45. @dan_jenkins BLE (not justtoys) 45
- 46. @dan_jenkins BLE (not justtoys) 46
- 47. @dan_jenkins BLE (okay... afair few toys) 47
- 48. @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
- 49. @dan_jenkins BLE GATT Server GattServer Custom ServiceBattery Service Battery Level Characteristic Custom Characteristic #1 Custom Characteristic #1
- 50. @dan_jenkins Let's take alook at the Web Bluetooth API
- 51. @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); }
- 52. @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); }
- 53. @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); }
- 54. @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); }
- 55. @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); }
- 56. @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); }
- 57. @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); }
- 58. @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); }
- 59. @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); }
- 60. @dan_jenkins But what ifthe device was broadcasting a URL where it can be controlled from?
- 61.
- 62. @dan_jenkins Today, there's noway to bypass that device selection Which kinda sucks
- 63. @dan_jenkins But that's changingsoon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 64. @dan_jenkins But that's changingsoon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 65. @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) Windows (a little)
- 66. @dan_jenkins But for moreinfo... https://goo.gl/rDu2UT
- 67. @dan_jenkins And you haveto enable it... chrome://flags
- 68. @dan_jenkins But there isa Google Chrome Origin Trial ongoing https://goo.gl/hzczDR
- 69. @dan_jenkins And the Chrometeam has announced their intent to ship in 56 https://goo.gl/KMmjda
- 70. @dan_jenkins Oh and onlyon Localhost & HTTPS... There are quite a few hoops!
- 71. @dan_jenkins Loads of demosout there https://webbluetoothcg.github.io/demos/
- 72. @dan_jenkins And you canmake your own peripherals BBC micro:bit Arduino Tessel Raspberry Pi 3
- 73. @dan_jenkins Developing for Web Bluetoothhas become easier.
- 74. @dan_jenkins Unless you're developing on Windows...but that's changing too
- 75. @dan_jenkins Hardware with BLEis cheap
- 76. @dan_jenkins Your dev environment justneeds to have BLE (Bluetooth 4)
- 77.
- 78.
- 79. @dan_jenkins There are less andless reasons to build native apps
- 80. @dan_jenkins goo.gl/7uAtkY 3 great GoogleI/O videos about the Physical Web and Web Bluetooth
- 81.