When I first heard about the Web Bluetooth API I was so curious, that I could not wait to try it out. So I asked myself: Which Bluetooth device should I buy? Especially if I do not want to through it away after I was finished experimenting with the API. So obviously a Bluetooth enabled vibrator was a perfect fit. And it came with a serious use case, too: The slogan of the vibrator was "Let him control you", which I found very limiting, so I used the Web Bluetooth API to connect it to the browser, and the Web Audio API, to establish my own slogan: "Let a video control you". In my lightning talk, you will learn how to use the Web Bluetooth API to connect a Bluetooth enabled device to the browser. Also, you will see what is possible with the Web Audio API, especially when it comes to analyzing spoken words.

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