Try to implement a demo for WebUSB

[Fabian Deitelhoff]

Hi everyone,

I'm trying to implement a little demo for WebUSB. I'm trying to get a connection to a LEGO Mindstorms EV3. But I'm not sure if this is possible at all.

I followed the tutorial at https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web. Currently I'm experimenting with the following snippet:

ev3_info.addEventListener('click', function() {

    console.log("test");

    

    navigator.usb.requestDevice({ filters: [{ vendorId: 1684 }] })

    .then(device => {

      console.log(device.productName);      

      console.log(device.manufacturerName); 

    })

    .catch(error => { console.log(error); });

});

The vendorId is correct as I can see within the device log of my chrome instance:

USBUser[22:09:04] USB device added: vendor=1684 "LEGO Group", product=5 "Fabian", serial="001653402f46", guid=0ff0a065-f42e-4763-955e-702ebc9d262c

I even tried 0x1684 and various combinations with the productId and without it.

The window where I can select a device is shown but empty all the time. I can't select a device.

Because I'm not sure if I understand the specification correctly: Is it possible to connect to any devices? Do they need to implement something special in the firmware or something (would be a show stopper for me because I can of course not modify it)?

I tried it with a local HTML document I just double click to show it with chrome and with an HTML project in WebStorm.

All flags are set. At least I think all are set because I can interact with the USB Interface of the navigator.

Maybe someone can help and point me in the right direction. Current chrome version is Version 53.0.2785.116 m (64-bit).

Thanks!

Fabian

[Jeremy Roman]

WebUSB is only supported if your origin is supported by the device (by exposing a platform capability descriptor; this typically requires a firmware update). This is to prevent web pages from accessing arbitrary devices which do not expect it.

See the "Attacks against USB devices" section of the post you linked to.

[Reilly Grant]

Jeremy is correct, out of the box the EV3 doesn't present the necessary descriptor to grant your site the ability to connect to it. It looks like the firmware source code is available on here so a WebUSB-compatible version may be possible. I haven't taken a look at it yet. It would be a pretty cool demo!

There's demo code to add these descriptors to the Arduino that may be applicable: https://github.com/webusb/arduino/blob/gh-pages/library/WebUSB/WebUSB.cpp 

[Vincent Scheib]

As noted in Access USB devices on the Web article, for developers experimenting locally with devices that have not yet enabled WebUSB firmware, --disable-webusb-security can be used.

[Fab...@fabiandeitelhoff.de]

Hm damn. I thought/hoped I misread the spec. :)

But okay, then this solution isn't applicable anymore.

But you're right. It would be a very cool demo. So maybe I'll try to change the firmware (that's absolutely possible because there are many different firmware versions out there).

[Fab...@fabiandeitelhoff.de]

I tried the switch but my code isn't working.

The switch must be applied (on Windows) within the shortcut for Chrome right? Or is there another way?

[Reilly Grant]

Ah, on Windows things get a bit more tricky because you need to make sure the system is loading winusb.sys as the driver for the device. Otherwise userspace apps like Chrome can't talk to it. The easiest way to do this is to have the device instruct the system to do so but that requires code in the firmware (the Arduino demo I mentioned previously does this) and Windows 8.1 and higher.

I don't know what the driver stack for the EV3 normally looks like. From some cursory research it looks like if you have the normal Mindstorms software installed it does this for you. There's an INF file I used for testing checked into the Chromium repository that you should be able to modify to have the EV3's vendor and product IDs.