![@joel__lord
#midwestjs
Web Bluetooth API
• First, we need to connect to a device.
• Requires a mandatory service filter
navigator.bluetooth.requestDevice({ filters: [
{ services: ['heart_rate'] }
]})
.then(device => { /* ... */ })
.catch(error => { console.log(error); });](https://image.slidesharecdn.com/getphysical-170818161541/75/lets-get-physical-41-2048.jpg?cb=1670438135)
![@joel__lord
#midwestjs
Web Bluetooth API
• First, we need to connect to a device.
• Requires a mandatory service filter
navigator.bluetooth.requestDevice({ filters: [
{ services: ['heart_rate'] }
]})
.then(device => { /* ... */ })
.catch(error => { console.log(error); });](https://image.slidesharecdn.com/getphysical-170818161541/75/lets-get-physical-42-2048.jpg?cb=1670438135)
![@joel__lord
#midwestjs
Web Bluetooth API
• First, we need to connect to a device.
• Requires a mandatory service filter
navigator.bluetooth.requestDevice({ filters: [
{ services: ['heart_rate'] }
]})
.then(device => { /* ... */ })
.catch(error => { console.log(error); });](https://image.slidesharecdn.com/getphysical-170818161541/75/lets-get-physical-44-2048.jpg?cb=1670438135)
![@joel__lord
#midwestjs
Web Bluetooth API
• First, we need to connect to a device.
• Requires a mandatory service filter
navigator.bluetooth.requestDevice({ filters: [
{ services: ['heart_rate'] }
]})
.then(device => { /* ... */ })
.catch(error => { console.log(error); });](https://image.slidesharecdn.com/getphysical-170818161541/75/lets-get-physical-45-2048.jpg?cb=1670438135)
Let's Get Physical
•0 likes•279 views
Report
Share
Download to read offline
Did you know that your web sites can now talk to actual bluetooth devices around it? With new initiatives like the Physical Web and new APIs like Web Bluetooth, it’s now easier than ever to interact with hardware using nothing but Web technologies. In this talk, you will learn how to broadcast URLs to nearby devices and how to control hardware via bluetooth. All of this using plain old vanilla Javascript.
More Related Content
Similar to Let's Get Physical
Similar to Let's Get Physical(20)
More from Joel Lord
More from Joel Lord(20)
Recently uploaded
Recently uploaded(10)
Let's Get Physical
- 3. @joel__lord #midwestjs Our Agenda for today… • What is Bluetooth • The Physical Web • Web Bluetooth API • Demos, code and lots of fun • Q&A
- 7. @joel__lord #midwestjs Why use it? • Available on modern devices • Stable • Good Range • Connectivity • Auto Pair
- 13. @joel__lord #midwestjs For more on Bluetooth specs: https://www.bluetooth.com/specifications/gatt
- 15. @joel__lord #midwestjs The Physical Web • Everything is a tap away • See what’s useful around you • Any object or place can broadcast content
- 21. @joel__lord #midwestjs What you need • A URL that you want to broadcast • Has to resolve to HTTPS and public • Has to be less than 18 characters • A phone or device that can receive nearby notifications
- 28. @joel__lord #midwestjs Broadcast that URL • You will need • Compatible Bluetooth 4.0 USB adapter or built-in BT (Macbook Pro) • NodeJs • See full list of requirements
- 30. @joel__lord #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
- 31. @joel__lord #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
- 32. @joel__lord #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
- 33. @joel__lord #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
- 34. @joel__lord #midwestjs Broadcast that URL var beacon = require("eddystone-beacon"); var options = { name: "MyBeacon" }; var url = "https://goo.gl/SuTBBh"; beacon.advertiseUrl(url, options);
- 37. @joel__lord #midwestjs What about controlling devices? • Available in Chrome 56 and Chrome for Android M • Lets you: • Request and connect to nearby Bluetooth devices • Read and write Bluetooth Characteristics • Receive GATT Notifications • Know about disconnects
- 38. @joel__lord #midwestjs What about controlling devices? • Still experimental • Full specs here • Only Google implementing it so far • Security is a big concern
- 39. @joel__lord #midwestjs What about controlling devices • You will need a compatible browser • Understanding of Promises • A User gesture event document.querySelector("button") .addEventListener("click", _ => { //User event });
- 41. @joel__lord #midwestjs Web Bluetooth API • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
- 42. @joel__lord #midwestjs Web Bluetooth API • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
- 43. @joel__lord #midwestjs Web Bluetooth API • You can see all the devices but you will get an error later if you don’t add a service filter navigator.bluetooth.requestDevice({acceptAllDevices: true}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
- 44. @joel__lord #midwestjs Web Bluetooth API • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
- 45. @joel__lord #midwestjs Web Bluetooth API • First, we need to connect to a device. • Requires a mandatory service filter navigator.bluetooth.requestDevice({ filters: [ { services: ['heart_rate'] } ]}) .then(device => { /* ... */ }) .catch(error => { console.log(error); });
- 46. @joel__lord #midwestjs Web Bluetooth API • You can *then* connect to the device and get information about this device navigator.bluetooth.requestDevice(options) .then(device => { // Human-readable name of the device. console.log(device.name); }) .catch(error => { console.log(error); });
- 47. @joel__lord #midwestjs Web Bluetooth API • Once you have a device, you can access the GATT server navigator.bluetooth.requestDevice(options) .then(device => { // Attempts to connect to remote GATT Server. return device.gatt.connect(); }) .then(server => { /* ... */ }) .catch(error => { console.log(error); });
- 48. @joel__lord #midwestjs Web Bluetooth API • Once you have a device, you can access the GATT server navigator.bluetooth.requestDevice(options) .then(device => { // Attempts to connect to remote GATT Server. return device.gatt.connect(); }) .then(server => { /* ... */ }) .catch(error => { console.log(error); });
- 49. @joel__lord #midwestjs Web Bluetooth API • And you can now access the service to get the desired characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => { // Getting Battery Service return server.getPrimaryService('battery_service'); }) .then(service => { // Getting Battery Level Characteristic. return service.getCharacteristic('battery_level'); }) .catch(error => { console.log(error); });
- 50. @joel__lord #midwestjs Web Bluetooth API • And you can now access the service to get the desired characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => { // Getting Battery Service return server.getPrimaryService('battery_service'); }) .then(service => { // Getting Battery Level Characteristic. return service.getCharacteristic('battery_level'); }) .catch(error => { console.log(error); });
- 51. @joel__lord #midwestjs Web Bluetooth API • You can finally read the value of the characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(characteristic => { // Reading Battery Level return characteristic.readValue(); }) .then(value => { console.log('Characteristic value: ' + value); }) .catch(error => { console.log(error); });
- 52. @joel__lord #midwestjs Web Bluetooth API • You can finally read the value of the characteristic navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(characteristic => { // Reading Battery Level return characteristic.readValue(); }) .then(value => { console.log('Characteristic value: ' + value); }) .catch(error => { console.log(error); });
- 53. @joel__lord #midwestjs Web Bluetooth API • When reading the value, it returns a ArrayBuffer which you need to convert into an int value navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(characteristic => characteristic.readValue()) .then(value => { var intVal = value.getUint8(0); console.log('Battery percentage is ' + intVal); }) .catch(error => { console.log(error); });
- 54. @joel__lord #midwestjs Web Bluetooth API • Or subscribe to the notifications navigator.bluetooth.requestDevice(options) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService('battery_service')) .then(service => service.getCharacteristic('battery_level')) .then(c => { // Set up event listener for when characteristic value changes. c.addEventListener('characteristicvaluechanged', console.log); }) .catch(error => { console.log(error); });