Using New Web APIs For Your Own Pleasure
1 like908 views
The document discusses utilizing new web APIs, particularly the Web Bluetooth API, for interacting with Bluetooth devices. It outlines the steps to connect to a Bluetooth device, read audio data, and send commands, specifically focusing on identifying vowels and sending vibration commands. Additional resources and links for further learning and testing are provided.
![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);
});
});](https://image.slidesharecdn.com/2018-05-yglf-webbluetoothapi-180525133738/85/Using-New-Web-APIs-For-Your-Own-Pleasure-11-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/2018-05-yglf-webbluetoothapi-180525133738/85/Using-New-Web-APIs-For-Your-Own-Pleasure-12-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/2018-05-yglf-webbluetoothapi-180525133738/85/Using-New-Web-APIs-For-Your-Own-Pleasure-14-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/2018-05-yglf-webbluetoothapi-180525133738/85/Using-New-Web-APIs-For-Your-Own-Pleasure-17-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/2018-05-yglf-webbluetoothapi-180525133738/85/Using-New-Web-APIs-For-Your-Own-Pleasure-18-320.jpg)
![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);
}](https://image.slidesharecdn.com/2018-05-yglf-webbluetoothapi-180525133738/85/Using-New-Web-APIs-For-Your-Own-Pleasure-26-320.jpg)
![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);
}](https://image.slidesharecdn.com/2018-05-yglf-webbluetoothapi-180525133738/85/Using-New-Web-APIs-For-Your-Own-Pleasure-27-320.jpg)
Using New Web APIs For Your Own Pleasure
- 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!!
- 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