navigator.hid not available #1

TedNIVAN · 2019-04-03T12:13:57Z

Hi there,

I was looking for a web equivalent of Chrome.hid and I came across the WebHID API.
But when I'm trying to communicate with a custom hid device using navigator.hid, it returns undefined.

Is there something I need to do to access navigator.hid?

Ted

nondebug · 2019-04-03T20:11:33Z

Hi Ted,

The WebHID implementation is incomplete, currently there's no way to experiment with it.

TedNIVAN · 2019-04-03T20:45:09Z

Thanks for replying.
Is this still an active project?

nondebug · 2019-04-03T22:11:38Z

Yes, still active, I expect we'll have a working implementation in Chrome Dev in a month or so.

TedNIVAN · 2019-04-03T23:16:56Z

Great!
Could we expect to have it embedded in future Chrome versions?
Is there a roadmap for the WebHID support?

nondebug · 2019-04-03T23:37:04Z

The current roadmap is to have it in Stable by Chrome 78, although that is probably optimistic.

TedNIVAN · 2019-04-04T00:02:10Z

Alright good to know!
One last question: Will it be possible to use it in PWAs?

TedNIVAN · 2019-04-11T16:07:00Z

No clue about PWAs?

nondebug · 2019-04-11T23:03:52Z

Not sure yet. That said, it would surprise me if we couldn't expose this feature to PWAs given the nature of the feature and how we expect it to be used. Do you have a specific use case in mind?

TedNIVAN · 2019-04-12T21:40:14Z

The power of Chrome.hid is that we can communicate to custom hid device on Windows, Mac, and Linux with the same code. However, we can't use it on Mobile devices... If the WebHID API get approved for PWAs, we'll be able to do so on Android (not sure about iOS).

jammerxd · 2019-07-25T15:23:33Z

Is this still active?

TedNIVAN · 2019-08-30T11:58:34Z

Hi there,

I got 2 questions:

1 - Could we still expect a release for Chrome version 78?

2 - Could this work on Chrome for Android devices?

Regards,

nondebug · 2019-08-30T21:35:02Z

