Web Bluetooth

How to control a drone from your browser and more

Peter O'Shaughnessy

@poshaughnessy

Samsung Internet

bit.ly/what-is-samsung-internet

ByBox

ByBox Stockonnect app by pebble {code} and ByBox

The physical world and the digital world are merging...

...And your smartphone is at the centre.

Anki Overdrive

Pokemon Go Plus watch

Bluetooth friends

Bluetooth Low Energy

BLE

Can constantly advertise presence
Can last years on coin cell batteries
~100 kbps throughput (vs 24 Mbps!)

Generic ATTributes (GATT)

GATT

BLE characteristic properties

BLE comms

Hex in JavaScript

0xff === 255
parseInt('ff', 16) === 255
ArrayBuffer, Uint8Array and DataView

bit.ly/html5-rocks-typed-arrays-guide

// Length of 12 bytes
let buffer = new ArrayBuffer(12);

// ...Read data into the buffer...

let array = new Uint8Array(buffer);

// Gives e.g. 255 / 0xff:
let my8BitInt = array[0];

let buffer = new ArrayBuffer(12);
let dataView = new DataView(buffer);

// Gives e.g. 255 / 0xff:
let my8BitInt = dataView.getUint8(0);

JavaScript-friendly options

Node
Cordova
React Native
Web Bluetooth

Web Bluetooth

caniuse.com

Chrome
Chrome for Android (Marshmallow +)
Opera
Firefox OS

Origin Trial

Chrome Beta or Chrome Dev (Chrome stable soon)

Register at: bit.ly/WebBluetoothOriginTrial

More info: bit.ly/OriginTrials

Samsung Internet

Samsung Internet logo

Watch this space...

navigator.bluetooth.requestDevice({
  filters: [{
    name: 'SomeAmazingRobot'
  }],
  optionalServices: ['battery_service']
})
...

Bluetooth pairing prompt

  ...
  .then(device => device.connectGATT())  
  .then(server => server.getPrimaryService('batt_service'))
  .then(service => service.getCharacteristic('batt_level'))
  .then(characteristic => {
    // Read battery level
    return characteristic.readValue();
  })
  .then(value => {
    let batteryLevel = value.getUint8(0);
    // Or you could do: 
    // let array = new Uint8Array(value.buffer);
    // batteryLevel = array[0];
    console.log(`Battery level: ${batteryLevel}`);
  });