Getting physical with web bluetooth in the browser
-
Upload
dan-jenkins -
Category
Technology
-
view
553 -
download
0
Transcript of Getting physical with web bluetooth in the browser
![Page 1: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/1.jpg)
Gett ing Physical with Web Bluetooth
in the browserDan Jenkins
@dan_jenkins
![Page 3: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/3.jpg)
Gett ing Physical
Physical
![Page 4: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/4.jpg)
Ever wished you could "click" on things in real life and find
out more about them?
![Page 5: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/5.jpg)
Been somewhere
that had these?
![Page 6: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/6.jpg)
They're everywhere!
![Page 7: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/7.jpg)
But there are many other
places where we want to interact with something around us
![Page 8: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/8.jpg)
The Physical Web
![Page 9: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/9.jpg)
![Page 10: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/10.jpg)
![Page 11: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/11.jpg)
How do I use this magic?
![Page 12: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/12.jpg)
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
![Page 13: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/13.jpg)
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!
![Page 14: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/14.jpg)
![Page 15: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/15.jpg)
When you add in Progressive Web Apps,
your reason for having a Native app dwindles
![Page 16: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/16.jpg)
And they're being used today
![Page 17: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/17.jpg)
http://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/
![Page 18: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/18.jpg)
http://www.proxama.com/news/proxama-partners-with-google-to-deliver-worlds-first-physical-web-experience-for-consumers/
![Page 19: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/19.jpg)
And there are beacons here today
![Page 20: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/20.jpg)
BUT, There's more...
![Page 21: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/21.jpg)
Web Bluetooth
![Page 22: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/22.jpg)
Your browser can connect to
Bluetooth Low Energy (BLE) devices directly
![Page 23: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/23.jpg)
Using JavaScript, we can now connect to
physical devices using BLE and control them
![Page 24: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/24.jpg)
![Page 25: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/25.jpg)
BLE (not just toys)
25
![Page 26: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/26.jpg)
BLE (not just toys)
26
![Page 27: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/27.jpg)
BLE (okay... a fair few toys)
27
![Page 28: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/28.jpg)
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
![Page 29: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/29.jpg)
BLE GATT ServerGatt Server
Custom ServiceBattery Service
Battery Level Characteristic
Custom Characteristic #1
Custom Characteristic #1
![Page 30: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/30.jpg)
Let's take a look at the Web Bluetooth API
![Page 31: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/31.jpg)
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); }
![Page 32: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/32.jpg)
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); }
![Page 33: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/33.jpg)
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); }
![Page 34: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/34.jpg)
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); }
![Page 35: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/35.jpg)
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); }
![Page 36: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/36.jpg)
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); }
![Page 37: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/37.jpg)
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); }
![Page 38: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/38.jpg)
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); }
![Page 39: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/39.jpg)
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); }
![Page 40: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/40.jpg)
Today, there's no way to bypass that device
selection
Which kinda sucks
![Page 41: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/41.jpg)
But that's changing soon toovar referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
![Page 42: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/42.jpg)
But that's changing soon toovar referringDevice = navigator.bluetooth.referringDevice;
if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
![Page 43: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/43.jpg)
Where can I play with Web Bluetooth today?
In short.... Chrome/Chromium on...
Android M & N ChromeOS Linux
![Page 44: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/44.jpg)
But for more info...
https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md
![Page 45: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/45.jpg)
And you have to enable it...
![Page 46: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/46.jpg)
Oh and only on Localhost & HTTPS...
There are quite a few hoops!
![Page 47: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/47.jpg)
Loads of demos out there
https://webbluetoothcg.github.io/demos/
![Page 48: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/48.jpg)
And you can make your own peripherals
BBC micro:bit
Arduino
Tessel
Raspberry Pi 3
![Page 49: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/49.jpg)
But developing with Web Bluetooth isn't
exactly easy right now...
![Page 50: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/50.jpg)
If you have the required devices then GREAT!
![Page 51: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/51.jpg)
If you don't, it kinda sucks...
![Page 52: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/52.jpg)
DEMO
![Page 53: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/53.jpg)
Well, this didn't go to plan...
![Page 54: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/54.jpg)
![Page 55: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/55.jpg)
![Page 56: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/56.jpg)
![Page 57: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/57.jpg)
![Page 58: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/58.jpg)
![Page 59: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/59.jpg)
![Page 60: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/60.jpg)
Physical Web & Web Bluetooth
Some beacons now run a GATT server inside them
They run a "Eddystone URL Configuration Service"
![Page 61: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/61.jpg)
Physical Web & Web Bluetooth
http://cf.physical-web.org (redirects to a HTTPS url)
![Page 62: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/62.jpg)
Build th ings with the Web
![Page 63: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/63.jpg)
Less and less reasons to
build native apps
![Page 64: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/64.jpg)
goo.gl/7uAtkY
3 great Google I/O videos about the Physical Web
and Web Bluetooth
![Page 65: Getting physical with web bluetooth in the browser](https://reader031.fdocuments.in/reader031/viewer/2022030305/5871b05c1a28abda6a8b6771/html5/thumbnails/65.jpg)
Thanks!@dan_jenkins