The document discusses using new web APIs to interact with Bluetooth devices from a web application. It provides steps to connect to a Bluetooth device, read audio data to detect vowels, and write data to a Bluetooth characteristic to control the device. Code examples are given to request device connection, read from services and characteristics, and write messages to trigger actions like vibration. The document encourages users to be creative in testing new APIs and provides additional resources on Bluetooth Low Energy and related web APIs.

1. @fischaelameergeildanke.com #YGLFKyiv18
Using New Web APIs
For Your Own Pleasure

2. What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project

3. What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project

4. What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project

5. What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project

6. Ahhh
What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project

9. Web Bluetooth API Support
Devices with
Bluetooth 4.0 or higher
Chrome, Chrome on Android,
Samsung Internet, Opera
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project

10. Three Steps to Happiness
Write Data via Bluetooth API
Connect Bluetooth Device
Request Connection
Read Audio Data
Expose Vowels
Uncover Bluetooth Commands

11. 1. Connect Bluetooth Device
const LUSH_SERVICE = '6e400001-b5a3-f393-e0a9-e50e24dcca9e';
button.addEventListener('click', () => {
navigator.bluetooth.requestDevice({
filters: [{ services: [LUSH_SERVICE] }]
}).then((device) => {
console.log('Device found. Device: ', device);
return device.gatt.connect();
}).then((server) => {
console.log('Device connected. Server ', server);
});
});

12. 1. Connect Bluetooth Device
const LUSH_SERVICE = '6e400001-b5a3-f393-e0a9-e50e24dcca9e';
button.addEventListener('click', () => {
navigator.bluetooth.requestDevice({
filters: [{ services: [LUSH_SERVICE] }]
}).then((device) => {
console.log('Device found. Device: ', device);
return device.gatt.connect();
}).then((server) => {
console.log('Device connected. Server ', server);
});
});

13. GATT
Generic Attribute Profile
Defines the way two Bluetooth LE devices
transfer data back and forth
using characteristics and services.

14. 1. Connect Bluetooth Device
const LUSH_SERVICE = '6e400001-b5a3-f393-e0a9-e50e24dcca9e';
button.addEventListener('click', () => {
navigator.bluetooth.requestDevice({
filters: [{ services: [LUSH_SERVICE] }]
}).then((device) => {
console.log('Device found. Device: ', device);
return device.gatt.connect();
}).then((server) => {
console.log('Device connected. Server ', server);
});
});

15. nRF Connect

16. nRF Connect

17. 1. Connect Bluetooth Device
const LUSH_SERVICE = '6e400001-b5a3-f393-e0a9-e50e24dcca9e';
button.addEventListener('click', () => {
navigator.bluetooth.requestDevice({
filters: [{ services: [LUSH_SERVICE] }]
}).then((device) => {
console.log('Device found. Device: ', device);
return device.gatt.connect();
}).then((server) => {
console.log('Device connected. Server ', server);
});
});

18. 1. Connect Bluetooth Device
const LUSH_SERVICE = '6e400001-b5a3-f393-e0a9-e50e24dcca9e';
button.addEventListener('click', () => {
navigator.bluetooth.requestDevice({
filters: [{ services: [LUSH_SERVICE] }]
}).then((device) => {
console.log('Device found. Device: ', device);
return device.gatt.connect();
}).then((server) => {
console.log('Device connected. Server ', server);
});
});

19. How to detect Vowels
f1 = ~850hz
f2 = ~1610hz
https://de.wikipedia.org/wiki/Formant

20. How to detect Vowels
createAnalyser()
captureStream()
new window.AudioContext()
getByteFrequencyData() Vowels!!

21. Identify Bluetooth Commands

22. Vibrate:4;
Identify Bluetooth Commands
56 69 62 72 61 74 65 3a 34 3b

23. 3. Write to a Bluetooth Characteristic
const LUSH_TX_CHARACTERISTIC = '6e400002-b5a3-f393-e0a9-e50e24dcca9e';
let txCharacteristic = null;
button.addEventListener('click', () => {
/* … */
}).then((server) => {
return server.getPrimaryService(LUSH_SERVICE);
}).then((service) => {
return service.getCharacteristic(LUSH_TX_CHARACTERISTIC);
}).then((characteristic) => { txCharacteristic = characteristic; });
});

24. 3. Write to a Bluetooth Characteristic
const LUSH_TX_CHARACTERISTIC = '6e400002-b5a3-f393-e0a9-e50e24dcca9e';
let txCharacteristic = null;
button.addEventListener('click', () => {
/* … */
}).then((server) => {
return server.getPrimaryService(LUSH_SERVICE);
}).then((service) => {
return service.getCharacteristic(LUSH_TX_CHARACTERISTIC);
}).then((characteristic) => { txCharacteristic = characteristic; });
});

25. 3. Write to a Bluetooth Characteristic
const LUSH_TX_CHARACTERISTIC = '6e400002-b5a3-f393-e0a9-e50e24dcca9e';
let txCharacteristic = null;
button.addEventListener('click', () => {
/* … */
}).then((server) => {
return server.getPrimaryService(LUSH_SERVICE);
}).then((service) => {
return service.getCharacteristic(LUSH_TX_CHARACTERISTIC);
}).then((characteristic) => { txCharacteristic = characteristic; });
});

26. 3. Write to a Bluetooth Characteristic
if (vowels && vowels[0]) {
let message = new TextEncoder('ASCII').encode('Vibrate:10;');
txCharacteristic.writeValue(message);
} else {
let message = new TextEncoder('ASCII').encode('Vibrate:10;');
txCharacteristic.writeValue(message);
}

27. 3. Write to a Bluetooth Characteristic
if (vowels && vowels[0]) {
let message = new TextEncoder('ASCII').encode('Vibrate:10;');
txCharacteristic.writeValue(message);
} else {
let message = new TextEncoder('ASCII').encode('Vibrate:10;');
txCharacteristic.writeValue(message);
}

29. @fischaelameergeildanke.com #YGLFKyiv18
Be Creative!
Use More Web APIs, Test, Give Feedback

30. @fischaelameergeildanke.com #YGLFKyiv18
More Information
https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
http://nilhcem.com/iot/reverse-engineering-simple-bluetooth-devices
https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API
https://learn.adafruit.com/introducing-adafruit-ble-bluetooth-low-energy-friend/introduction
https://www.bluetooth.com/specifications/gatt/services
Thanks to:
https://www.metafetish.com/
https://github.com/gre/zpeech