javascriptreactjselectronwebusb

Get access to USB stick in Electron app fails with: No device selected exception

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.org/en-US/docs/Web/API/USB

So I created a component 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.component.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.

Solution

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

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