Using Web BLE to detect and get GATT information

[@drodrii]

This tutorial is insanely good! I really appreciate you keeping in the footage of those common little API and syntax errors that pop up while testing your code because we all encounter the same types of issues too! The fact that you then go on to promptly resolve them while also explaining your insights on the various causes for each presented error really makes this 1000 times more helpful than other tutorials that just demonstrate a prescreened and oversimplified example code. I’m sure it’s easy for this particular aspect to be overshadowed and go unnoticed since these interactions occur so briefly, but I just wanted to give you some additional credit and express some gratitude by saying thanks ✌🏼

[@sayanee]

Thank you :) I'll take note of sharing these errors and resolving them as I code in future tutorials as well! Errors, bugs, debugging, and resolving them are programming after all.

[@FranRoscelli]

Probably the best tutorial for both ESP32 programming and BLE for browsers. Thanks, super clear information.

[@enkidu9298]

You're a lifesaver! Thanks!

[@dunzek943]

This is very helpful! Love from a high school senior

[@abelmatser]

I really enjoy your explanations of different topics, especially because you really show all the things you do - also looking up libraries when coding for example. So thanks for this, and keep up the good work :)

[@adafruit]

great work!

[@_olives]

This video was super useful!!

[@muema3051]

Thank you for the tutorial. Would you kindly do another tutorial showing how to write data to a bluetooth printer?

[@gerardocardenas8805]

good video, now I can access my bluetooth device locally, without using webbluethoo's GAT servers?

[@bobbobbington1132]

Thanks very much for this video. I'm trying to work out how to talk to a bluetooth thermal printer via a webapp, and I think you just gave me the key!

[@sayanee]

Interesting! I would be curious to know if you were able to talk to the printer and if possible, what is the printer model? Does the printer have information about the BLE GATT values?

[@bobbobbington1132]

@@sayanee I’ve got two printers being shipped to me that I’ll be trying to make work, a zebra imz320 and a zebra rw420. I don’t know about the gatt values yet, and to be completely honest this is my first foray into any web related programming, so I’m just beginning to run through javascript tutorials. The main thing I’ve been trying to figure out for the last week or so was whether talking to the printers was even possible via a web app. I think for printers connected via WiFi I may be able to use WebSocket, and webBT for Bluetooth connected ones. The code ultimately needs to run inside Shopify’s POS app on iOS as a web app.

[@sayanee]

@@bobbobbington1132 Thanks for explaining the context of using the Web BLE. If you are planning to use it as a consumer app for the public, then I would suggest no. Also, I do not think Apple will approve an iOS app with Web BLE that they are not supporting due to current privacy concerns. It is still an experimental technology that is not supported by major browsers like Safari and Firefox (see caniuse.com/mdn-api_bluetooth). But if you are planning to use it to play with JavaScript, just as a prototype for yourself, then by all means go ahead. If you are planning to learn about web development, knowing about web standards and browser compatibility will be an important part of knowing the ecosystem. E.g. webbluetoothcg.github.io/web-bluetooth/ About using hardware APIs on the web in general, I would strongly suggest a recent article which talks about privacy issues and the viewpoint from Apple, Google, and Mozilla - all major browser makers. In summary, discussions are on-going on how to balance privacy versus innovation and while it is going on, I suggest using Web BLE just for fun and experimentation. www.smashingmagazine.com/2021/01/web-expose-hardware-capabilities/ I hope I gave you some context on using Web BLE today. I hope you have fun learning web development and playing with these APIs as much as I did!

[@kishika966]

Thanks for the tutorial! help me a lot. I have also a question regarding BLE, have you tried creating a BLE server that can connect multiple clients? is it possible for Web BLE? I'm using ESP32 and I'm having a hard time doing it. hope you can answer me, it is for my thesis project. Thank you!

[@sayanee]

So sorry! Never did that!

[@sandipkumarnandi]

Do you mean to create a server in browser? If so then that would not be appropriate still not sure if that would be supported technically. I am looking for having a full fledged ble client on the browser and inturn want to add them as we view.

[@ayushmishra1975]