Partial WebHID functionality is available in Chrome 78 behind a flag on desktop OSes. You will need to enable the "Experimental Web Platform Features" flag (chrome://flags/#enable-experimental-web-platform-features) and restart Chrome.

Android support is planned but there's no estimate yet for when it will be available.

To show the WebHID device chooser, call navigator.hid.requestDevice. A promise is returned that resolves to the selected device:

// Show device chooser dialog and wait for a selection.
let device = await navigator.hid.requestDevice({filters:[]});

Filters can be used to narrow the list of devices shown to the user:

// Only show devices with vendor ID 0x1234.
navigator.hid.requestDevice({filters:[{ vendorId: 0x1234 }]});

// Only show devices with a top-level collection with the Joystick usage (usage page 1, usage 4).
navigator.hid.requestDevice({filters:[{ usagePage: 1, usage: 4 }]});

The device must be opened before sending or receiving reports:

await device.open();
if (device.opened)
  console.log("Device is open.");

To register an input report event listener:

device.oninputreport = e => {
  console.log("Got input report from " + e.device.productName + " with ID " + e.reportId);
  handleInputReport(e.reportId, e.data);
}

To send an output report:

// Send a 5-byte output report with report ID 0x01.
device.sendReport(0x01, new Uint8Array([0x23, 0x45, 0x67, 0x89]));

There are a few known issues that we plan to address before default-enabling WebHID.

On Windows, each top-level HID collection is enumerated as a separate device. When a device exposes several top-level collections, it can be difficult to guide the user to select the correct one. In some cases you can use usage filters so that only the correct device is shown.

Persistent permissions are not yet implemented, so the user will need to grant permissions each time the device is connected or the page is loaded. With persistent permissions, Chrome will remember the devices that each origin is allowed to access. Devices that an origin has already been granted permission to access are included in navigator.hid.getDevices().

TedNIVAN · 2019-08-30T22:21:09Z

Thanks for this awesome reply!

How can I be notified when webhid is available for Android?

Is there a website?

nondebug · 2019-08-30T22:34:11Z

Here's the bug for WebHID on Android:

https://crbug.com/964441

No website yet... (unless you count this repo)

TedNIVAN · 2019-08-31T09:59:43Z

I've checked it out and it says:
"WebHID will initially only be available on desktop versions of Chrome (Windows, Linux, Mac, Chrome OS) because the HID backend is not implemented on other platforms".

Maybe I've misinterpreted something but I think there is a HID backend for Android since it is based on a Linux kernel.

Moreover, there is a JAVA API available to access HID devices via an Android app.

nondebug · 2019-09-03T20:58:21Z

It's specifically the Chrome HID backend that isn't implemented on Android. Chrome has had support for HID devices for a while through the chrome.hid API, but it was never enabled on Android.

TedNIVAN · 2019-09-04T07:32:05Z

I hope this feature will come soon on Android. Thanks for the information.

TedNIVAN · 2019-09-26T10:55:00Z

This might interest you

Learn the essentials of HID device development: https://usbhid.io/

TedNIVAN · 2019-09-29T21:11:27Z

Partial WebHID functionality is available in Chrome 78 behind a flag on desktop OSes. You will need to enable the "Experimental Web Platform Features" flag (chrome://flags/#enable-experimental-web-platform-features) and restart Chrome.

Android support is planned but there's no estimate yet for when it will be available.

To show the WebHID device chooser, call navigator.hid.requestDevice. A promise is returned that resolves to the selected device:
// Show device chooser dialog and wait for a selection.
let device = await navigator.hid.requestDevice({filters:[]});
Filters can be used to narrow the list of devices shown to the user:
// Only show devices with vendor ID 0x1234.
navigator.hid.requestDevice({filters:[{ vendorId: 0x1234 }]});

// Only show devices with a top-level collection with the Joystick usage (usage page 1, usage 4).
navigator.hid.requestDevice({filters:[{ usagePage: 1, usage: 4 }]});
The device must be opened before sending or receiving reports:
await device.open();
if (device.opened)
  console.log("Device is open.");
To register an input report event listener:
device.oninputreport = e => {
  console.log("Got input report from " + e.device.productName + " with ID " + e.reportId);
  handleInputReport(e.reportId, e.data);
}
To send an output report:
// Send a 5-byte output report with report ID 0x01.
device.sendReport(0x01, new Uint8Array([0x23, 0x45, 0x67, 0x89]));
There are a few known issues that we plan to address before default-enabling WebHID.

On Windows, each top-level HID collection is enumerated as a separate device. When a device exposes several top-level collections, it can be difficult to guide the user to select the correct one. In some cases you can use usage filters so that only the correct device is shown.

Persistent permissions are not yet implemented, so the user will need to grant permissions each time the device is connected or the page is loaded. With persistent permissions, Chrome will remember the devices that each origin is allowed to access. Devices that an origin has already been granted permission to access are included in navigator.hid.getDevices().

Sending output reports works perfectly! However, it seems to have some issues on the API for receiving input reports.

I get an empty object while: console.log("data: ", e.data)
------------> data: DataView(1) {}

mame82 · 2019-12-04T15:51:17Z

Hey guys,

used WebHID to demo a vulnerability in Logitech Wireless Receivers (https://twitter.com/mame82/status/1202224133217624065).

I noticed that navigator.hid is available on Android version of Chrome 78 and 79 Beta.

Anyways, there's no user dialog to grant permissions for USB device access (see Twitter stream for reference).

Will WebHID arrive on Chrome for Android?

implemented demo for reference

Demo page: https://mame82.github.io/munifying-web/

Source: https://github.com/mame82/munifying-web

TedNIVAN · 2019-12-04T17:35:41Z

Hi @mame82

As far as I know the WebHID backend is still not implemented for Android..

However you can give it a try using Chrome Canary on the Play Store. I think it might implement features of future version 80 at the time I'm writing this.

mame82 · 2019-12-04T19:42:10Z

Hi @TedNIVAN,

seems you're right tried Chrome Canary and Dev in addition. No dice, doesn't even trigger a permission request, as other apps with USB access do.

Anyways, the code checks for navigator.hid === undefined to show an error, but it passes in all tested Chrome versions, once Experimental Web Platform features are enabled

nondebug · 2019-12-04T21:01:12Z

Ah, that's not right... thanks for the heads up. I've filed https://crbug.com/1030829 to track this in the Chromium bug repo.

nondebug · 2019-12-04T21:05:36Z

Will WebHID arrive on Chrome for Android?

We haven't committed to a timeline for this yet. In the short term we want to make WebHID available on desktop as a migration path for Chrome Apps that use the chrome.hid API. Probably the Android implementation will follow the stable launch of the API on desktop platforms.

Watch this bug for activity related to the Android implementation: https://crbug.com/964441

nondebug · 2019-12-04T21:23:08Z

Sending output reports works perfectly! However, it seems to have some issues on the API for receiving input reports.
I get an empty object while: console.log("data: ", e.data)
------------> data: DataView(1) {}

I think this is working as intended. DataView can't log its contents because it doesn't have an inherent element width. You can log the input report bytes by wrapping the underlying ArrayBuffer in a TypedArray like Uint8Array:

> let device = await navigator.hid.requestDevice({filters:[]});
> await device.open();
> device.oninputreport = (e) => { console.log(e.reportId, new Uint8Array(e.data.buffer)); };
1   <--- report ID
Uint8Array(63) [122, 131, 126, 128, 8, 0, 144, 0, 0, 12, 114, 253, 121,
0, 165, 254, 172, 255, 167, 1, 66, 30, 109, 5, 0, 0, 0, 0, 0, 23, 0, 0,
1, 111, 130, 55, 132, 31, 128, 0, 0, 0, 0, 128, 0, 0, 0, 128, 0, 0, 0,
0, 128, 0, 0, 0, 128, 0, 0, 0, 0, 128, 0]   <--- report bytes

dominiceden · 2020-06-21T19:23:05Z

Great work on this guys, I've been having some fun integrating a simple React app with a USB foot pedal for controlling audio playback. It works very nicely on Mac OS X Catalina 10.15.4 and Chrome 83 with experimental web features turned on. Your hard work is much appreciated!

However, I've had no such luck with Windows 10 Pro and Chrome 83, even with experimental web features turned on. navigator.hid is undefined in the console so no connection attempts can even be made in Chrome. Is there definitely Windows 10 support here?

reillyeon · 2022-02-09T23:01:24Z

This API is enabled by default in recent Chrome stable versions and is supported on Windows so I think this issue can be closed.

This was referenced Jun 12, 2019

Cannot interact with non-GUI HID interface WebBluetoothCG/web-bluetooth#393

Closed

Plan for USB HID support? WICG/webusb#29

Closed

experiment with USB & HID devices s-light/quasar_test#1

Closed

nondebug closed this as completed Feb 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

navigator.hid not available #1

navigator.hid not available #1

TedNIVAN commented Apr 3, 2019 •

edited

Loading

nondebug commented Apr 3, 2019

TedNIVAN commented Apr 3, 2019

nondebug commented Apr 3, 2019

TedNIVAN commented Apr 3, 2019 •

edited

Loading

nondebug commented Apr 3, 2019

TedNIVAN commented Apr 4, 2019 •

edited

Loading

TedNIVAN commented Apr 11, 2019

nondebug commented Apr 11, 2019

TedNIVAN commented Apr 12, 2019

jammerxd commented Jul 25, 2019

TedNIVAN commented Aug 30, 2019 •

edited

Loading

nondebug commented Aug 30, 2019

TedNIVAN commented Aug 30, 2019 •

edited

Loading

nondebug commented Aug 30, 2019

TedNIVAN commented Aug 31, 2019

nondebug commented Sep 3, 2019

TedNIVAN commented Sep 4, 2019

TedNIVAN commented Sep 26, 2019

TedNIVAN commented Sep 29, 2019

mame82 commented Dec 4, 2019 •

edited

Loading

TedNIVAN commented Dec 4, 2019

mame82 commented Dec 4, 2019

nondebug commented Dec 4, 2019

nondebug commented Dec 4, 2019

nondebug commented Dec 4, 2019

dominiceden commented Jun 21, 2020

reillyeon commented Feb 9, 2022

navigator.hid not available #1

navigator.hid not available #1

Comments

TedNIVAN commented Apr 3, 2019 • edited Loading

nondebug commented Apr 3, 2019

TedNIVAN commented Apr 3, 2019

nondebug commented Apr 3, 2019

TedNIVAN commented Apr 3, 2019 • edited Loading

nondebug commented Apr 3, 2019

TedNIVAN commented Apr 4, 2019 • edited Loading

TedNIVAN commented Apr 11, 2019

nondebug commented Apr 11, 2019

TedNIVAN commented Apr 12, 2019

jammerxd commented Jul 25, 2019

TedNIVAN commented Aug 30, 2019 • edited Loading

nondebug commented Aug 30, 2019

TedNIVAN commented Aug 30, 2019 • edited Loading

nondebug commented Aug 30, 2019

TedNIVAN commented Aug 31, 2019

nondebug commented Sep 3, 2019

TedNIVAN commented Sep 4, 2019

TedNIVAN commented Sep 26, 2019

This might interest you

TedNIVAN commented Sep 29, 2019

mame82 commented Dec 4, 2019 • edited Loading

implemented demo for reference

TedNIVAN commented Dec 4, 2019

mame82 commented Dec 4, 2019

nondebug commented Dec 4, 2019

nondebug commented Dec 4, 2019

nondebug commented Dec 4, 2019

dominiceden commented Jun 21, 2020

reillyeon commented Feb 9, 2022

TedNIVAN commented Apr 3, 2019 •

edited

Loading

TedNIVAN commented Apr 3, 2019 •

edited

Loading

TedNIVAN commented Apr 4, 2019 •

edited

Loading

TedNIVAN commented Aug 30, 2019 •

edited

Loading

TedNIVAN commented Aug 30, 2019 •

edited

Loading

mame82 commented Dec 4, 2019 •

edited

Loading