Embed Size (px)
Citation preview
Gett ing Physical with Web Bluetooth
in the browserDan Jenkins
@dan_jenkins
Gett ing Physical
Physical
Ever wished you could "click" on things in real life and find
out more about them?
Been somewhere
that had these?
They're everywhere!
But there are many other
places where we want to interact with something around us
The Physical Web
How do I use this magic?
Eddystone• Open Message Format
• A few different parts to Eddystone but all we care about here is Eddystone URL format
• Eddystone URLs have 18 bytes worth of data that can be broadcast
• Eddystone is supported by over 30 vendors
• Eddystone is also compatible with iBeacon
• https://developers.google.com/beacons/eddystone
Chrome• Chrome on iOS and Android scans for BLE beacons with Eddystone URLs
• Chrome only supports HTTPS URLs
• Chrome then sends those URLs up to Google's Proxy service (does some extra magic)
• The Proxy service then sends those URLs back to Chrome
• Chrome shows a notification
So all of this doesn't work unless you have data!
When you add in Progressive Web Apps,
your reason for having a Native app dwindles
And they're being used today
http://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/
http://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/
And there are beacons here today
BUT, There's more...
Web Bluetooth
Your browser can connect to
Bluetooth Low Energy (BLE) devices directly
Using JavaScript, we can now connect to
physical devices using BLE and control them
BLE (not just toys)
25
BLE (not just toys)
26
BLE (okay... a fair few toys)
27
Stepping back, what is BLE?• Low Bandwidth
• Bluetooth v4 - Bluetooth Low Energy (0.3 Mbps) • Bluetooth v3 (54 Mbps)
• A set of Standard Services • But you can also build your own services
BLE GATT ServerGatt Server
Custom ServiceBattery Service
Battery Level Characteristic
Custom Characteristic #1
Custom Characteristic #1
Let's take a look at the Web Bluetooth API
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', boop); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function boop(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
var options = { filters: [{ services: ['heart_rate'] }] };
navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('heart_rate')) .then(service => service.getCharacteristic('heart_rate_measurement')) .then(characteristic => { characteristic.addEventListener('characteristicvaluechanged', beep); return characteristic.startNotifications(); }) .catch(error => { console.log(error); });
function beep(event) { console.log(event.target.value); }
Today, there's no way to bypass that device
selection
Which kinda sucks
But that's changing soon toovar referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
But that's changing soon toovar referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
Where can I play with Web Bluetooth today?
In short.... Chrome/Chromium on...
Android M & N ChromeOS Linux
But for more info...
https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md
And you have to enable it...
Oh and only on Localhost & HTTPS...
There are quite a few hoops!
Loads of demos out there
https://webbluetoothcg.github.io/demos/
And you can make your own peripherals
BBC micro:bit
Arduino
Tessel
Raspberry Pi 3
But developing with Web Bluetooth isn't
exactly easy right now...
If you have the required devices then GREAT!
If you don't, it kinda sucks...
DEMO
Well, this didn't go to plan...
Physical Web & Web Bluetooth
Some beacons now run a GATT server inside them
They run a "Eddystone URL Configuration Service"
Physical Web & Web Bluetooth
http://cf.physical-web.org (redirects to a HTTPS url)
Build th ings with the Web
Less and less reasons to
build native apps
goo.gl/7uAtkY
3 great Google I/O videos about the Physical Web
and Web Bluetooth
Thanks!@dan_jenkins
