$30 off During Our Annual Pro Sale. View Details »

Fun with Bluetooth @ code.talks 2017

Niels Leenheer
September 28, 2017

Fun with Bluetooth @ code.talks 2017

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.

Niels Leenheer

September 28, 2017
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

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. full screen
    offline support
    add to home screen
    push notifications

    View Slide

  6. full screen
    offline support
    location
    camera
    sensors
    network
    add to home screen
    push notifications

    View Slide

  7. full screen
    offline support
    location
    camera
    sensors
    network
    add to home screen
    push notifications

    View Slide

  8. ethernet 

    & wifi

    View Slide

  9. wifi

    View Slide

  10. zigbee?


    View Slide

  11. ethernet

    View Slide

  12. runs a webserver
    use fetch or 

    xmlhttprequest

    View Slide

  13. [{
    "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

    View Slide



  14. 1
    0

    http://192.168.2.23:80/

    urn:schemas-upnp-org:device:Basic:1Philips hue (192.168.2.23)
    Royal Philips Electronics
    http://192.168.2.23/description.xml
    2

    View Slide

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

    View Slide

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

    View Slide

  17. 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}}

    View Slide

  18. *click*
    *click*
    *reload*
    *click*

    View Slide

  19. this does 

    not work
    !

    View Slide

  20. https only http only
    no certificate 

    for you

    View Slide

  21. =
    network
    use remote api’s
    ≠ access to local devices

    View Slide

  22. hue remote api
    Also allow control from 

    outside the local network

    View Slide

  23. We are currently preparing for
    release of this remote API which
    will initially be available to a
    limited number of partners.

    — Philips

    View Slide

  24. 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
    not yet

    View Slide

  25. fun with
    bluetooth
    problems
    local networks

    View Slide

  26. fun with
    bluetooth

    View Slide

  27. bluetooth
    sucks

    View Slide

  28. classic bluetooth
    the reason everybody 

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

    View Slide

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

    View Slide

  30. playbulb sphere
    playbulb

    View Slide

  31. spherio bb-8

    View Slide

  32. parrot mini drone

    View Slide

  33. activity tracker

    View Slide

  34. the boring theoretical stuff

    View Slide

  35. central peripheral

    View Slide

  36. central

    View Slide

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

    View Slide

  38. central peripheral
    client server

    View Slide

  39. §
    i device information
    light
    multiple services per device

    View Slide

  40. i device information
    battery
    flight control

    View Slide

  41. i device information
    battery
    steering control

    View Slide

  42. i device information
    battery
    heart rate

    View Slide

  43. heart rate
    i device information
    battery

    View Slide

  44. i device information
    battery
    heart rate

    View Slide

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

    per service

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    good for saving bandwidth

    View Slide

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

    View Slide

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

    View Slide

  55. pfew...

    View Slide

  56. View Slide

  57. fun with
    bluetooth
    boring facts

    about

    View Slide

  58. fun with
    bluetooth

    View Slide

  59. web

    bluetooth
    api
    still not the fun part
    :-(

    View Slide

  60. connecting to a device

    View Slide

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

  62. the user selects
    the actual device

    View Slide

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

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

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

  66. writing data

    View Slide

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

  68. reading data

    View Slide

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

  70. get notified of changes

    View Slide

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

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

    View Slide

  73. browser support
    Chrome Opera Samsung

    (behind flag)
    Servo

    (soon)

    View Slide

  74. browser support
    Chrome Opera Samsung

    (behind flag)
    kinda works
    Servo

    (soon)
    WebBLE

    for iOS

    View Slide

  75. custom
    characteristics.
    wtf!

    View Slide

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

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

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

  79. reading a value:
    add event listener
    write a specific value
    get the event with the color
    1
    2
    3
    service 0xffe0

    characteristic 0xffe4
    service 0xffe5

    characteristic 0xffe9

    View Slide

  80. demo
    finally the fun part

    View Slide

  81. warning
    experimental technology

    setting low expectations

    View Slide

  82. warning
    wifi interference

    lowering them even further

    View Slide

  83. View Slide

  84. https:/
    /bulb.blue/tooth/

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

    of a lightbulb

    View Slide

  85. https:/
    /bricks.blue/tooth/
    https:/
    /github.com/NielsLeenheer/BluetoothRacer
    control a lego racer 

    using a gamepad
    use css animations to 

    define a path

    View Slide

  86. https:/
    /webdr.one

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

    from your browser

    View Slide

  87. https:/
    /pulse.blue/tooth/

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

    current heartbeat

    View Slide

  88. physical web

    View Slide

  89. battery lasts years
    beacon
    really small

    View Slide

  90. broadcast the url

    of a web app
    easy to open from 

    the home screen

    View Slide

  91. coming soon
    automatic
    web bluetooth

    connection

    View Slide

  92. taking it one step further

    View Slide

  93. runs javascript
    physical web beacon
    supports 

    web bluetooth api
    has a button

    View Slide

  94. peripheral

    mode

    View Slide

  95. central

    mode

    View Slide

  96. View Slide

  97. fun with
    bluetooth
    !

    View Slide

  98. questions?
    @html5test

    View Slide