Data exchange from browser to a microcontroller with WebUSB

День тому

#webusb #chrome #arduino
WebUSB is experimental and is available on the Chrome browser. With micro-controllers such as ATmega32U4, SAMD21, and EFM32, we can detect USB devices as well as do some data exchange between the browser and the micro-controllers.
⏰ TIMESTAMPS
0:00 Intro
5:10 Detect USB devices on the browser
7:43 Send data from MCU to browser
13:45 Send data from browser to MCU
‣ Some links below are affiliate. I receive a small commission at no extra cost to you.
📻 PRODUCTS MENTIONED
RobotDyn SAMD21 M0 Mini s.click.aliexpress.com/e/_AZG8aU
🎩 DEMO FILES
Detect WebUSB on the browser hutscape.com/tutorials/webusb...
Send data from MCU to browser hutscape.com/tutorials/webusb...
Send data from browser to MCU hutscape.com/tutorials/webusb... and hutscape.com/tutorials/webusb...
🔗 LINKS SHOWN
Tomu tomu.im
Web USB API wicg.github.io/webusb/
WebUSB Demos on Arduino github.com/webusb/arduino
WebUSB compatible hardware github.com/webusb/arduino#com...
Arduino board comparison www.arduino.cc/en/products.co...
Datasheet for ATmega32U4 ww1.microchip.com/downloads/en...
Datasheet for SAMD21 cdn.sparkfun.com/datasheets/D...
Datasheet of EFM32 www.silabs.com/documents/publ...
Arduino WebUSB demos webusb.github.io/arduino/demos/
Serial.js github.com/webusb/arduino/blo...
System_profiler for macOS ss64.com/osx/system_profiler....
Lsusb linux.die.net/man/8/lsusb
🔌 TOOLS USED
hutscape.com/tools

КОМЕНТАРІ: 19

@ashemmeld99 Рік тому

Excellent. Thank you! I've been searching high and low for a simple explanation of this.

@jschap 4 роки тому

Great explanation. thanks for putting it together!

@LucasThomasLuc_Tho 3 роки тому

This was super helpful. Thanks! :)

@alvarobyrne 3 роки тому

Thank you, adorable low pace explanation

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

how are we going to get around town 1❤ 0:00

@josoeichuta3893 2 роки тому

Thank you so much

@kheshav1710 3 роки тому

hello...i love it... thanks for sharing... how to i do in windows ?? after creating index.html what should i do in cmd? pls help out...

@DiyintheGhetto 2 роки тому

Hello, I have a question Even though The uno board doesn't have Native you was able to see device information I see in the console login. Is it possible to display the hello world text in the webpage from the uno board?

@debrain1647 3 роки тому

I love asking questions, i love your videos too.. My Question is , Will this Work on Android when it is converted to an Apk ?

@sayanee 3 роки тому

Oops! I have never coded for Android. But do check the browser compatibility and the version: caniuse.com/webusb

@hitheshprabu6100 Рік тому

hi, will this work for esp32 as well??

@Optimuseq 2 роки тому

" DOMException: Access denied" while trying to connect.

@DiyintheGhetto 2 роки тому

Hello I have a question what happens If the Hardware ID is different? Example: I have two Arduino Leonardo both with different ID, Is there a way so no matter what ID is there It will connect to that device?

@sayanee 2 роки тому

Yes, you can use the parameter filters in navigator.usb.requestDevice and add both the IDs: developer.mozilla.org/en-US/docs/Web/API/USB/requestDevice Example in the code that I used: github.com/hutscape/hutscape.github.io/blob/master/_tutorials/webusb-detect/webusb-detect.html#L10-L12

@sinteticopasto9894 3 роки тому

Hello Thank you very much for this video, but I was trying it with a Pro Micro and now Pro Micro doesnt work, I tried unBricking it, but no method worked, maybe you can help me, i tried the double reset and nothing, it still looks like a broken usb

@sayanee 3 роки тому

Interesting! Pro Micro seems to have the 32u4 MCU on board and it is compatible hardware with webusb Arduino library: github.com/webusb/arduino#compatible-hardware

@sayanee 3 роки тому

*2021 update* As of today, Chrome and Edge browsers are supporting Web USB, whereas Safari and Firefox are not. Please check the current browser compatibility: caniuse.com/webusb Web USB is not a W3C standard and it is currently in the draft stage: wicg.github.io/webusb/ Safari, based on the WebKit browser is not considering Web USB, 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 USB 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 🙏🏻

@carloskaya5765 4 роки тому

This is great, but why not make real-world example, how to connect devices such as scanners, printers, cameras, digitizing tables, etc? All videos are playing with a light or an arduino.

@sayanee 4 роки тому

You are absolutely correct about the usefulness of connecting to scanners, printers, cameras, etc. For some devices like mouse, you can use the example I showed in 5:10 to detect USB devices on the browser. But for actual data exchange between an existing scanner/printer, etc and the browser, a considerable amount of reverse engineering will be required to understand whether the processor onboard these devices and then program it to send specific instructions to the browser. Hopefully one day soon this can be done!