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.

1. www.spiria.com
Let’s Get Physical
Presented By
JOEL LORD
JS Remote Conf
March 15th, 2017

2. www.spiria.com
Let’s Get Physical
Presented By
JOEL LORD
JS Remote Conf
March 15th, 2017

3. @joel__lord
#JSRemoteConf
JOEL LORD
Aboot me, eh?
• Javascript Junkie
• Tinkerer
• Technology enthusiast

4. @joel__lord
#JSRemoteConf
Agenda
• What is Bluetooth
• The Physical Web
• Web Bluetooth API
• Demos, code and lots of fun!

5. @joel__lord
#JSRemoteConf
Agenda
• What is Bluetooth
• The Physical Web
• Web Bluetooth API
• Demos, code and lots of fun!

6. What’s the fuss about?
BLUETOOTH, BLE, PHYSICAL WEB

7. @joel__lord
#JSRemoteConf
Bluetooth
WHY USE IT?
• Named after Harald Bluetooth who was the
Viking king of Denmark between 958 and
970
• It’s present on most cell phones that were
manufactured in this millennium
• Uses a network of 79 bands of radio waves.
• The most recent standard (4.2) has a
theoretical speed of 2.1Mbps and range of
100 meters
• Devices can automatically detect each
other
• Can connect up to 8 devices at once

8. @joel__lord
#JSRemoteConf
Bluetooth
AVAILABLE IN MULTIPLE FLAVORS
• Bluetooth Basic Rate/Enhanced Data Rate (BR/EDR)
• More limited in range
• More suitable for continuous connections
• Bluetooth Low Energy (LE)
• Perfect for brief bursts of data
• Uses very low power
• Cheaper

9. @joel__lord
#JSRemoteConf
The Generic Attributes (GATT) define a
hierarchical data structure that is exposed
to connected Bluetooth LE devices.

10. @joel__lord
#JSRemoteConf
Bluetooth
GENERIC ATTRIBUTE PROFILE (GATT)
• A characteristic consists of
• a type (represented by a UUID)
• a value
• a set of properties indicating the operations the characteristic
supports
• a set of permissions relating to security.

11. @joel__lord
#JSRemoteConf
Bluetooth
ADOPTED SPECIFICATIONS
• Battery Service - org.bluetooth.service.battery_service (0x180F)
• battery_level: Read, Notify
• Heart Rate Service – org.bluetooth.service.heart_rate (0x180D)
• heart_rate_measurement: Notify
• body_sensor_location: Read
For more on Bluetooth specs: https://www.bluetooth.com/specifications/gatt

12. What’s that?
PHYSICAL WEB

13. @joel__lord
#JSRemoteConf
The Physical Web is an open approach to
enable quick and seamless interactions with
physical objects and locations.

14. @joel__lord
#JSRemoteConf
Physical Web
EDDYSTONE BEACONS
• An easy way to broadcast a URL
• Makes it easy to interact with objects
• Only requires something that can broadcast over Bluetooth (BLE)

15. @joel__lord
#JSRemoteConf
Physical Web
POSSIBLE BEACONS
• Ready to use beacons

16. @joel__lord
#JSRemoteConf
Physical Web
POSSIBLE BEACONS
• Ready to use beacons
• Your own laptop

17. @joel__lord
#JSRemoteConf
Physical Web
POSSIBLE BEACONS
• Ready to use beacons
• Your own laptop
• And, of course, a little touch of
Javascript

18. @joel__lord
#JSRemoteConf
Physical Web
WHAT WILL 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

19. @joel__lord
#JSRemoteConf
Physical Web
CONFIGURE YOUR PHONE
• First, check that you have an active data
connection as well as Bluetooth and Location
turned on. The notification shade provides an
easy way to check that these requirements are
met.

20. @joel__lord
#JSRemoteConf
Physical Web
CONFIGURE YOUR PHONE
• Swipe down on the notification shade when
you first encounter a beacon. You will receive
a notification alerting you about nearby web
pages.

21. @joel__lord
#JSRemoteConf
Physical Web
CONFIGURE YOUR PHONE
• Tap on the notification to opt into future
Nearby notifications. Opting in will take you to
a list of nearby URLs

22. @joel__lord
#JSRemoteConf
Physical Web
CONFIGURE YOUR PHONE
• When you are near a beacon in the future, you
will see a notification informing you of nearby
URLs.

23. @joel__lord
#JSRemoteConf
Physical Web
STILL NOT WORKING?
• Try to download the application ”Physical
Web” from the Play Store

24. @joel__lord
#JSRemoteConf
Physical Web
AS FOR IPHONES?
• Dunno…
Try it and let me know: iOS

25. @joel__lord
#JSRemoteConf
Physical Web
BROADCAST THAT URL
• You will need
• Compatible Bluetooth 4.0 USB adapter
(Macbook Pro)
• NodeJs
• See full list of requirements

26. @joel__lord
#JSRemoteConf
Physical Web
BROADCAST THAT URL
[SYS:~ jlord$ npm install eddystone-beacon

27. @joel__lord
#JSRemoteConf
Physical Web
BROADCAST THAT URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
var url = "https://goo.gl/SuTBBh";
beacon.advertiseUrl(url, options);

28. @joel__lord
#JSRemoteConf
Physical Web
BROADCAST THAT URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
var url = "https://goo.gl/SuTBBh";
beacon.advertiseUrl(url, options);

29. @joel__lord
#JSRemoteConf
Physical Web
BROADCAST THAT URL
var beacon = require("eddystone-beacon");
var options = {
name: "MyBeacon"
};
var url = "https://goo.gl/SuTBBh";
beacon.advertiseUrl(url, options);

30. @joel__lord
#JSRemoteConf
Physical Web
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
#JSRemoteConf
Physical Web
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
#JSRemoteConf
Physical Web
TADA!
• You should see the notification on your phone
• It’s really just that simple!

33. Web Bluetooth API

34. @joel__lord
#JSRemoteConf
Web Bluetooth API
WHAT THE…?
• 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

35. @joel__lord
#JSRemoteConf
Web Bluetooth API
WHAT THE…?
• Still experimental
• Full specs here
• Only Google implementing it so far
• Security is a big concern

36. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• You will need a compatible browser
• Understanding of Promises
• A User gesture event
document.querySelector("button").addEventListener("click", _ => {
//User event
});

37. @joel__lord
#JSRemoteConf
Web Bluetooth API
LET’S GET CODING
• Heart Beat Sensor

38. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

39. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

40. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

41. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

44. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

45. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

46. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

47. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

48. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

49. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

50. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

51. @joel__lord
#JSRemoteConf
Web Bluetooth API
GETTING READY
• 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); });

52. Show me the real stuff !

53. QUESTIONS?

54. DOCUMENT CONFIDENTIEL, TOUT DROIT RÉSERVÉ
PRESENTED BY
That’s all folks !
JOEL LORD
March 17th, 2017
TWITTER: @JOEL__LORD
GITHUB: HTTP://GITHUB.COM/JOELLORD