Fun with Bluetooth

A presentation at NLHTML5 in August 2018 in Rotterdam, Netherlands by Niels Leenheer

Slide 1

Slide 1

fun with bluetooth

Slide 2

Slide 2

why?

Slide 3

Slide 3

progressive 
 web apps

Slide 4

Slide 4

pwa’s are great !

Slide 5

Slide 5

but...

Slide 6

Slide 6

but...

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

bluetooth

Slide 10

Slide 10

bluetooth sucks

Slide 11

Slide 11

classic bluetooth the reason everybody 
 hates bluetooth bluetooth low energy vs. control drones and other cool shit

Slide 12

Slide 12

bluetooth low energy also known as BLE Bluetooth LE Bluetooth Smart Bluetooth 4

Slide 13

Slide 13

bluetooth low energy also known as BLE Bluetooth LE Bluetooth Smart Bluetooth 4 and 5

Slide 14

Slide 14

10 million


 bluetooth devices 
 shipping every day

Slide 15

Slide 15

mobile phone

Slide 16

Slide 16

computer

Slide 17

Slide 17

glucose monitor somebody's hand

Slide 18

Slide 18

activity tracker

Slide 19

Slide 19

playbulb sphere playbulb

Slide 20

Slide 20

spherio bb-8

Slide 21

Slide 21

parrot mini drone

Slide 22

Slide 22

fi dget spinner

Slide 23

Slide 23

the boring theoretical stuff

Slide 24

Slide 24

central peripheral

Slide 25

Slide 25

central

Slide 26

Slide 26

generic attribute profile

Slide 27

Slide 27

generic attribute profile ?

Slide 28

Slide 28

generic attribute profile gatt, because gap was already taken

Slide 29

Slide 29

client server

central peripheral

Slide 30

Slide 30

server service characteristic value array of objects object property value

Slide 31

Slide 31

services and characteristics are identified by uuid’s 16 bit or 128 bit

Slide 32

Slide 32

read write write without response notify each characteristic supports
one or more of these

Slide 33

Slide 33

every value is an array of bytes no fancy datatypes, just bytes

Slide 34

Slide 34

pfew...

Slide 35

Slide 35

Slide 36

Slide 36

fun

with

bluetooth boring facts 
 about

Slide 37

Slide 37

fun with bluetooth

Slide 38

Slide 38

 web


 bluetooth
api still not the fun part :-(

Slide 39

Slide 39

connecting to a device

Slide 40

Slide 40

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 ]) ); }) we tell the browser what 
 kind of device we want

Slide 41

Slide 41

the user selects
the actual device

Slide 42

Slide 42

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)) .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) promises are so 2017

Slide 43

Slide 43

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 ]) ); })

Slide 44

Slide 44

let device = await navigator.bluetooth.requestDevice({ filters: [
{ namePrefix: 'PLAYBULB' }
], optionalServices: [ 0xff0f ] }); let server = await device.gatt.connect()); let service = await server.getPrimaryService(0xff0f)); let characteristic = await service.getCharacteristic(0xfffc)); .then(characteristic => { return characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) get the characteristic get the service connect to the server

Slide 45

Slide 45

writing data

Slide 46

Slide 46

let device = await navigator.bluetooth.requestDevice({ ... }); let server = await device.gatt.connect()); let service = await server.getPrimaryService(0xff0f)); let characteristic = await service.getCharacteristic(0xfffc)); 
 characteristic.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); write some bytes

Slide 47

Slide 47

reading data

Slide 48

Slide 48

let device = await navigator.bluetooth.requestDevice({ ... }); let server = await device.gatt.connect()); let service = await server.getPrimaryService(0xff0f)); let 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); read some bytes

Slide 49

Slide 49

get notified of changes

Slide 50

Slide 50

let device = await navigator.bluetooth.requestDevice({ ... }); let server = await device.gatt.connect()); let service = await server.getPrimaryService(0xff0f)); let 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); } ); characteristic.startNotifications(); add event listener don't forget to start listening

Slide 51

Slide 51

things you need to know: • the webbluetooth api • promises (or async await) • typed arrays duh!

Slide 52

Slide 52

custom
characteristics . wtf!

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

writing a value: 
 function(r, g, b, position) { let buffer = new Uint8Array([
0x07, 0x02, position + 1, r, g, b
]); return buffer; }

Slide 57

Slide 57

writing a value: 
 function(r, g, b, position) { let buffer = new Uint8Array([
0x58, r, g, b, 0x01, position ]); ...

Slide 58

Slide 58

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 => { 
 value === 0x01 || value === 0x02 || value == 0x03 


Slide 59

Slide 59

        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; 

}

Slide 60

Slide 60

adafruit 
 bluetooth 
 sniffer

Slide 61

Slide 61

log all 
 bluetooth 
 packets 
 on your phone and use adb to 
 transfer the log

Slide 62

Slide 62

use wireshark to 
 look at the data 


Slide 63

Slide 63

decompiling


 the apk don't tell anyone!

Slide 64

Slide 64

demofinally the fun part

Slide 65

Slide 65

warning experimental technology 
 setting low expectations

Slide 66

Slide 66

warning wifi interference 
 lowering them even further

Slide 67

Slide 67

Slide 68

Slide 68

fun with bluetooth !

Slide 69

Slide 69

questions? @html5test