SlideShare a Scribd company logo
@fischaelameergeildanke.com #YGLFKyiv18
Using New Web APIs 

For Your Own Pleasure
What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project
What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project
What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project
What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project
Ahhh
What? Why?
Created by Ben Davis from the Noun Project, Created by Viktor Vorobyev from the Noun Project
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
Three Steps to Happiness
Write Data via Bluetooth API
Connect Bluetooth Device
Request Connection
Read Audio Data
Expose Vowels
Uncover Bluetooth Commands
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);
});
});
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);
});
});
GATT
Generic Attribute Profile
Defines the way two Bluetooth LE devices 

transfer data back and forth 

using characteristics and services.
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);
});
});
nRF Connect
nRF Connect
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);
});
});
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);
});
});
How to detect Vowels
f1 = ~850hz
f2 = ~1610hz
https://de.wikipedia.org/wiki/Formant
How to detect Vowels
createAnalyser()
captureStream()
new window.AudioContext()
getByteFrequencyData() Vowels!!
Identify Bluetooth Commands
Vibrate:4;
Identify Bluetooth Commands
56 69 62 72 61 74 65 3a 34 3b
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; });
});
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; });
});
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; });
});
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);
}
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);
}
@fischaelameergeildanke.com #YGLFKyiv18
Be Creative!
Use More Web APIs, Test, Give Feedback
@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

More Related Content

Similar to Using New Web APIs For Your Own Pleasure

Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.createRemote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Peter Lehto
 
How to build twitter bot using golang from scratch
How to build twitter bot using golang from scratchHow to build twitter bot using golang from scratch
How to build twitter bot using golang from scratch
Katy Slemon
 
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGapFAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
Loiane Groner
 
Let's Get Physical
Let's Get PhysicalLet's Get Physical
Let's Get Physical
Joel Lord
 
Android ax app wcf
Android ax app wcfAndroid ax app wcf
Android ax app wcf
Aravindharamanan S
 
Android+ax+app+wcf
Android+ax+app+wcfAndroid+ax+app+wcf
Android+ax+app+wcf
Aravindharamanan S
 
Windows Phone 8 - 13 Near Field Communcations and Bluetooth
Windows Phone 8 - 13 Near Field Communcations and BluetoothWindows Phone 8 - 13 Near Field Communcations and Bluetooth
Windows Phone 8 - 13 Near Field Communcations and Bluetooth
Oliver Scheer
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
Robert Nyman
 
Build your first Chatbot
Build your first ChatbotBuild your first Chatbot
Build your first Chatbot
Nadim GOUIA
 
Internet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer CentreInternet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer Centre
jatin batra
 
Appium Mobile Testing: Nakov at BurgasConf - July 2021
Appium Mobile Testing: Nakov at BurgasConf - July 2021Appium Mobile Testing: Nakov at BurgasConf - July 2021
Appium Mobile Testing: Nakov at BurgasConf - July 2021
Svetlin Nakov
 
Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of code
Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of codeSetup ephemeral password for TURN, Learn RTC in less than 200 Lines of code
Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of code
Amitesh Madhur
 
How to Use Twilio Video Plugin for Android with Flutter.pptx
How to Use Twilio Video Plugin for Android with Flutter.pptxHow to Use Twilio Video Plugin for Android with Flutter.pptx
How to Use Twilio Video Plugin for Android with Flutter.pptx
Flutter Agency
 
Download and restrict video files in android app
Download and restrict video files in android appDownload and restrict video files in android app
Download and restrict video files in android app
Katy Slemon
 
Introduction to python scrapping
Introduction to python scrappingIntroduction to python scrapping
Introduction to python scrapping
n|u - The Open Security Community
 
SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...
SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...
SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...
Eric Shupps
 
ZN27112015
ZN27112015ZN27112015
ZN27112015
Denis Kolegov
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.ioReal Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.io
Mindfire Solutions
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
Robert Nyman
 
Playing with parse.com
Playing with parse.comPlaying with parse.com
Playing with parse.com
JUG Genova
 

Similar to Using New Web APIs For Your Own Pleasure (20)

Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.createRemote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
Remote controlling Parrot AR drone with Vaadin & Spring Boot @ GWT.create
 
How to build twitter bot using golang from scratch
How to build twitter bot using golang from scratchHow to build twitter bot using golang from scratch
How to build twitter bot using golang from scratch
 
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGapFAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
FAESA CONENCO 2013: Sencha Touch 2 + PhoneGap
 
Let's Get Physical
Let's Get PhysicalLet's Get Physical
Let's Get Physical
 
Android ax app wcf
Android ax app wcfAndroid ax app wcf
Android ax app wcf
 
Android+ax+app+wcf
Android+ax+app+wcfAndroid+ax+app+wcf
Android+ax+app+wcf
 
Windows Phone 8 - 13 Near Field Communcations and Bluetooth
Windows Phone 8 - 13 Near Field Communcations and BluetoothWindows Phone 8 - 13 Near Field Communcations and Bluetooth
Windows Phone 8 - 13 Near Field Communcations and Bluetooth
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
Build your first Chatbot
Build your first ChatbotBuild your first Chatbot
Build your first Chatbot
 
Internet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer CentreInternet Training Centre in Ambala ! Batra Computer Centre
Internet Training Centre in Ambala ! Batra Computer Centre
 
Appium Mobile Testing: Nakov at BurgasConf - July 2021
Appium Mobile Testing: Nakov at BurgasConf - July 2021Appium Mobile Testing: Nakov at BurgasConf - July 2021
Appium Mobile Testing: Nakov at BurgasConf - July 2021
 
Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of code
Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of codeSetup ephemeral password for TURN, Learn RTC in less than 200 Lines of code
Setup ephemeral password for TURN, Learn RTC in less than 200 Lines of code
 
How to Use Twilio Video Plugin for Android with Flutter.pptx
How to Use Twilio Video Plugin for Android with Flutter.pptxHow to Use Twilio Video Plugin for Android with Flutter.pptx
How to Use Twilio Video Plugin for Android with Flutter.pptx
 
Download and restrict video files in android app
Download and restrict video files in android appDownload and restrict video files in android app
Download and restrict video files in android app
 
Introduction to python scrapping
Introduction to python scrappingIntroduction to python scrapping
Introduction to python scrapping
 
SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...
SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...
SPS Houston - Who Are You and What Do You Want? Working With OAuth in SharePo...
 
ZN27112015
ZN27112015ZN27112015
ZN27112015
 
Real Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.ioReal Time Communication using Node.js and Socket.io
Real Time Communication using Node.js and Socket.io
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
Playing with parse.com
Playing with parse.comPlaying with parse.com
Playing with parse.com
 

Recently uploaded

HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 

Recently uploaded (20)

HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Artificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic WarfareArtificial Intelligence and Electronic Warfare
Artificial Intelligence and Electronic Warfare
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 

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
  • 7.
  • 8.
  • 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); }); });
  • 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); }
  • 28.
  • 29. @fischaelameergeildanke.com #YGLFKyiv18 Be Creative! Use More Web APIs, Test, Give Feedback