Expose WebHID to Web Workers

[razvanphp]

We are developing an in-browser racing game that relies heavily on gamepads and particularly complex racing wheels and pedals.

Given the differences in hardware, lack of support for Vibration and Haptic Feedback and pooling rather that event-based access, we decided to implement our control layer using WebHID instead of Gamepad API.

To be able to provide the lowest possible latency, we need to make sure the inputs are sent over to the backend ASAP (websockets in our case), without blocking the main thread, hence the need to access this API inside web workers is needed.

We see the same was done for service-workers (in extensions) in #97, so I assume this change is very similar and easy to add, the requestDevice should still reside in the main thread only.

Hope this is sufficient details for our use-case, otherwise we are happy for an open discussion, CCing @nondebug and @chengweih001 in.

Thank you in advance!

[beaufortfrancois]

My naive understanding is that it would be similar to WebUSB on Workers

[razvanphp]

Indeed, and that proposal was already accepted: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers#web_apis_available_in_workers

[beaufortfrancois]

@nondebug @chengweih001 I'm happy to update the spec and implement this in Chromium following what was done for WebUSB if that helps

[beaufortfrancois]

FYI, I've started a Chromium CL that adds support for Dedicated Workers to WebHID at https://chromium-review.googlesource.com/c/chromium/src/+/5841991 and it works great (so far) on my machine !

I've created https://webhid-worker.glitch.me/ to play with it. All you need is this Chromium patch and run $ ./out/Debug/Chromium.app/Contents/MacOS/Chromium --enable-blink-features=WebHIDOnDedicatedWorkers at the moment.

[razvanphp]

Looks great! I will test it with our devices too.

BTW: why only dedicated workers and not shared ones as well?

Thank you for the quick reaction!

[beaufortfrancois]

BTW: why only dedicated workers and not shared ones as well?

I believe it could be implemented in shared workers as well but I didn't look into it yet.

[beaufortfrancois]

Looks great! I will test it with our devices too.

How did it go with your devices?

[beaufortfrancois]

🎉 Support for dedicated workers in WebHID is now enabled by default in Chrome 131.0.6740.0.

[razvanphp]

I can confirm it is working beautifully! Thank you for the quick reaction!

PS: we should update the list of APIs available in workers here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers#web_apis_available_in_workers

[beaufortfrancois]

I can confirm it is working beautifully! Thank you for the quick reaction!

I'm happy about it as well! Please let us know when your web app is ready so that others can try it ;)

PS: we should update the list of APIs available in workers here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers#web_apis_available_in_workers

@chrisdavidmills may be able to help us!

[chrisdavidmills]

@beaufortfrancois sure thing, I can do that.

It might also make sense to add browser compat data entries to show when the WebHID interfaces were made available to web workers, in the same style as this: https://github.com/mdn/browser-compat-data/blob/63cd0efe688ecd6a7fe86bf65b09e82762a04b23/api/_globals/indexedDB.json#L50

Can you confirm which interfaces/features of https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API are specifically exposed to workers, so I know where to put these entries?

And it is just dedicated workers, for now, correct?

[beaufortfrancois]

Thank you @chrisdavidmills! It is just for dedicated workers and service workers for now. See https://github.com/WICG/webhid/pull/121

[Exposed=(DedicatedWorker,ServiceWorker), SecureContext]
partial interface WorkerNavigator {
    [SameObject] readonly attribute HID hid;
};

[Exposed=(DedicatedWorker,ServiceWorker,Window), SecureContext]
interface HID
interface HIDDevice
interface HIDConnectionEvent
interface HIDInputReportEvent

[chrisdavidmills]

@beaufortfrancois https://github.com/mdn/content/pull/36060.

Can you provide a tech review? Shouldn't take long, as the vast majority of the changes are just adding "supported in workers" banners to existing pages.

[xiaoshu88-1]

We are developing an in-browser racing game that relies heavily on gamepads and particularly complex racing wheels and pedals.

@razvanphp Hello, razvanphp Can I know what games you are developing with webhid? I am also working on webhid, and I am really looking forward to try your game if it is ready.

Thank you

[wurcyc]

We are developing an in-browser racing game that relies heavily on gamepads and particularly complex racing wheels and pedals.

Given the differences in hardware, lack of support for Vibration and Haptic Feedback and pooling rather that event-based access, we decided to implement our control layer using WebHID instead of Gamepad API.

To be able to provide the lowest possible latency, we need to make sure the inputs are sent over to the backend ASAP (websockets in our case), without blocking the main thread, hence the need to access this API inside web workers is needed.

We see the same was done for service-workers (in extensions) in #97, so I assume this change is very similar and easy to add, the requestDevice should still reside in the main thread only.

Hope this is sufficient details for our use-case, otherwise we are happy for an open discussion, CCing @nondebug and @chengweih001 in.

Thank you in advance!

hello i wonder what game do u develop? And what device do u use webhid to access?

[razvanphp]

The game is not launched yet, but maybe I can get a promise from @beaufortfrancois to promote it in the google chrome release newsletter once it is 🙂 The use-case is indeed unique, after we developed basic axis detection for wheels and pedals, we now work with hardware providers to implement custom force feedback and vibration via WebHID.

Here is a preview, you can follow us for the beta test!

https://www.instagram.com/reel/DBtzMqDNg_T/

https://www.instagram.com/reel/DDAQbCUNE_H/

[beaufortfrancois]

That's definitely something we could promote in https://developer.chrome.com/docs/capabilities/fugu-showcase for sure. @tomayac What do you think?

[tomayac]

That's definitely something we could promote in https://developer.chrome.com/docs/capabilities/fugu-showcase for sure. [@tomayac](https://github.com/tomayac) What do you think?

100%, whenever it's ready, feel free to submit the app using the link in the header of the showcase.