Getting physical with web bluetooth in the browser
1 like560 views
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.
![@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/85/Getting-physical-with-web-bluetooth-in-the-browser-38-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-39-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-40-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-41-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-42-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-43-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-44-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-45-320.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/85/Getting-physical-with-web-bluetooth-in-the-browser-46-320.jpg)
Getting physical with web bluetooth in the browser
- 1. Getting Physical with Web Bluetooth in the browser Dan Jenkins @dan_jenkins
- 4. @dan_jenkins Ever wished you could "click" on things in real life and find out more about them?
- 7. @dan_jenkins But there are many other places where we want to interact with something around us
- 9. @dan_jenkins
- 10. @dan_jenkins
- 11. @dan_jenkins How do I use this magic?
- 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. @dan_jenkins
- 16. @dan_jenkins
- 17. @dan_jenkins How do I use this magic?
- 18. @dan_jenkins Eddystone • Open Message Format • A few 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 iOS and 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. @dan_jenkins
- 21. @dan_jenkins When you add in Progressive Web Apps, your reason for having a Native app dwindles
- 22. @dan_jenkins And they're being used today
- 25. @dan_jenkins And there are beacons here today
- 28. @dan_jenkins Your browser can connect to Bluetooth Low Energy (BLE) devices directly
- 29. @dan_jenkins Using JavaScript, we can now connect to physical devices using BLE and control them
- 30. @dan_jenkins
- 32. @dan_jenkins BLE (not just toys) 32
- 33. @dan_jenkins BLE (not just toys) 33
- 34. @dan_jenkins BLE (okay... a fair few toys) 34
- 35. @dan_jenkins Stepping back, what is 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 Gatt Server Custom ServiceBattery Service Battery Level Characteristic Custom Characteristic #1 Custom Characteristic #1
- 37. @dan_jenkins Let's take a look 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 if the device was broadcasting a URL where it can be controlled from?
- 48. @dan_jenkins
- 49. @dan_jenkins Today, there's no way to bypass that device selection Which kinda sucks
- 50. @dan_jenkins But that's changing soon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 51. @dan_jenkins But that's changing soon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 52. @dan_jenkins Where can I play 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 more info... https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md
- 54. @dan_jenkins And you have to enable it... chrome://flags
- 55. @dan_jenkins Oh and only on Localhost & HTTPS... There are quite a few hoops!
- 56. @dan_jenkins Loads of demos out there https://webbluetoothcg.github.io/demos/
- 57. @dan_jenkins And you can make your own peripherals BBC micro:bit Arduino Tessel Raspberry Pi 3
- 58. @dan_jenkins In the past 2 months developing for Web Bluetooth has become easier
- 60. @dan_jenkins Hardware with BLE is cheap
- 61. @dan_jenkins And you don't need 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)
- 65. @dan_jenkins There are less and less reasons to build native apps
- 66. @dan_jenkins goo.gl/7uAtkY 3 great Google I/O videos about the Physical Web and Web Bluetooth
- 68. @dan_jenkins We're hiring Developers! Remote / Node.js / JavaScript / VoIP / WebRTC / Other Cool Sh*t