Chrome WebUSB API returns no device when using navigator.usb.getDevices()
I'm trying the new Chrome WebUSB API, but can't see any connected device.
Tried this for example, with different USB devices connected to my Windows 7 PC:
<html>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
console.log('Clicked');
navigator.usb.getDevices()
.then(devices => {
devices.map(device => {
console.log('Device:');
console.log(device.productName);
console.log(device.manufacturerName);
});
});
}
</script>
</body>
</html>
But got no device.
What am I doing wrong? Should it work with any device?
Answer
Until your page has requested permission to access a device navigator.usb.getDevices() will return an empty list. Inside your onclick handler call navigator.usb.requestDevice() instead with a filter selecting the vendor and product IDs of the devices you would like to support. See the example from the specification:
let button = document.getElementById('request-device');
button.addEventListener('click', async () => {
let device;
try {
device = await navigator.usb.requestDevice({ filters: [{
vendorId: 0xABCD,
classCode: 0xFF, // vendor-specific
protocolCode: 0x01
}]});
} catch () {
// No device was selected.
}
if (device !== undefined) {
// Add |device| to the UI.
}
});