API WebHID: Controla Todo a través de USB

Rate this content
Bookmark

El sistema operativo permite controlar diferentes dispositivos utilizando el protocolo de dispositivo de interfaz humana desde hace mucho tiempo. Con la API WebHID, puedes hacer lo mismo directamente desde el navegador. Vamos a hablar sobre las características y limitaciones del protocolo. Intentaremos conectar algunos dispositivos a la laptop y controlarlos con JavaScript.

23 min
20 Jun, 2022

Video Summary and Transcription

La charla de hoy presenta la API WebHID, que permite a los desarrolladores controlar dispositivos reales desde el navegador a través de USB. Se explora la interfaz HID, incluyendo teclados, ratones y gamepads. La charla cubre la enumeración de dispositivos, informes de entrada, informes de características e informes de salida. Se destaca el uso de HID en el navegador, especialmente en Chrome. Varias demos muestran cómo trabajar con diferentes dispositivos, incluyendo un controlador DualShock, un micrófono, un gamepad y un pad de batería Stream Deck. La charla concluye con recomendaciones y recursos para una exploración adicional.

Available in English

1. Introducción a la API webHAD y la interfaz HID

Short description:

Hoy hablaremos sobre la API webHAD como una forma de controlar dispositivos reales desde el navegador a través de USB. Exploraremos la interfaz HID, que incluye teclados, ratones y gamepads. También discutiremos los controladores, que actúan como una capa de abstracción entre las aplicaciones y el sistema operativo.

Hola, mi nombre es Nikita y hoy hablaremos sobre la API webHAD como una forma de controlar algunos dispositivos reales directamente desde el navegador a través de USB. Pero un pequeño aviso, no solo USB, también puedes trabajar con Bluetooth, pero hoy solo hablaremos de USB.

¿Quién soy? Soy Nikita Dubko, soy desarrollador web, con unos 15 años de experiencia. Soy un podcaster un poco, jugador de D&D, me encanta hacer kayak con mis amigos y también toco un poco la batería y el piano, y lo usaremos en esta charla. También soy un experto desarrollador de Google, y para mí GDE se trata de conocimiento. Y es realmente genial asistir a algunas reuniones de GDE y aprender algo sobre nuevas API web. Por ejemplo, sobre WebHAD y hablaremos de eso ahora mismo debido a las reuniones de GDE.

¿Y cómo comenzó todo? Tal vez hayas visto en Twitter algún tipo de front-end, no es una programación real. Solo mueves algunos píxeles, coloreas algunos botones y ni siquiera tienes acceso a dispositivos reales. Nosotros, los programadores de C++, los verdaderos desarrolladores, trabajamos con dispositivos reales, usamos controladores y así sucesivamente. Pero realmente, tal vez tengamos alguna posibilidad de trabajar con dispositivos reales. Así que exploremos. Hablemos sobre algún tipo de lenguajes C++, no solo C++.

Para trabajar con dispositivos reales, debes usar la interfaz HID. HID: son los Dispositivos de Interfaz Humana. Y lo usas mucho. Por ejemplo, es el teclado, el ratón, el gamepad, todos los dispositivos que ayudan a las personas a comunicarse con laptops, PCs. Y es como una capa entre la PC y el humano. Puede ser una clase USB y una clase Bluetooth. Hoy hablaremos sobre la clase USB, pero trabajar con Bluetooth no es tan complicado.

Y hablemos de los controladores, tales controladores. Para escribir un controlador, debes conocer mucho sobre tu dispositivo y, ya sabes, los controladores son como una capa de abstracción para ayudar a nuestra aplicación a trabajar con el sistema operativo. Si tenemos alguna aplicación y quiere comunicarse con algún dispositivo real, con hardware, debe llamar a alguna biblioteca del sistema operativo que puede ser un controlador. Y este controlador usará algunos data sin procesar para comunicarse con este dispositivo real. Pregunta al dispositivo real, ¿tienes algún data? El hardware puede responder, sí, lo tengo, tómalo. El sistema operativo procesa este data y devuelve el resultado de dicho procesamiento a la aplicación. Entonces, es como una capa de abstracción, puedes escribir esta capa y llamarla controlador. Pero para ser honesto, tenemos una encuesta en nuestro sistema operativo. Entonces, cuando conectas algún dispositivo real a través de USB al sistema operativo, le pregunta al dispositivo real, ¿tienes algo? Dispositivo real, no, no tengo. ¿Tienes?

2. Polling, Device Enumeration, and Reports

Short description:

