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?
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?
Share Improve this question edited Aug 21, 2019 at 16:43 BenMorel 36.7k52 gold badges205 silver badges337 bronze badges asked Sep 8, 2017 at 20:59 GuyGuy 1,5971 gold badge19 silver badges30 bronze badges1 Answer
Reset to default 6Until 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.
}
});