Hello, ma'am nice video, I have a problem I am connecting a Bluetooth adapter (desktop) to Chromebook but it was not connecting. How I can connect the Bluetooth adapter to Chromebook?

[@sandipkumarnandi]

Wonderful video, I was looking for this, very helpful. Next step what I would like to extend this is send signal from browser to ble device to perform some action. Not sure if these functions would be available on webview as well? In case you have any info, could you pls share the same.

[@OurSouthAfrica]

Hello can you view ble devices that are not with you but someone els phone picks up that ble device to see location? Or is there a network that can be used for this function for vehicle tracking in case of theft?

[@cogno-slayer]

Awesome demo, thanks for sharing!!

[@SumitBhowmick-b5v]

Hello, I'm developing an BLE socket based windows client utility package using winsock & winsock2 library layer, but during build process, socket is getting connected with server socket fd. But then no data being receiving and thereafter code will getting terminating. can you suggest any root cause ??

[@kishorfarad6468]

nice tutorial. I have a problem with Gatt.Connect() method. an error occurred Connection failed for unknown reason .can you tell me why this error came?.

[@sandipkumarnandi]

Very nicely explained

[@weilieschok2001]

i have a simple use case, where workers has to be nearby to a bluetooth device (and the device is in office), so they could register their attendance (in floor 88th), instead of when letting them to register attendance on ground floor. Hence, is it possible not to prompt the blutooth paring screen, but the JS will smart enough to check IF "device" in list of devices found? It should be transparent to workers

[@upasnagandhi6508]

That's was wonderful explanation with appropriate pauses. I have a question, by means, can you tell me how can we unpair an already paired device like Forget Device/remove device. Will appreciate your help.

[@Xerox7788]

How do you read multiple characteristics?

[@LaminaFerro]

So informative, i did not we can detect bluetooth by browser. Nice ideas get on

[@eddyv524]

Great video!!! I have two questions: Based on my research i think a simple serial protocol is not yet part of the Web BLE spec. Is there still a way to transfers chunks of data (configuration info) between an STM32 processor (with an BLE module attached to it) and a web browser. Are there GATT services and characteristics that can be used for this? 2nd question: Can the cheap HC-05, HC-42 BLE serial modules be used for this?

[@sayanee]

I apologise in advance in case I am totally off-tangent to what you require. I have neither tried STM32 nor the HC-05/42 modules, but have you tried WebUSB? I have used WebUSB with SAMD21G to transfer config info as well. Video: kzbin.info/www/bejne/fWmkhpqtj6iYlbM Here's a related article on STM32 and WebUSB: medium.com/coinmonks/stm32-blue-pill-dissecting-the-webusb-bootloader-for-makecode-b7f1a1508e89

[@SY_ViralShorts360M]

Nice explained

[@binleyhouse]

thanks for sharing, I just started to tinker with IoT and WebBluetooth. While I got the example to work, was wondering if you want to create a custom BLE service/characteristics (eg accelerometer x,y,z reading) how do you get the WebBluetooth to read it? I am getting error, TypeError: Failed to execute 'getCharacteristic' on 'BluetoothRemoteGATTService': Invalid Characteristic name. I am using a random UUID for both Service and Characteristic on Arduino side and trying to call the same UUIDsunsuccessfully

[@sayanee]

To be honest, I have never tried a custom BLE service / characteristics. I tried to look into the Web BLE specifications and could not find something on custom fields. Maybe I missed it, or maybe that's something you can look through the specifications again. I also found a GitHub issue on custom fields: github.com/WebBluetoothCG/web-bluetooth/issues/444 I also see some mentions of "custom" on this tutorial: web.dev/bluetooth/ Hope this gives you some clue on the next steps.

[@blackrobot138]

wao ... thank you. can you also please explain how to use custom UUID and characteristics? Also how to stream data at 1000Hz?

[@ashwin372]

Is there a way to connect multiple clients to single GATT server

[@kannvino]

Will this code pick up android mobiles with bluetooth on?

[@lukepiette879]

Awesome video thanks for the help!

[@clivesgt1]

