Fun with Bluetooth @ Halfstack

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
   

   View Slide

2. why?
   

   View Slide

3. progressive 

   web apps
   

   View Slide

4. pwa’s
   are great
   !
   

   View Slide

5. but...
   

   View Slide

6. but...
   

   View Slide

7. View Slide

8. bluetooth
   

   View Slide

9. bluetooth
   sucks
   

   View Slide

10. classic bluetooth
    the reason everybody 

    hates bluetooth
    bluetooth low energy
    vs.
    control drones and other cool shit
    

    View Slide

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

    View Slide

12. playbulb sphere
    playbulb
    

    View Slide

13. spherio bb-8
    

    View Slide

14. parrot mini drone
    

    View Slide

15. activity tracker
    

    View Slide

16. the boring theoretical stuff
    

    View Slide

17. central peripheral
    

    View Slide

18. central
    

    View Slide

19. generic attribute profile
    

    View Slide

20. generic attribute profile ?
    

    View Slide

21. generic attribute profile
    gatt, because gap was already taken
    

    View Slide

22. central peripheral
    client server
    

    View Slide

23. §
    i device information
    light
    multiple services per device
    

    View Slide

24. i device information
    battery
    flight control
    

    View Slide

25. i device information
    battery
    steering control
    

    View Slide

26. i device information
    battery
    heart rate
    

    View Slide

27. heart rate
    i device information
    battery
    

    View Slide

28. i device information
    battery
    heart rate
    

    View Slide

29. i device information
    manufacturer
    model number
    serial number
    hardware revision
    firmware revision
    software revision
    ...
    multiple characteristics 

    per service
    

    View Slide

30. server
    service
    characteristic
    value
    array of objects
    object
    property
    value
    

    View Slide

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

    View Slide

32. 0x180A
    0000180A-0000-1000-8000-00805F9B34FB
    16 bit
    128 bit
    i device information
    

    View Slide

33. 0x180F
    0000180F-0000-1000-8000-00805F9B34FB
    16 bit
    128 bit
    battery
    

    View Slide

34. 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
    

    View Slide

35. i device information
    manufacturer
    model number
    serial number
    hardware revision
    firmware revision
    software revision
    ...
    

    View Slide

36. i 0x180A
    0x2A29
    0x2A24
    0x2A25
    0x2A27
    0x2A26
    0x2A28
    ...
    bad for readability, 

    good for saving bandwidth
    

    View Slide

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

    View Slide

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

    View Slide

39. pfew...
    

    View Slide

40. View Slide

41. fun with
    bluetooth
    boring facts

    about
    

    View Slide

42. fun with
    bluetooth
    

    View Slide

43. web

    bluetooth
    api
    still not the fun part
    :-(
    

    View Slide

44. connecting to a device
    

    View Slide

45. 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
    

    View Slide

46. the user selects
    the actual device
    

    View Slide

47. 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
    

    View Slide

48. 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
    

    View Slide

49. 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
    

    View Slide

50. writing data
    

    View Slide

51. 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
    

    View Slide

52. reading data
    

    View Slide

53. 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
    

    View Slide

54. get notified of changes
    

    View Slide

55. 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
    

    View Slide

56. things you need to know:
    • the webbluetooth api
    • promises
    • typed arrays
    duh!
    

    View Slide

57. browser support
    Chrome Opera Samsung

    (behind flag)
    Servo

    (soon)
    

    View Slide

58. browser support
    Chrome Opera Samsung

    (behind flag)
    kinda works
    Servo

    (soon)
    WebBLE

    for iOS
    

    View Slide

59. and...
    npm install node-web-bluetooth
    

    View Slide

60. and... the puck.js
    

    View Slide

61. custom
    characteristics.
    wtf!
    

    View Slide

62. 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
    

    View Slide

63. 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
    

    View Slide

64. 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
    

    View Slide

65. writing a value:
    

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

    View Slide

66. writing a value:
    

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

    View Slide

67. 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 => {

    

    View Slide

68. 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;
    }
    

    View Slide

69. adafruit

    bluetooth 

    sniffer
    

    View Slide

70. decompiling 

    the apk
    don't tell anyone!
    

    View Slide

71. demo
    finally the fun part
    

    View Slide

72. warning
    experimental technology

    setting low expectations
    

    View Slide

73. warning
    wifi interference

    lowering them even further
    

    View Slide

74. View Slide

75. https:/
    /bluetooth.rocks/lightbulb

    https:/
    /github.com/NielsLeenheer/BluetoothBulb
    change the colour 

    of a lightbulb
    

    View Slide

76. https:/
    /bluetooth.rocks/pixel
    draw pixel art on 

    a led matrix display
    

    View Slide

77. https:/
    /bluetooth.rocks/racer
    https:/
    /github.com/NielsLeenheer/BluetoothRacer
    control a lego racer 

    using a gamepad
    use css animations to 

    define a path
    

    View Slide

78. https:/
    /bluetooth.rocks/drone

    https:/
    /github.com/poshaughnessy/web-bluetooth-parrot-drone
    control a drone 

    from your browser
    

    View Slide

79. https:/
    /bluetooth.rocks/printer
    print on a receipt printer
    

    View Slide

80. https:/
    /bluetooth.rocks/pulse

    https:/
    /github.com/NielsLeenheer/BluetoothPulse
    find out your 

    current heartbeat
    

    View Slide

81. fun with
    bluetooth
    !
    

    View Slide

82. questions?
    @html5test
    

    View Slide