Using Web BLE to detect and get GATT information

День тому

#bluetooth #gatt #arduino
Web BLE on the Chrome browser can be used to interact with a BLE device by connecting to it and then reading the GATT service and characteristics values.
⏰ TIMESTAMPS
0:00 Intro
2:24 JavaScript code to detect any BLE device on the browser
6:20 Arduino code on the nRF52 board to start advertising itself
9:13 Publish GATT characteristic UV Index every 1 second on the BLE device
12:05 JavaScript code to display the changing GATT characteristic values
‣ Some links below are affiliate. I receive a small commission at no extra cost to you.
📻 PRODUCTS MENTIONED
Adafruit Feather nRF52 Bluefruit LE amzn.to/39WpHw8
🎩 DEMO FILES
Detecting BLE devices on the browser: hutscape.com/tutorials/web-bl...
Display GATT services and characteristics: hutscape.com/tutorials/web-bl...
🔗 LINKS SHOWN
Web Bluetooth Specs webbluetoothcg.github.io/web-...
Can I Use browser compatibility caniuse.com/#feat=mdn-api_blu...
Google Chrome developers BLE developers.google.com/web/upd...
Chrome samples googlechrome.github.io/sample...
Adafruit nRF52 board www.adafruit.com/product/3406
Adafruit nRF52 Arduino github.com/adafruit/Adafruit_...
Sample code github.com/adafruit/Adafruit_...
BLE basic terminologies www.silabs.com/community/wire...
Bluetooth GATT services www.bluetooth.com/specificati...
Bluetooth GATT service Environmental sensing www.bluetooth.com/wp-content/...
Bluetooth GATT characteristics www.bluetooth.com/specificati...
Bluetooth UV Index GATT Characteristics www.bluetooth.com/wp-content/...
🔌 TOOLS USED
hutscape.com/tools

КОМЕНТАРІ: 64

@FranRoscelli 4 роки тому

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

@abelmatser 3 роки тому

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 :)

@cogno-slayer 2 роки тому

Awesome demo, thanks for sharing!!

@enkidu9298 3 роки тому

You're a lifesaver! Thanks!

@drodrii 2 роки тому

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 2 роки тому

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.

@randallyoung9411 4 роки тому

Thanks for posting!!!

@clivesgt1 4 роки тому

great tutorial. very informative. thanks!

@adafruit 4 роки тому

great work!

@sandipkumarnandi 4 місяці тому

Very nicely explained

@dunzek943 2 роки тому

This is very helpful! Love from a high school senior

@lukepiette879 3 роки тому

Awesome video thanks for the help!

@SY_ViralShorts360M Рік тому

Nice explained

@muema3051 3 роки тому

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

@brendanfitzgerald483 4 роки тому

Great Post , very clear

@ashwin372 2 роки тому

Thanks really informative

@LaminaFerro 4 роки тому

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

@upasnagandhi6508 2 роки тому

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.

@carlobramini4826 3 роки тому

amazing 🙌

@debrain1647 3 роки тому

You are cool...Thanks alot

@Xerox7788 4 роки тому

How do you read multiple characteristics?

@blackrobot138 2 роки тому

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

@gerardocardenas8805 Рік тому

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

@sandipkumarnandi 3 місяці тому

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.

@adron115 4 роки тому

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?

@ayushmishra1975 2 роки тому

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?

@bobbobbington1132 3 роки тому

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 3 роки тому

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 3 роки тому

@@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 3 роки тому

@@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!

@rj-bn4lb 3 роки тому

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

@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?

@ashwin372 2 роки тому

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

@MrRossss1 4 роки тому

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

@weilieschok2001 3 роки тому

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

@robstechdesign7392 3 роки тому

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

@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?.

@user-od9ee6bd7e Місяць тому

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 ??

@kannvino 2 роки тому

Will this code pick up android mobiles with bluetooth on?

@eddyv524 3 роки тому

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 3 роки тому

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: ukposts.info/have/v-deo/f2hyiZ2ukXmWwIU.html Here's a related article on STM32 and WebUSB: medium.com/coinmonks/stm32-blue-pill-dissecting-the-webusb-bootloader-for-makecode-b7f1a1508e89

@RathourShubham 3 роки тому

How can I detect nearby mobile phone?

@SY_ViralShorts360M Рік тому

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

@prateeksahni5618 2 роки тому

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

@kishika966 2 роки тому

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 2 роки тому

So sorry! Never did that!

@sandipkumarnandi 3 місяці тому

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.

@binleyhouse 3 роки тому

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 3 роки тому

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.

@carlobramini4826 3 роки тому

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

@sayanee 3 роки тому

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

@cemyuceer179 3 роки тому

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

@sayanee 3 роки тому

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

@sayanee 3 роки тому

*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 ukposts.info/have/v-deo/gZ6oim-hhq5jlWw.html. I hope the above links will provide you with some guidance 🙏🏻

@mohdatique9429 3 роки тому

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 3 роки тому

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 3 роки тому

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 3 роки тому

@@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 3 роки тому

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

@sayanee 3 роки тому

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