great tutorial. very informative. thanks!

[@ashwin372]

Thanks really informative

[@carlobramini4826]

amazing no need to create an android or ios app just for ble

[@sayanee]

Agree about no mobile apps :) Great for quick prototyping! Just be aware of its browser compatibility because it is still an experimental technology. developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API

[@robstechdesign7392]

I paired my ESP32 ... but can't find a way to unpair it.

[@sayanee]

*2021 update:* As of today, *Chrome* and *Edge* browsers are supporting Web Bluetooth, whereas *Safari* and *Firefox* are not. Please check the current browser compatibility: caniuse.com/web-bluetooth Web Bluetooth is not a W3C standard: webbluetoothcg.github.io/web-bluetooth/ Safari, based on the WebKit browser is not considering Web Bluetooth, for now, due to browser fingerprinting concerns. Please check webkit.org/tracking-prevention/#anti-fingerprinting As another optional reading, I suggest the article "Should The Web Expose Hardware Capabilities?" www.smashingmagazine.com/2021/01/web-expose-hardware-capabilities/ Hence, in my opinion, we can use Web Bluetooth in developer tools or in small-scale beta testing apps, but of course, you will be best aware of the context in which you plan to use this feature. Check out other exciting hardware API features such as Web NFC, Web Serial here web.dev/devices/ I detailed more on using hardware APIs on the web and using experimental technologies in another video of mine here kzbin.info/www/bejne/f5_ah2yghN1lapo. I hope the above links will provide you with some guidance 🙏🏻

[@adron115]

Up to the point to connect the devices, everything works perfect, but I want to use it for communication (like keyword and data) between two browser with one code for both. If you know how to do that, can you pls give an example (like an easy chat) for that and show it in a web editor or sth like that?

[@MrRossss1]

Hi. Can this be used offline please? Great vid thanks

[@brendanfitzgerald483]

Great Post , very clear

[@SY_ViralShorts360M]

Can any one please help by solving the problem that how can avoid overlap when multiple slave connect to a single master

[@rj-bn4lb]

Please share a video to get esp32 ble data to android studio app

[@randallyoung9411]

Thanks for posting!!!

[@mohdatique9429]

Thats awesome. But I am getting this error web-ble-detect:29 Argh! NotFoundError: Bluetooth adapter not available. My desktop not having bluetooth adapter but I attached the external bluetooth device but its unable to find bluetooth adapter. Will appreciate your response.

[@sayanee]

Are you using Chrome or Edge browser? Web BLE is not available on FireFox or Safari. Reference for browser compatibility: caniuse.com/web-bluetooth Also, maybe check the hardware Bluetooth adapter by another means without using the browser just to ensure the hardware works by itself.

[@mohdatique9429]

Hey ​ @Sayanee Basu Thanks for the reply. I tested it out its working without browser as well but unable to detect via chrome browser api.

[@sayanee]

@@mohdatique9429 If the BLE hardware is working and you are using the right browser, then start with the simplest possible JavaScript code with the least possible number of lines (E.g. hutscape.com/tutorials/web-ble-detect). Also, what BLE device are you trying to connect to with your desktop?

[@debrain1647]

You are cool...Thanks alot

[@prateeksahni5618]

thank you for coding but I am facing unexplected while checking console

[@carlobramini4826]

amazing 🙌

[@RathourShubham]

How can I detect nearby mobile phone?

[@debrain1647]

i have a Question ma'am... When i convert this into an application ,Can it Run on Android device??

[@sayanee]

It depends on the type of browser and the version. Check the Android browser compatibility for Web BLE here: caniuse.com/web-bluetooth

[@cemyuceer179]

How can I add bluefruit.h library to the arduino ıde?

[@sayanee]

Try the installation instructions here: github.com/adafruit/Adafruit_nRF52_Arduino#recommended-adafruit-nrf52-bsp-via-the-arduino-board-manager

[@jeanpierrecassou5003]

Does not work

[@niv9375]

How can I detect nearby mobile phone?

[@niv9375]

I using this code in Windows 10 ( Goole Crome)