Hoy discutiremos el polling en el contexto de la API webHAD y los dispositivos USB. Exploraremos el concepto de enumeración de dispositivos y el uso de identificadores de dispositivo. Además, cubriremos los informes de entrada, informes de características e informes de salida, que son conjuntos de datos intercambiados entre dispositivos y el sistema operativo. Estos informes se pueden manipular utilizando métodos como set report y set feature. Para obtener más detalles, consulta la sección de dispositivos de interfaz humana de la especificación USB.

¿Tienes algo? Bien, tengo algo. Es el polling. Es como el polling HTTP en tus sitios web. Por defecto, es de 125 GHz o 125 veces por segundo. Son los valores predeterminados, es sobre USB 2.0, pero hoy tenemos USB 3.0, tenemos USB tipo-C, es mucho más rápido.

Por ejemplo, redibujamos nuestra pantalla solo 60 veces por segundo en un navegador. Entiendo que no es correcto comparar esos valores, pero es un ejemplo. Y cuando conectas tu dispositivo al sistema operativo, este dispositivo debe ser enumerado. ¿Por qué? Por ejemplo, si usas un concentrador USB, solo tienes una salida para este concentrador, una entrada para tu laptop, por ejemplo, y puedes conectar muchos dispositivos a este concentrador. Entonces, el protocolo USB tiene algunas características que pueden ayudarte a usar algún bus USB para trabajar con muchos dispositivos. Y cada dispositivo tiene un identificador de dispositivo, que es un número. Entonces, cada paquete puede tener este identificador de dispositivo para ayudar al sistema operativo a entender, okay, eso es un teclado, okay, eso es un gamepad, y así sucesivamente. Y sí, tiene polling, pregunta a los dispositivos muchas veces por segundo. ¿Tenemos algo? Por favor, dame algunos data. Pero si hablamos de algunas entidades, estas entidades son informes de entrada, informes de características, e informes de salida. Es solo un conjunto de data, un conjunto de bytes. Y estos informes de entrada son sobre algunos data de un dispositivo real a tu laptop, a tu sistema operativo. Los informes de características e informes de salida son la salida para tu laptop. Entonces es data de la laptop al dispositivo real.

Y los informes de características, son como los informes de salida, pero tienen algunas características especiales. Para enviar algunos data, para dar algunos data a tu dispositivo real, puedes, por ejemplo, usar algunos métodos en el controlador llamados set report, set feature. Y sí, ¿qué es un informe? Un informe es solo un conjunto plano de números. Es una matriz de bytes. No lo sé. Entonces, esto es un informe, y no es realmente legible, ¿verdad? Es solo byte, byte, byte, algunos desplazamientos. ¿Qué es eso? Debes leer una especificación USB. Tiene la sección de dispositivos de interfaz humana. Entonces puedes encontrar que es de 2001. Es una especificación muy antigua. Entonces sí, tiene muchos descriptores, y un descriptor es una forma de describir cómo debería verse un informe de entrada o salida.

3. Introducción a HID y Datos de Dispositivos USB

Short description:

HID es una forma para que los desarrolladores describan y empaqueten datos de dispositivos USB. Wireshark puede ayudar a depurar los datos de dispositivos USB. Los desarrolladores de C++ pueden usar la biblioteca libusb-head-api, pero los desarrolladores de front-end pueden aprovechar HID en el navegador. Chrome admite HID para gamepads, joysticks, ratones, teclados y teclados numéricos.

Tiene algunas páginas de uso, colecciones, mínimo lógico, máximo lógico, y así sucesivamente. Es una forma de describir estos bytes, estos datos en bruto. Es una forma de ayudarnos, a los desarrolladores, a recopilar nuestros datos y empaquetarlos de la misma manera que en un descriptor.

Y sí, puedes depurar algunos datos de tu dispositivo USB utilizando Wireshark. Es una gran aplicación, está disponible en Mac OS, está disponible en Windows, y puede ayudarte a interceptar algunos datos entre tu laptop y el dispositivo USB.

Y por supuesto, aunque soy un desarrollador de C++, no quiero escribir todas estas líneas de código cada vez. Tengo una biblioteca, y puedes usar, por ejemplo, la biblioteca libusb-head-api. Es una capa de abstracción que puedes usar en tu aplicación. Pero yo soy un desarrollador de front-end. No quiero usar bibliotecas de C++ en mi código. Pero HID ya está en tu navegador. Así que puedes encontrar el código fuente de Chromium, y en este archivo puedes ver que Chrome funciona con gamepads, joysticks, ratones, teclados, teclados numéricos, y así sucesivamente. Y está bien. Trabajas con un teclado todos los días. Escribes algo en tu navegador, y el navegador puede trabajar con HID.

