Hello I'm trying to get access to a usb stick from an electron application written in reactjs.

Since electron is a google chromium I thought I can use the USB Web-Api:

So I created a ponent like this:

import React from 'react';

const UsbAccessButton = () => (
  <button
    className="usb-access-button"
    onClick={() => {
      navigator.usb
        .requestDevice({ filters: [{ vendorId: 0x0951 }] })
        .then(device => {
          console.log(device.productName);
          console.log(device.manufacturerName);
        })
        .catch(error => {
          console.log(error);
        });
    }}
  >
    Get USB Access
  </button>
);

export default UsbAccessButton;

The vendorId is the correct one for my specific USB stick. But when I click on the button I get a error like this:

DOMException: No device selected.       usb-access-buttonponent.jsx:14

But I want to list the devices available so the user can choose between. So maybe I didn't understand some parts of the docs or what is causing problems here?

UPDATE: When I run this app inside my default chrome browser I get the dialogue to choose between the usb devices. So it looks like this error is more related to electron itself.

Hello I'm trying to get access to a usb stick from an electron application written in reactjs.

Since electron is a google chromium I thought I can use the USB Web-Api: https://developer.mozilla/en-US/docs/Web/API/USB

So I created a ponent like this:

import React from 'react';

const UsbAccessButton = () => (
  <button
    className="usb-access-button"
    onClick={() => {
      navigator.usb
        .requestDevice({ filters: [{ vendorId: 0x0951 }] })
        .then(device => {
          console.log(device.productName);
          console.log(device.manufacturerName);
        })
        .catch(error => {
          console.log(error);
        });
    }}
  >
    Get USB Access
  </button>
);

export default UsbAccessButton;

The vendorId is the correct one for my specific USB stick. But when I click on the button I get a error like this:

DOMException: No device selected.       usb-access-button.ponent.jsx:14

But I want to list the devices available so the user can choose between. So maybe I didn't understand some parts of the docs or what is causing problems here?

UPDATE: When I run this app inside my default chrome browser I get the dialogue to choose between the usb devices. So it looks like this error is more related to electron itself.

• javascript
• reactjs
• electron
• webusb

2 Answers 2

It is not currently (January 2020) possible to have a device chooser for WebUSB in Electron - see the issue here: https://github./electron/electron/issues/14545

At the moment the suggested solution is to use the thegecko/webusb polyfill, that uses the node-usb library instead.

WebUSB support was added in Electron v23.0.0 according to the change log here

• https://www.electronjs/blog/electron-23-0#new-features

However, it appears to have had some issues with Mac Arm machines which was fixed in v24 branch.

And finally the WebUSB was opened to all devices (developer opt-in, since it is a security issue) in a later version of v24.