API WebHID: Controla Todo a través de USB

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?

¿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.

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.

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.

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.

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.

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.

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.

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.