4. Introducción a la API Web HID

Short description:

Pero ¿qué pasa si un navegador puede ayudarnos, desarrolladores? ¿Y si puede proporcionarnos una API que nos ayude a trabajar también con dispositivos reales? Web HID es una API de navegador, no un estándar de W3C. Está habilitado de forma predeterminada en Chrome 89. Desafortunadamente, Mozilla y Safari no funcionan con HID debido a sus respectivas posiciones en los estándares. HID no funciona con entradas confiables, que incluyen datos sensibles como contraseñas y números de tarjetas de crédito. Requiere un gesto del usuario y proporciona control sobre el acceso al dispositivo. Veamos una demostración.

Pero ¿qué pasa si un navegador puede ayudarnos, desarrolladores? ¿Y si puede proporcionarnos una API que nos ayude a trabajar también con dispositivos reales? Y sí, tenemos algunos dispositivos de interfaz humana. Intentemos usarlo. ¡Ta-da! Web HID.

Web HID es una API de navegador, y no es un estándar de W3C. Puedes encontrar la especificación en el grupo de la Comunidad de Web Platform Incubator. Así que tiene mucho texto sobre métodos, qué es el atributo HID del navegador, y así sucesivamente. Por favor, léelo para entender esta especificación. Está habilitado de forma predeterminada en Chrome 89. Así que ni siquiera necesitas habilitar algunas características experimentales de la plataforma web. Simplemente está habilitado. Así que puedes usarlo ahora mismo como mejora progresiva, por ejemplo.

Desafortunadamente, Mozilla no funciona con HID debido a las posiciones de estándares de Mozilla. No implementarán la especificación debido a la privacidad de la huella digital, y así sucesivamente. Safari tampoco funciona con HID debido a la prevención del seguimiento, pero Chrome tiene una gran audiencia, así que puedes usar HID como mejora progresiva.

Y sí, HID, web HID no funciona con entradas confiables. Entrada confiable es cuando trabajas con algún dato privado a través de este dispositivo de entrada. Es una entrada confiable. Por ejemplo, cuando usas el teclado, escribes algunas contraseñas, números de tarjetas de crédito. Cuando usas el ratón, puedes hacer clic en capturar, no sé. Así que es un dato sensible. Por lo tanto, HID no funcionará con esta entrada. Puedes encontrar qué dispositivos son confiables en los códigos fuente de Chromium, por ejemplo. Y sí, requiere un gesto del usuario. Está bien. Si hablamos de audio, no podemos reproducir automáticamente audio sin un gesto del usuario. Y realmente quiero saber cuándo algún sitio web quiere tener acceso a mi dispositivo real. Es mi dispositivo. Es mi dispositivo privado. Así que quiero permitir que el navegador trabaje con mi dispositivo. Y vamos a intentar tener una demostración.

5. Connecting Devices and Working with HID

Short description:

Intentemos conectar mis dispositivos a las páginas web. Podemos usar la interfaz HID para trabajar con dispositivos reales. Al usar filtros con identificadores de proveedor y de producto específicos, podemos solicitar dispositivos que cumplan con nuestros criterios. Para encontrar estos identificadores, podemos consultar la página de bloqueo de dispositivos en Chromium o utilizar sitios web como devicehunt.com. Una vez que tenemos un dispositivo, podemos abrir una conexión con él y escuchar eventos, como informes de entrada. Estos informes contienen datos con los que podemos trabajar, incluido un ID de informe para la identificación del paquete. Por ejemplo, un ID de informe de 01 puede indicar un clic de botón.

Intentemos conectar mis dispositivos a las páginas web. ¿Cómo trabajar con HID? Tengo un PlayStation Dualshock y trataremos de conectarlo a la página. En primer lugar, tenemos el atributo HID del navegador. HID es la interfaz HID. Tiene algunas propiedades o métodos para trabajar con dispositivos reales. Y para trabajar con él, si tenemos el navegador HID, podemos usar algunos filtros.

