Getting Physical with Web Bluetooth in the Browser Full Stack Toronto
4 likes603 views
This document discusses getting physical with Web Bluetooth in the browser. It begins by introducing the concept of interacting with real-life devices using JavaScript in the browser. It then provides an overview of the Physical Web and Web Bluetooth APIs, explaining how users can see Physical Web notifications on their phones and how developers can control Bluetooth Low Energy devices from a web page using JavaScript. It also discusses current browser support for the Web Bluetooth API and pointers for where to find demos and develop Web Bluetooth applications.
![@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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-51-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-52-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-53-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-54-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-55-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-56-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-57-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-58-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/gettingphysicalwithwebbluetoothinthebrowserfullstacktoronto-161018160313/85/Getting-Physical-with-Web-Bluetooth-in-the-Browser-Full-Stack-Toronto-59-320.jpg)
Getting Physical with Web Bluetooth in the Browser Full Stack Toronto
- 1. Getting Physical with Web Bluetooth in the browser Dan Jenkins @dan_jenkins
- 3. @dan_jenkins Wouldn't it be cool to interact with real life using JavaScript In the Browser?
- 5. @dan_jenkins And being able to use it. With the Web.
- 6. @dan_jenkins Drones, BB8, Fitbits, Adult toys... Bluetooth Low Energy
- 7. @dan_jenkins Let's take a step back
- 8. @dan_jenkins What is this magic?
- 12. @dan_jenkins Ever wished you could "click" on things in real life and find out more about them?
- 15. @dan_jenkins But there are many other places where we want to interact with something around us
- 17. @dan_jenkins
- 18. @dan_jenkins
- 19. @dan_jenkins How do I use this magic?
- 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 Notifications enabled (Allow the Chrome widget in Notification Center) https://docs.pushmote.com/docs/how-to-enable-chromes-physical-web-extension-on-the-ios
- 23. @dan_jenkins Android caveat They've just rolled back to Chrome doing the Physical Web notifications in latest Chrome for Android https://goo.gl/MrAXUw https://goo.gl/PMwBY2
- 24. @dan_jenkins Android caveat But that'll only be for 6 or so weeks...
- 25. @dan_jenkins
- 29. @dan_jenkins Anything that can emit using Bluetooth Low Energy
- 30. @dan_jenkins What makes up the Physical Web?
- 31. @dan_jenkins Eddystone • Open Message Format • Eddystone URLs have 18 bytes worth of data that can be broadcast • https://developers.google.com/beacons/eddystone
- 32. @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 All of this doesn't work unless you have data & location turned on
- 33. @dan_jenkins
- 34. @dan_jenkins And they're being used today
- 37. @dan_jenkins And there are beacons here today
- 38. @dan_jenkins And you don't have to use Chrome to get them https://www.phy.net/physical-web-browsers/
- 39. @dan_jenkins That's great for linking the Physical World to your Phone
- 42. @dan_jenkins Your browser can connect to Bluetooth Low Energy (BLE) devices directly
- 43. @dan_jenkins Using JavaScript, we can now connect to physical devices using BLE and control them
- 44. @dan_jenkins
- 45. @dan_jenkins BLE (not just toys) 45
- 46. @dan_jenkins BLE (not just toys) 46
- 47. @dan_jenkins BLE (okay... a fair few toys) 47
- 48. @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
- 49. @dan_jenkins BLE GATT Server Gatt Server Custom ServiceBattery Service Battery Level Characteristic Custom Characteristic #1 Custom Characteristic #1
- 50. @dan_jenkins Let's take a look 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 if the device was broadcasting a URL where it can be controlled from?
- 61. @dan_jenkins
- 62. @dan_jenkins Today, there's no way to bypass that device selection Which kinda sucks
- 63. @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); }); }
- 64. @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); }); }
- 65. @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) Windows (a little)
- 66. @dan_jenkins But for more info... https://goo.gl/rDu2UT
- 67. @dan_jenkins And you have to enable it... chrome://flags
- 68. @dan_jenkins But there is a Google Chrome Origin Trial ongoing https://goo.gl/hzczDR
- 69. @dan_jenkins And the Chrome team has announced their intent to ship in 56 https://goo.gl/KMmjda
- 70. @dan_jenkins Oh and only on Localhost & HTTPS... There are quite a few hoops!
- 71. @dan_jenkins Loads of demos out there https://webbluetoothcg.github.io/demos/
- 72. @dan_jenkins And you can make your own peripherals BBC micro:bit Arduino Tessel Raspberry Pi 3
- 73. @dan_jenkins Developing for Web Bluetooth has become easier, for sure; eh.
- 74. @dan_jenkins Unless you're developing on Windows... but that's changing too
- 75. @dan_jenkins Hardware with BLE is cheap
- 76. @dan_jenkins Your dev environment just needs to have BLE (Bluetooth 4)
- 79. @dan_jenkins There are less and less reasons to build native apps
- 80. @dan_jenkins goo.gl/7uAtkY 3 great Google I/O videos about the Physical Web and Web Bluetooth