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?
The USB interface of the WebUSB API provides attributes and methods for finding and connecting USB devices from a web page. Use navigator. usb to get access to the USB object. The USB interface inherits from EventTarget .
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.
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With