Los filtros son la forma de tener un dispositivo específico con el que trabajar y debes usar el método de solicitud de dispositivo con estos filtros. Puedes tener un ID de proveedor, un ID de producto y tendrás una lista de dispositivos que tienen esos ID de proveedor y de producto. ¿Y dónde puedo encontrar este ID de proveedor y ID de producto? En primer lugar, puedes encontrarlo en la página sobre bloqueo de dispositivos en Chromium. Se ve así y puedes encontrar el ID de proveedor, el ID de producto, el nombre, el número de serie y así sucesivamente. Es realmente una página interesante. Puedes encontrar muchos dispositivos conectados a tu computadora portátil. Por ejemplo, el pod de truco mágico también es un dispositivo HID. Puedes trabajar con él de alguna manera. Y sí, debes convertir los números de esta pestaña porque aquí son números decimales y en el código uso números hexadecimales y en las especificaciones podemos encontrar muchos números hexadecimales. Así que por favor, mira esto. Y si quieres encontrar algún dispositivo raro, puedes usar algunos sitios web. Por ejemplo, yo uso devicehunt.com.

De acuerdo, tenemos una lista de dispositivos. Si queremos trabajar con solo un dispositivo, usaré el dispositivo en la posición cero, y debemos abrir alguna conexión con este dispositivo. Así que usaremos await-device-open, y tendremos una conexión entre un dispositivo real y nuestra página web. Después de eso, tendremos algunos eventos. Podemos escuchar estos eventos para tener algunos datos con los que reaccionar a algo. Y quiero usar el evento de informe de entrada cuando mi dispositivo real me envíe algunos datos. Por ejemplo, un clic de botón, así que puedo capturar este evento, escucharlo y el evento tiene el atributo de datos, el campo de datos. Es solo datos simples con los que puedo trabajar. Y tiene un ID de informe. El ID de informe es una forma de tener alguna firma en tus paquetes. Si tienes un paquete con algún ID de informe, puedes leer en la especificación sobre cada ID de informe. Por ejemplo, para algunos dispositivos, 01 es una forma de que hice clic en algo.

6. Trabajando con el Controlador DualShock

Short description:

Encontré un formato de datos para mi controlador DualShock que codifica ocho bits de información en solo un byte. Usando una tabla, puedo convertir señales en booleanos y manipular las características del controlador, como la barra de luz y la vibración. También puedo acceder a los datos del giroscopio y el acelerómetro y controlar el color de la barra de luz. ¡Es hora de la demostración!

Es una forma de decirlo. Y sí, data tiene un tipo de vista data. Por lo tanto, puedes usar métodos de la vista data. Y sí, encontré un formato de data para mi DualShock. Puedes encontrar cosas interesantes. Usamos solo un byte para codificar ocho bits de información. Si presionamos algún botón en mi DualShock, tendrá solo un bit de información. Es realmente genial. Es realmente eficiente y está bien.

Usaré esta tabla para convertir algunas señales en booleanos y sí, tendré un código que puede ayudarme a usar alguna lógica binaria, tendré un triángulo expresado, una cruz expresada y así sucesivamente. De acuerdo.

Y el DualShock tiene dos características adicionales. En primer lugar, tiene una barra de luz. Esta barra de luz puede cambiar de color y tiene vibración. Así que quiero usarlo y para usarlo solo necesito configurar algunos data. Usaré una matriz uint8. Simplemente lleno esta matriz con números específicos. Realmente necesito leer las especificaciones sobre el PlayStation DualShock y usaré un método device send report y funcionará. Así que es hora de la demostración. Permíteme cambiar de página. De acuerdo. Esa es una página que intentará conectarse a mi controlador inalámbrico. Ya está conectado y puedes encontrar datos del giroscopio y el acelerómetro data. Así que también puedo usarlo desde la vista data. Intentemos darle color a nuestra barra de luz, no solo en los botones. Sí. ¡Hop! Cambia de color. Verde, naranja. Sí, funciona. E incluso puedo intentar hacer vibrar.

7. Usando el Micrófono y el Gamepad

Short description:

Vamos a usar mi micrófono y controlar sus dos vibraciones. También puedo controlar mi gamepad usando la biblioteca Zorisa, WebHAD y el DS4 de GitHub. Pero quiero trabajar con otros dispositivos también.

Vamos a usar mi micrófono. Creo que puedes escucharlo, esas vibraciones. Tiene dos vibraciones que puedo controlar. Pesada y ligera. Ooh, algo de ASMR. Sí, puedo controlar mi gamepad y es realmente genial. Pero vamos a intentar trabajar con, por supuesto, la biblioteca Zorisa, WebHAD, el DS4, que puedes encontrar en GitHub y puede ayudarte a controlar WebHAD DualShock. Y úsalo, por supuesto, úsalo. No escribas mi código primitivo cada vez. Pero quiero trabajar con otros dispositivos y lo intentaré hacer.

8. Usando Stream Deck como un Pad de Batería

Short description:

