WebUSB API for Particle Devices

Just wondering if anyone has looked into the WebUSB API on chrome for connecting Particle devices to a web app via USB/Serial?

Looking at the tutorial here,


it looks like you need to change the Serial library to use it on an Arduino. WebUSB could be a good alternative to using Chrome apps and chrome.serial library as Chrome Apps are no longer supported on Windows, Mac and Linux.

2 Likes

Last time I looked WebUSB was in extreme draft status. Has that changed?

I believe it’s in the official version of Chrome since 61 (current version is 67). If you type:

navigator.usb.requestDevice({ filters: [] }).then(function (device) {

console.log(device);

})

in your chrome console you should get a response to connect to devices. That is not to say that it isn’t a draft version but it does have some function.

Update:

I (unsuccessfully) spent some time trying to get WebUSB working with an old Arduino Micro. I followed the tutorials outlined in the github repo but was not able to get it working with the Micro. The machine I was using is windows 7 so that may be part of the problem.

I found this issue post to be enlightening in 2 ways,

  1. The promised popup chrome displays on the users desktop with a link to the correponding website is currently disabled in windows. This was a huge selling point for me and really disappointing, hopefully chrome gets it fixed in the future.
  2. You need to set a flag in chrome to get WebUSB to be able to talk to devices (“Enable new USB backend” in chrome://flags). Again disappointing that the default settings don’t allow for

Once I did this and resent

navigator.usb.requestDevice({ filters: [] }).then(function (device) {
    console.log(device);
});

I was prompted to connect to my connected Photon! (along with my mouse and keyboard)

Prompt
image

Console Log
image

Although the Arduino works poorly (or not at all) it seems there may be promise for the Photon.

After figuring out how to update the firmware and such with FAR more reliable YMODEM commands, adding more layers to break would not be my choice.

Thanks for doing the research though!

Not familiar with YMODEM. Is that the standard serial interface the Photon uses? Can it be used through a web app?

This is a tutorial I wrote about updating firmware on a production line without the Particle tools that rely on Node (which I had been having severe problems with)

I like what you’ve done there, but I’m trying to accomplish a different task.

I often have Photons that are used “offline” so the only way to communicate with them (for updating settings or running tests) through a computer is through the USB port. Currently, I use Chrome Apps to accomplish this as they only need HTML and Javascript and can be used on PC, Mac, and Linux with no extra effort. However, Chrome no longer supports Chrome Apps and it’s not clear if they’ll continue to work forever so I’m trying to move to a progressive web app model.

Update:

So I had a breakthrough on my windows 7 machine, and was able to Request and Open a communication line to the photon. I have not done any further communication testing with that machine yet. But from what I've found in forums threads is once people can open the communication with the device the rest comes into place... We shall see.

Now I'm on my Windows 10 machine and WebUSB cannot even detect the stock Photon. This issue seems to be with the default driver windows selects on Windows 8.1 and above. According to the readme

Microsoft OS 2.0 Descriptors which instruct the Windows operating system (8.1 and above) to automatically the WinUSB.sys driver so that the browser can connect to the device.

On the windows 7 machine, I would see the normal Photon under Ports in device manager, but I would also see a Universal Serial Bus Device that referenced the photon and I believe this is what chrome connects to.

image

Using Zadig to interrogate the Photon, I see that the Photon loads usbser driver instead of winusb that chrome apparently requires

image

I believe usbser is the driver that the Photon uses for the standard serial terminal, and on the windows 7 machine, there were 2 different enumerations (drivers) for the Photon in Zadig.

So it appears I need to figure out how to get this Universal Serial Bus Device version of the Photon to enumerate in windows if I want it to work on Windows 10 (which I do). The repo suggests I need to make sure the Photon is using USB 2.1, there may be more but first I need to validate the USB version of the photon

It is possible for the Photon and Electron (0.6.0+) to expose two seperate USB Serial interfaces.
You may be able to see even more interfaces exposed, when you use one of the extra USB endpoints for USB Keyboard and/or USB Mouse.

Not sure if this is the same thing, but when I saw a Universal Serial Bus Device on my Win10 instead of the expected USB Serial port, it was due to a missing Enable Virtual COM Port checkmark in the advanced settings of the driver.

Short update, I’ve been busy at work getting FDA trials set up and haven’t had time to play with this in a few days.

I used the hex file found in the github issue above and flashed it to my Arduino Micro. With that hex I was able to get the WebUSB interface to work on my Windows 7 machine (haven’t tried the Windows 10 yet)

The hex file is to be used with an RGB led example found here. I don’t have any LEDs with me at the moment, but the example does display serial responses in the terminal from the Arduino. (rgb.js:19 is inside a function handler for a receive event)

So it works with the precompiled hex file (Woooooo!) however, I have yet to be able to compile my own hex for the Micro and have it work (Booooo!)

I’m hoping getting that by getting it to work and understand it with the Micro, I’ll be able to transfer that knowledge to the Photon.