A presentation at Mobile Era 2018 in in Oslo, Norway by Niels Leenheer
fun with bluetooth
why?
progressive web apps
pwa’s ! are great
but...
but...
bluetooth
bluetooth s k c su
classic bluetooth vs. y d o b y r h e t v o e o t n e o u s l a b e s r e t e th ha control dr on es and oth bluetooth low energy er cool shi t
bluetooth low energy also known as B l Bluetooth Smar t uetooth LE B l u e t o o t h 4 BLE
bluetooth low energy also known as B l Bluetooth Smar t uetooth LE B l u e t o o t h 4 and 5 BLE
10 million bluetooth devices shipping every day
m e n o h p e obil
computer
r o t i n o m e s o c u gl e m o s d n a h s ' y bod
activity tracker
u b y a pl s lb e r e h p b l u b y a l p
8 b b o i r e h p s
e n o r d i n parrot mi
r e n n i p s t fidge
the boring theoretical stuff
central peripheral
central
generic attribute profile
generic attribute profile ?
generic attribute profile a w p a g e s u a c e b , t t a g n e k a t y d a e r l a s
central peripheral client server
§ i device information light e c i v e d r e p s e c i v r e s e l p i t l mu
i device information battery flight control
i device information battery steering control
i device information battery heart rate
i device information battery heart rate
i device information battery heart rate
i device information manufacturer model number serial number hardware revision firmware revision software revision ... s c i t s i r e t c a r a h c e l e p c i i t v l r e s mu r e p
server service characteristic value array of objects object property value
services and characteristics are identified by uuid’s 16 bit or 1 28 bit
i device information 16 bit 128 bit 0x180A 0000180A-0000-1000-8000-00805F9B34FB
battery 16 bit 128 bit 0x180F 0000180F-0000-1000-8000-00805F9B34FB
steering control light still, ever y body does 16 bit 128 bit flight c this not recommended any UUID outside of the range xxxxxxxx-0000-1000-8000-00805F9B34FB
i device information manufacturer model number serial number hardware revision firmware revision software revision ...
i 0x180A 0x2A29 0x2A24 0x2A25 0x2A27 0x2A26 0x2A28 ... b good fo ad for rea r saving dability bandwi , dth
s t r o p p u s c i t s i r e t e c s a e r h a t h f c o each one or more read write write without response notify
every value is an array of bytes s e t y b st no d y c n fa u j , s e p y t a t a
pfew...
s t c a f g n i r o b t u o ab fun with bluetooth
fun with bluetooth
web bluetooth still not t he fun pa rt :-( api
connecting to a device
navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) t a h w r e s w o r b e h t l l e we t t n a w e w e c i v e d f o d kin .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ); }) ])
s t c e l e s r e s u e th al device u t c a the
navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] }) .then(device => { .... }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) 7 1 0 2 o s e r a .then(characteristic => e{ s s i m o r return characteristic.writeValue( p new Uint8Array([ 0x00, r, g, b ); ])
let device = await 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 ); }) ])
let device = await navigator.bluetooth.requestDevice({ filters: [ { namePrefix: 'PLAYBULB' } ], optionalServices: [ 0xff0f ] }); r e v r e s e h t o ect t conn let server = await device.gatt.connect()); let service = await server.getPrimaryService(0xff0f)); let characteristic = await service.getCharacteristic(0xfffc)); e c i v r e s e get th .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ); }) ]) c i t s i r e t c a r a h c e h get t
writing data
w s e t y b e m o s e rit let let let let device = await navigator.bluetooth.requestDevice({ ... }); server = await device.gatt.connect()); service = await server.getPrimaryService(0xff0f)); characteristic = await service.getCharacteristic(0xfffc)); characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ); ])
reading data
e m o s d er a s e t y b let let let let device = await navigator.bluetooth.requestDevice({ ... }); server = await device.gatt.connect()); service = await server.getPrimaryService(0xff0f)); characteristic = await service.getCharacteristic(0xfffc)); let value = await characteristic.readValue(); let r = value.getUint8(1); let g = value.getUint8(2); let b = value.getUint8(3);
get notified of changes
add r e n e t s i l t n e v e let let let let device = await navigator.bluetooth.requestDevice({ ... }); server = await device.gatt.connect()); service = await server.getPrimaryService(0xff0f)); characteristic = await service.getCharacteristic(0xfffc)); characteristic.addEventListener( 'characteristicvaluechanged', e => { let r = e.target.value.getUint8(1); let g = e.target.value.getUint8(2); let b = e.target.value.getUint8(3); } ); don't forget to star t listen ing characteristic.startNotifications();
things you need to know: • the webbluetooth api • promises (or async await) • typed arrays d ! h u
custom characteristics. wtf!
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) } } fro g n i d a e r d n a o t g writin c i t s i r e t c a r a h c e m a s e h t m
writing a value: function(r, g, b) { return new Uint8Array([ 0x01, g, 0x01, 0x00, 0x01, b, 0x01, r, 0x01, 0x00 ]); } t n e r r u c e h t g n i read e l b i s s o p t o n s i r colo
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; } t n e r r u c e h t g n i read e l b i s s o p t o n s i r colo
writing a value: function(r, g, b, position) { let buffer = new Uint8Array([ 0x07, 0x02, position + 1, r, g, b ]); return buffer; }
writing a value: function(r, g, b, position) { let buffer = new Uint8Array([ 0x58, r, g, b, 0x01, position ]); ...
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 => {
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; }
adafruit bluetooth sniffer
log all bluetooth packets on your phone o t b d a e g s o l u e d n a nsfer th a r t
o t k r a h s a e t r a i d w e e s u k at th o o l
decompiling the apk t ' n do ! e n o y n a l tel
finally t he fun p ar t demo
warning experimental technology w o l g n i t set s n o i t a t c e p x e
warning wifi interference r e h t r u f n e v e m e h t g n loweri
fun with bluetooth !
questions? @htm l5test
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.
The following resources were mentioned during the presentation or are useful additional information.
Code for the demos
Official standards for Bluetooth services
Documentation for some proprietary Bluetooth services
The Nordic Thingy is a multi-sensor device that I use in some of my demos. And if you are one of the lucky ones to get one after my talk, use this link to find out more about the capabilities and how to use it using WebBluetooth.
Run JavaScript on microcontrollers to create your own Bluetooth devices with just a couple of lines of JavaScript. With support for various Nordic Semi based devices, including the Nordic Thingy.
Here’s what was said about this presentation on social media.