Tengo un Stream Deck con 15 botones que quiero usar como un pad de batería. Lo configuraré utilizando el código de Pete LePage y Brahms Van Damme, quienes crearon sus propios pads de batería utilizando el ayudante de Stream Deck. Encontré un gist interesante en GitHub sobre el protocolo de Stream Deck, que no es público. Con tu ayuda, puedo usar el WebPageID para mostrar y reproducir algo en los botones del Elgato Stream Deck. ¡Ahora puedo tocar la guitarra sin una guitarra!

Tengo un Stream Deck y tiene 15 botones. Quiero usarlo como un pad de batería. Así que intentemos hacerlo. Dame un poco de tiempo para desconectar el gamepad y conectar el Stream Deck.

Sí. Así es el Stream Deck. Este es mi Stream Deck. Y trataré de configurarlo para usarlo como un pad de batería. Soy un baterista. Así que estoy feliz.

Estoy realmente feliz de que Pete LePage haya usado su Stream Deck para controlar Google Meet. Y él tiene un ayudante de Stream Deck para Meet en GitHub. Puedo usar su código. Y estoy realmente feliz de que Brahms Van Damme haya usado este ayudante de Stream Deck para crear su propio pad de batería. Así que solo uso su código y el artículo de Brahms. Y encontré un gist interesante en GitHub sobre el protocolo de Stream Deck. Es realmente útil porque el protocolo de Stream Deck no es público. Debes debug para encontrar algunas características interesantes.

Así que, chicos, realmente, ayuda. Gracias. Realmente me ayudan con sus artículos y demos. Y es hora de la demostración nuevamente. Abramos otra página. Oops. Puedes ver que tiene los mismos botones que en la página web. Entonces, puedes usar WebPageID para mostrar algo en el Elgato Stream Deck, en sus botones. Y vamos a usarlo para tocar algo. Ok. Espero que se grabe mi sonido. Sí, ¡genial! Puedo tocar la guitarra sin guitarra.

9. Conclusion and Recommendations

Short description:

Solo cinco notas y puedes tocar Seven Nation Army. Usé un navegador para tocar la guitarra. No olvides cerrar una conexión antes de descargar la página. Echa un vistazo al increíble repositorio web HID en GitHub para encontrar artículos, especificaciones y ejemplos. Encuentra mis diapositivas en mefodi.dev.tlk.org o usa el código QR. Conéctate conmigo en Twitter como DarkMefodi.

Solo cinco notas y puedes tocar Seven Nation Army. Muy genial. Usé un navegador para tocar la guitarra. Genial. Sé un buen desarrollador. No olvides cerrar una conexión antes de descargar la página solo para ayudar a otra página a trabajar con estos dispositivos para conectarse a ellos.

¿Y qué sigue? Te recomiendo un increíble repositorio web HID en GitHub. Tiene muchos artículos, especificaciones, ejemplos, cómo usar web HID. Me inspira mucho. Y si quieres empezar a trabajar con dispositivos HID, realmente te recomiendo un artículo en web dev sobre cómo conectar tu dispositivo a tu laptop. Algunos conocimientos básicos, pero es realmente útil.

Y puedes encontrar mis diapositivas en mefodi.dev.tlk.org, o usa este código QR. Y soy DarkMefodi en Twitter. Así que mantengámonos en contacto. Mantente seguro y utiliza el poder del front-end para características realmente interesantes en tus sitios web. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
JSNation 2022JSNation 2022
21 min
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
WebAssembly is a browser feature designed to bring predictable high performance to web applications, but its capabilities are often misunderstood.
This talk will explore how WebAssembly is different from JavaScript, from the point of view of both the developer and the browser engine, with a particular focus on the V8/Chrome implementation.
WebVM is our solution to efficiently run unmodified x86 binaries in the browser and showcases what can be done with WebAssembly today. A high level overview of the project components, including the JIT engine, the Linux emulation layer and the storage backend will be discussed, followed by live demos.
JSNation 2022JSNation 2022
22 min
Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications
Top Content
In this talk I will show Makepad, a new UI stack that uses Rust, Wasm, and WebGL. Unlike other UI stacks, which use a hybrid approach, all rendering in Makepad takes place on the GPU. This allows for highly polished and visually impressive applications that have not been possible on the web so far. Because Makepad uses Rust, applications run both natively and on the Web via wasm. Makepad applications can be very small, on the order of just a few hundred kilobytes for wasm, to a few megabytes with native. Our goal is to develop Makepad into the UI stack of choice for lightweight and performant cross-platform applications. We intend to ship with our own design application and IDE.
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!

Workshops on related topic

Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.