Fun with Bluetooth @ Frontend United

Time for the browser to get physical. With WebBluetooth the browser can actually take control of all kinds of physical devices in the real world like lightbulbs, robots and even drones. This talk will teach you the basics that you need to get started and will show you some more advanced topics like building your own Bluetooth devices using just JavaScript.

Transcript

1. fun with bluetooth
2. why?
3. progressive 
 web apps
4. pwa’s are great !
5. but...
6. but...
9. ethernet 
 & wifi
10. wifi
11. zigbee?

12. ethernet
13. runs a webserver use fetch or 
 xmlhttprequest
14. [{ "id":"001788fffe100491", "internalipaddress":"192.168.2.23", "macaddress":"00:17:88:10:04:91", "name":"Philips Hue" }, { "id":"001788fffe09a168", "internalipaddress":"192.168.88.252" }, https://www.meethue.com/api/nupnp 1
15. <root xmlns="urn:schemas-upnp-org:device-1-0"> <specVersion> <major>1</major> <minor>0</minor> </specVersion> <URLBase>http://192.168.2.23:80/</URLBase> <device> <deviceType>urn:schemas-upnp-org:device:Basic:1</deviceT <friendlyName>Philips hue (192.168.2.23)</friendlyName> <manufacturer>Royal Philips Electronics</manufacturer> http://192.168.2.23/description.xml 2
16. http://192.168.2.23/api
 {"devicetype": "hue_pwa#pixel_xl"} 3 [{"success":{"username": "........"}}] User presses physical button on the hub *click* save to local storage
17. http://192.168.2.23/api
 {"devicetype": "hue_pwa#pixel_xl"} 3 [{"success":{"username": "........"}}] User presses physical button on the hub *click* save to local storage
18. 4 { "1": { "state": { "on": true, "bri": 144, "hue": 13088, "sat": 212, "xy": [0.5128,0.4147], "ct": 467, "alert": "none", http://192.168.2.23/api/......../lights
19. http://192.168.2.23/api/......../lights/1/state
 { "hue": 50000, "on": true, "bri": 200 } 5 [ {"success":{"/lights/1/state/bri":200}}, {"success":{"/lights/1/state/on":true}}, {"success":{"/lights/1/state/hue":50000}}
20. *click* *click* *reload* *click*
21. this does 
 not work !
22. https only http only no certificate 
 for you
23. = network use remote api’s = access to local devices
24. hue remote api also allow control from 
 outside the local network
25. We are currently preparing for release of this remote API which will initially be available to a limited number of partners. “ — Philips
26. We are currently preparing for release of this remote API which will initially be available to a limited number of partners. “ — Philips two years ago very just nest, 
 google assistant 
 and ifttt
28. fun with bluetooth problems local networks
29. fun with bluetooth
30. bluetooth
31. bluetooth sucks
32. classic bluetooth the reason everybody 
 hates bluetooth bluetooth low energy vs. control drones and other cool shit
33. bluetooth low energy also known as BLE Bluetooth LE Bluetooth Smart Bluetooth 4
34. bluetooth low energy also known as BLE Bluetooth LE Bluetooth Smart Bluetooth 4 and 5
35. 10 million 
 bluetooth devices
 shipping every day
36. mobile phone
37. computer
38. glucose monitor somebody's hand
39. activity tracker
40. playbulb sphere playbulb
41. spherio bb-8
42. parrot mini drone
43. fidget spinner
44. the boring theoretical stuff
45. central peripheral
46. central
47. generic attribute profile
48. generic attribute profile ?
49. generic attribute profile gatt, because gap was already taken
50. central peripheral client server
51. § i device information light multiple services per device
52. i device information battery flight control
53. i device information battery steering control
54. i device information battery heart rate
55. heart rate i device information battery
56. i device information battery heart rate
57. i device information manufacturer model number serial number hardware revision firmware revision software revision ... multiple characteristics 
 per service
58. server service characteristic value array of objects object property value
59. services and characteristics are identified by uuid’s 16 bit or 128 bit
60. 0x180A 0000180A-0000-1000-8000-00805F9B34FB 16 bit 128 bit i device information
61. 0x180F 0000180F-0000-1000-8000-00805F9B34FB 16 bit 128 bit battery
62. not recommended any UUID outside of the range
 xxxxxxxx-0000-1000-8000-00805F9B34FB 16 bit 128 bit light steering control flight c still, everybody does this
63. i device information manufacturer model number serial number hardware revision firmware revision software revision ...
64. i 0x180A 0x2A29 0x2A24 0x2A25 0x2A27 0x2A26 0x2A28 ... bad for readability, 
 good for saving bandwidth
65. read write write without response notify each characteristic supports one or more of these
66. every value is an array of bytes no fancy datatypes, just bytes
67. pfew...
69. fun with bluetooth boring facts
 about
70. fun with bluetooth
71. web
 bluetooth api still not the fun part :-(
72. connecting to a device
73. navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) 1 we tell the browser what 
 kind of device we want
74. the user selects the actual device
75. navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) 2 connect to the server
76. navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) 3 get the service
77. navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) 4 get the characteristic
78. writing data
79. navigator.bluetooth.requestDevice({ ... }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(c => { return c.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) write some bytes
80. reading data
81. navigator.bluetooth.requestDevice({ ... }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(c => c.readValue()) .then(value => { let r = value.getUint8(1); let g = value.getUint8(2); let b = value.getUint8(3); }) read some bytes
82. get notified of changes
83. navigator.bluetooth.requestDevice({ ... }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(c => { c.addEventListener('characteristicvaluechanged', e => { let r = e.target.value.getUint8(1); let g = e.target.value.getUint8(2); let b = e.target.value.getUint8(3); }); c.startNotifications(); }) add event listener don't forget to start listening
84. things you need to know: • the webbluetooth api • promises • typed arrays duh!
85. browser support Chrome Opera Samsung Servo
 (soon)
86. browser support Chrome Opera Samsung Servo
 (soon) Safari
87. browser support Chrome Opera Samsung Servo
 (soon) Safari
88. browser support Chrome Opera Samsung kinda works Servo
 (soon) WebBLE
 for iOS
89. and...
90. and... npm install node-web-bluetooth
91. and... npm install cordova-plugin-webbluetooth
92. and... the puck.js
93. custom characteristics. wtf!
94. writing a value: function(r, g, b) { return new Uint8Array([ 0x00, r, g, b ]); } reading a value: function(buffer) { return { 
 r: buffer.getUint8(1), 
 g: buffer.getUint8(2), 
 b: buffer.getUint8(3) 
 } } writing to and reading
 from the same characteristic
95. writing a value: function(r, g, b) { return new Uint8Array([ 0x01, g, 0x01, 0x00, 0x01, 
 b, 0x01, r, 0x01, 0x00 
 ]); } reading the current 
 color is not possible
96. writing a value: 
 function(r, g, b) { var buffer = new Uint8Array([ 
 0xaa, 0x0a, 0xfc, 0x3a, 0x86, 0x01, 0x0d, 
 0x06, 0x01, r, g, b, 0x00, 0x00, 
 (Math.random() * 1000) & 0xff, 0x55, 0x0d 
 ]); for (var i = 1; i < buffer.length - 2; i++) { buffer[15] += buffer[i]; } return buffer; } reading the current 
 color is not possible
97. writing a value: 
 function(r, g, b, position) { let buffer = new Uint8Array([ 0x07, 0x02, position + 1, r, g, b ]); return buffer; }
98. writing a value: 
 function(r, g, b, position) { let buffer = new Uint8Array([ 0x58, r, g, b, 0x01, position ]); ...
99. writing a value: 
 function(r, g, b, position) { let buffer = new Uint8Array([ 0x58, r, g, b, 0x01, position ]); let payload = new Uint8Array(buffer.length + 4); payload[0] = payload.length - 2; payload[1] = payload.length - 2 >>> 8; payload.set(buffer, 2); let checksum = payload.reduce((a, b) => a + b, 0); payload[payload.length - 2] = checksum; payload[payload.length - 1] = checksum >>> 8; let extra = payload.filter(value => {

100. message[m] = 0x03; message[m + 1] = 0x05; m += 2; } else if (payload[i] === 0x03) { message[m] = 0x03; message[m + 1] = 0x06; m += 2; } else { message[m] = payload[i]; m++; } } message[0] = 0x01; message[message.length - 1] = 0x02; return message; }
101. adafruit
 bluetooth 
 sniffer
102. decompiling 
 the apk don't tell anyone!
103. demo finally the fun part
104. warning experimental technology
 setting low expectations
105. warning wifi interference
 lowering them even further
106. #frontendunited
108. https:/ /bluetooth.rocks/lightbulb
 https:/ /github.com/BluetoothRocks/Lightbulb change the colour 
 of a lightbulb
109. https:/ /bluetooth.rocks/pixel
 https:/ /github.com/BluetoothRocks/Matrix draw pixel art on 
 a led matrix display
110. https:/ /bluetooth.rocks/racer https:/ /github.com/BluetoothRocks/Racer control a lego racer 
 using a gamepad use css animations to 
 define a path
111. https:/ /bluetooth.rocks/drone
 https:/ /github.com/BluetoothRocks/Drone control a drone 
 from your browser
112. https:/ /bluetooth.rocks/printer
 https:/ /github.com/BluetoothRocks/TweetPrinter print on a receipt printer
113. https:/ /bluetooth.rocks/pulse
 https:/ /github.com/BluetoothRocks/Pulse find out your 
 current heartbeat
114. fun with bluetooth !
115. questions? @html5test