Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting physical with web bluetooth in the browser hackference

707 views

Published on

Joining the Physical World up to the Web
Joining the Web up to the Physical World

Published in: Technology
  • Be the first to comment

Getting physical with web bluetooth in the browser hackference

  1. 1. Getting Physical with Web Bluetooth in the browser Dan Jenkins @dan_jenkins
  2. 2. @dan_jenkins Dan Jenkins @dan_jenkins nimblea.pe dan@nimblea.pe @nimbleapeltd Google Dev Expert
  3. 3. @dan_jenkins Wouldn't it be cool to interact with real life using JavaScript In the Browser?
  4. 4. @dan_jenkins Imagine walking up to something...
  5. 5. @dan_jenkins And being able to use it. With the Web.
  6. 6. @dan_jenkins Drones, BB8, Fitbits, Adult toys... Bluetooth Low Energy
  7. 7. @dan_jenkins Let's take a step back
  8. 8. @dan_jenkins What is this magic?
  9. 9. @dan_jenkins Physical Web
  10. 10. @dan_jenkins Web Bluetooth
  11. 11. @dan_jenkins Getting Physical Physical
  12. 12. @dan_jenkins Ever wished you could "click" on things in real life and find out more about them?
  13. 13. @dan_jenkins Been somewhere that had these?
  14. 14. @dan_jenkins They're everywhere!
  15. 15. @dan_jenkins But there are many other places where we want to interact with something around us
  16. 16. @dan_jenkins The Physical Web
  17. 17. @dan_jenkins
  18. 18. @dan_jenkins
  19. 19. @dan_jenkins How do I use this magic?
  20. 20. @dan_jenkins Seeing Physical Web Notifications
  21. 21. @dan_jenkins Android or iOS
  22. 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. 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. 24. @dan_jenkins Android caveat But that'll only be for 6 or so weeks...
  25. 25. @dan_jenkins
  26. 26. @dan_jenkins Transmitting Physical Web URLs
  27. 27. @dan_jenkins Beacons
  28. 28. @dan_jenkins Apps
  29. 29. @dan_jenkins Anything that can emit using Bluetooth Low Energy
  30. 30. @dan_jenkins What makes up the Physical Web?
  31. 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. 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. 33. @dan_jenkins
  34. 34. @dan_jenkins And they're being used today
  35. 35. @dan_jenkinshttp://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/
  36. 36. @dan_jenkinshttp://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/
  37. 37. @dan_jenkins And there are beacons here today
  38. 38. @dan_jenkins And you don't have to use Chrome to get them https://www.phy.net/physical-web-browsers/
  39. 39. @dan_jenkins That's great for linking the Physical World to your Phone
  40. 40. @dan_jenkins BUT, There's more...
  41. 41. @dan_jenkins Web Bluetooth
  42. 42. @dan_jenkins Your browser can connect to Bluetooth Low Energy (BLE) devices directly
  43. 43. @dan_jenkins Using JavaScript, we can now connect to physical devices using BLE and control them
  44. 44. @dan_jenkins
  45. 45. @dan_jenkins BLE (not just toys) 45
  46. 46. @dan_jenkins BLE (not just toys) 46
  47. 47. @dan_jenkins BLE (okay... a fair few toys) 47
  48. 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. 49. @dan_jenkins BLE GATT Server Gatt Server Custom ServiceBattery Service Battery Level Characteristic Custom Characteristic #1 Custom Characteristic #1
  50. 50. @dan_jenkins Let's take a look at the Web Bluetooth API
  51. 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. 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. 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. 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. 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. 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. 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. 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. 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. 60. @dan_jenkins But what if the device was broadcasting a URL where it can be controlled from?
  61. 61. @dan_jenkins
  62. 62. @dan_jenkins Today, there's no way to bypass that device selection Which kinda sucks
  63. 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. 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. 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. 66. @dan_jenkins But for more info... https://goo.gl/rDu2UT
  67. 67. @dan_jenkins And you have to enable it... chrome://flags
  68. 68. @dan_jenkins But there is a Google Chrome Origin Trial ongoing https://goo.gl/hzczDR
  69. 69. @dan_jenkins And the Chrome team has announced their intent to ship in 56 https://goo.gl/KMmjda
  70. 70. @dan_jenkins Oh and only on Localhost & HTTPS... There are quite a few hoops!
  71. 71. @dan_jenkins Loads of demos out there https://webbluetoothcg.github.io/demos/
  72. 72. @dan_jenkins And you can make your own peripherals BBC micro:bit Arduino Tessel Raspberry Pi 3
  73. 73. @dan_jenkins Developing for Web Bluetooth has become easier.
  74. 74. @dan_jenkins Unless you're developing on Windows... but that's changing too
  75. 75. @dan_jenkins Hardware with BLE is cheap
  76. 76. @dan_jenkins Your dev environment just needs to have BLE (Bluetooth 4)
  77. 77. @dan_jenkins One last demo
  78. 78. @dan_jenkins Build things with the Web
  79. 79. @dan_jenkins There are less and less reasons to build native apps
  80. 80. @dan_jenkins goo.gl/7uAtkY 3 great Google I/O videos about the Physical Web and Web Bluetooth
  81. 81. @dan_jenkins Thanks! @dan_jenkins

×