WebHID API

[00:00:00]
>> So there is another API known as WebHID that is not available today on Safari, that's why it's light green. It can work on Chromium based browser. In this case HID is Human Interface Device. You can use this to access device connected also through USB or Bluetooth, but they are using a standard protocol on hardware known as HID.

[00:00:30]
So it's a device to communicate with the user input or output, they can be both, that it's not standard, okay? So in this case, developers, so we can control devices and applications, but low level. In this case, users must grant permission through a browser dialog. So in this case is different, okay?

[00:00:58]
It's not like you have access immediately, no, the user must granted you permission to use that specific device. And this is also useful for non-standard input devices, not just the game pad with superpowers or with asteroids, they can be something really weird or really different. I have some examples in a second.

[00:01:21]
And it's a low-level API. That means that you have a lot of power, but also you have a lot of work. You need to understand how to talk to that particular device, you need the manual or you need to somehow get the information on how, what, which instructions do you need to send to that particular device.

[00:01:40]
So examples of devices you can talk to with stream decks from Elgato. So for streamers, it's pretty common these days to have these devices. I'm talking about that one. In that case, you can send images to each button. You can receive clicks from the buttons. And also there is a display here, And analog controls.

[00:02:02]
So with web human interface devices API, you can actually talk to that device or with a pedal for cooking, that's good, right? So with your feet you can touch, it depends on how you are touching or how many times you can do the several things. You can use game pads that are not standard.

[00:02:27]
You can talk to a mouse with a screen if you want to. I'm not sure who wants to use a mouse with a screen inside. That's the, or LED lights that you connect through USB. That's an output device, not an input. So, HID is not just for input.

[00:02:46]
So that's WebHID, but it's a very low-level API. This is how that works. You await for navigation hid.getDevices. In this case, the browser will render a browser selection dialog where the user will need to pick one, and then you can show information. Because it's a very low level, we're not gonna waste too much time because I don't know if you're going to use that, but we have a couple of examples.

[00:03:11]
In the examples we have WebHID demo and a demo for DualShock4, that is exactly this gamepad. So, with this one, with the first one I can click Connect Device and you will see the dialog. You must run these on Google Chrome or Microsoft Edge. So in the dialog it says, which device do you want to use?

[00:03:36]
And in this case it will show you more information about the device. And the other one, Dualshock4, I'm going to connect the controller. And you can see that now my controller appears there, wireless controller, connect. And now I have full control of the LCD color. I'm not sure if you can get that on the camera, but it's changing the colors.

[00:04:05]
The rumble, You will hear that on the microphone probably. The strongness, can you hear it? It's actually rumbling the inside. And also here of course you can also get all the information on the buttons, everything. But you can get that from the gamepad API as well. But here you can touch with a device that's a low level and do whatever you want, okay?

[00:04:32]
So that's cool. And also it has accelerometer and gyroscope. And by the way, it's not just that, for example, I have another example here. This little guy that I have here is a pointer, okay? So yeah, it's a pretty cool pointer, you can go forward, move forward, but it also has accelerometer.

[00:04:52]
So I can also read that as a WebHID device, and know if I'm pointing, where I'm pointing. So I can read everything from the device using WebHID.