Download as PDF, PPTX
![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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-31-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-32-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-33-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-34-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-35-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-36-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-37-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-38-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/85/Getting-physical-with-web-bluetooth-in-the-browser-39-320.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-31-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-32-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-33-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-34-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-35-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-36-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-37-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-38-2048.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); }](https://image.slidesharecdn.com/gettingphysicalwithwebbluetoothinthebrowser-160602131540/75/Getting-physical-with-web-bluetooth-in-the-browser-39-2048.jpg)
Uploaded byDan Jenkins
Getting physical with web bluetooth in the browser
The document discusses new capabilities for interacting with physical devices from the browser using Web Bluetooth and the Physical Web. It provides an overview of how Web Bluetooth allows JavaScript to connect to and control Bluetooth Low Energy devices. The Physical Web allows beacons to broadcast URLs that are picked up by browsers and turned into notifications. Together these open up new possibilities for interacting with physical objects using web technologies without native apps. The document also shares code samples and discusses the current implementation status.
More Related Content
Similar to Getting physical with web bluetooth in the browser
Getting physical with web bluetooth in the browser
- 1. Getting Physical with WebBluetooth in the browser Dan Jenkins @dan_jenkins
- 2.
- 3.
- 4. Ever wished youcould "click" on things in real life and find out more about them?
- 5.
- 6.
- 7. But there are manyother places where we want to interact with something around us
- 8.
- 11. How do Iuse this magic?
- 12. Eddystone • Open Message Format • Afew 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
- 13. Chrome • Chrome on iOSand 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!
- 15. When you addin Progressive Web Apps, your reason for having a Native app dwindles
- 16. And they're beingused today
- 17.
- 18.
- 19. And there arebeacons here today
- 20.
- 21.
- 22. Your browser can connectto Bluetooth Low Energy (BLE) devices directly
- 23. Using JavaScript, we cannow connect to physical devices using BLE and control them
- 25. BLE (not justtoys) 25
- 26. BLE (not justtoys) 26
- 27. BLE (okay... afair few toys) 27
- 28. Stepping back, whatis 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
- 29. BLE GATT Server GattServer Custom ServiceBattery Service Battery Level Characteristic Custom Characteristic #1 Custom Characteristic #1
- 30. Let's take alook at the Web Bluetooth API
- 31. 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); }
- 32. 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); }
- 33. 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); }
- 34. 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); }
- 35. 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); }
- 36. 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); }
- 37. 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); }
- 38. 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); }
- 39. 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); }
- 40. Today, there's noway to bypass that device selection Which kinda sucks
- 41. But that's changingsoon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 42. But that's changingsoon too var referringDevice = navigator.bluetooth.referringDevice; if (referringDevice) { referringDevice.gatt.connect() .then(server => { ... }) .catch(error => { console.log(error); }); }
- 43. Where can Iplay with Web Bluetooth today? In short.... Chrome/Chromium on... Android M & N ChromeOS Linux
- 44. But for moreinfo... https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md
- 45. And you haveto enable it...
- 46. Oh and onlyon Localhost & HTTPS... There are quite a few hoops!
- 47. Loads of demosout there https://webbluetoothcg.github.io/demos/
- 48. And you canmake your own peripherals BBC micro:bit Arduino Tessel Raspberry Pi 3
- 49. But developing with WebBluetooth isn't exactly easy right now...
- 50. If you havethe required devices then GREAT!
- 51. If you don't,it kinda sucks...
- 52.
- 53. Well, this didn'tgo to plan...
- 60. Physical Web &Web Bluetooth Some beacons now run a GATT server inside them They run a "Eddystone URL Configuration Service"
- 61. Physical Web &Web Bluetooth http://cf.physical-web.org (redirects to a HTTPS url)
- 62.
- 63. Less and less reasonsto build native apps
- 64. goo.gl/7uAtkY 3 great GoogleI/O videos about the Physical Web and Web Bluetooth
- 65.