WebHID API: Control Everything via 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 hablaremos solo de USB.

¿Quién soy yo? Soy Nikita Dubko, soy desarrollador web, con unos 15 años de experiencia. Soy un poco podcaster, jugador de D&D, realmente me encanta hacer kayak con mis amigos y soy un poco baterista y pianista y lo usaremos en esta charla. Así que también soy un experto desarrollador de Google, y para mí GDE es sobre conocimiento. Y es realmente genial visitar algunas reuniones de GDE y saber algo sobre nuevas APIs web. Por ejemplo, sobre WebHAD y hablamos de ello ahora mismo gracias a las reuniones de GDE.

¿Y cómo empezó todo? Tal vez viste en Twitter algún tipo de frontend, no es programación real. Solo mueves algunos píxeles, coloreas algunos botones y ni siquiera tienes acceso a dispositivos reales. Nosotros, los programadores de C++, somos desarrolladores reales, 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 de algún tipo de lenguajes C++, no solo C++.

Para trabajar con dispositivos reales, debes usar la interfaz HID. HID — son Dispositivos de Interfaz Humana. Y lo usas mucho. Por ejemplo, es teclado, ratones, 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. Así que puede ser clase USB y 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 saber 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 datos en bruto para comunicarse con este dispositivo real. Pregunta al dispositivo real, ¿tienes algunos datos?, el hardware puede responder, sí, los tengo, tómalo. El sistema operativo procesa estos datos y devuelve el resultado de dicho procesamiento a la aplicación. Así que, es como una capa de abstracción, puedes escribir esta capa y nombrarla controlador. Pero para ser honesto, tenemos una encuesta en nuestro sistema operativo. Así que, cuando conectas algún dispositivo real a través de USB al sistema operativo, pregunta al dispositivo real, ¿tienes algo? Dispositivo real, no, no tengo.

¿Tienes? Está bien, tengo algo. Es encuesta. Es como encuesta HTTP en tus sitios web. Por defecto, es 125 GHz o 125 veces por segundo. Se trata de valores predeterminados, se trata de 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 tales valores, pero es por ejemplo. Y cuando conectas tu dispositivo al sistema operativo, este dispositivo debe ser enumerado. ¿Por qué? Por ejemplo, si usas un hub USB, solo tienes una salida para este hub, una entrada para tu laptop, por ejemplo, y puedes conectar muchos dispositivos a este hub. Así que 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 algún ID de dispositivo, y es un número. Así que cada paquete puede tener este ID de dispositivo para ayudar al sistema operativo a entender, está bien, eso es teclado, está bien, eso es gamepad y así sucesivamente. Y sí, tiene encuesta, pregunta a los dispositivos muchas veces por segundo. ¿Tenemos algo? Por favor, dame algunos datos. 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 datos, conjunto de bytes. Y estos informes de entrada son sobre algunos datos de un dispositivo real a tu laptop, a tu sistema operativo. Informes de características e informes de salida, es salida para tu laptop. Así que son datos de la laptop a tu dispositivo real.

Y los informes de características, son como informes de salida, pero tienen algunas características especiales. Para enviar algunos datos, para dar algunos datos 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 simple de números. Es un array de bytes. No sé. Así que este es un informe, y no es realmente legible, ¿verdad? Es solo byte, byte, byte, algunos desplazamientos. ¿Qué es? Deberías leer una especificación USB. Tiene parte de dispositivos de interfaz humana. Así que puedes encontrar que es 2001. Es una especificación realmente antigua. Así que sí, tiene muchos descriptores, y un descriptor es una forma de describir cómo un informe de entrada o salida debería verse.

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 tal manera como en descriptor.

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

Y por supuesto, incluso si 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, libusb-head-api-library. Es una capa de abstracción que puedes usar en tu aplicación. Pero soy un desarrollador front-end. No quiero usar bibliotecas de C++ en mi código. Pero HID ya está en tu navegador. Así que puedes encontrar un código fuente de Chromium, y en este archivo puedes encontrar que Chrome trabaja con gamepads, joysticks, mouses, teclados, keypads, y así sucesivamente. Y está bien. Trabajas con un teclado todos los días. Escribes algo para tu navegador, y el navegador puede trabajar con HID.

Pero, ¿y si un navegador puede ayudarnos, a los desarrolladores? ¿Y si puede darnos alguna 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 W3C. Y puedes encontrar la especificación en el grupo Web Platform Incubator Community. Así que tiene mucho texto sobre métodos, qué es el atributo navigator HID, y así sucesivamente. Así que por favor solo léelo para entender esta especificación. Y está habilitada por defecto en Chrome 89. Así que ni siquiera necesitas habilitar algunas características experimentales de la plataforma web. Simplemente está habilitada. Así que puedes usarla 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 huellas digitales y demás. Safari tampoco funciona con HID, debido a la prevención de seguimiento, pero Chrome tiene una gran audiencia, así que puedes usar HID como mejora progresiva.

Y sí, HID, web HID no funciona con entrada confiable. La entrada confiable es cuando trabajas con algunos datos privados a través de este dispositivo de entrada. Es 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 son datos sensibles. Así que HID no funcionará con esta entrada. Y 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 audio automáticamente 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 probemos tener alguna demo.

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. Al principio tenemos el atributo navigator HID. Y HID es la interfaz HID. Tiene algunas propiedades o algunos 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 algún dispositivo específico para trabajar y debes usar el método request device con estos filtros. Puedes tener algún ID de proveedor, ID de producto y tendrás alguna lista de dispositivos que tienen tales IDs de proveedor e IDs de producto. ¿Y dónde puedo encontrar este ID de proveedor y ID de producto? Al principio puedes encontrarlo en la página sobre bloqueo de dispositivos en Chromium. Se ve así y puedes encontrar ID de proveedor, ID de producto, nombre, número de serie y así sucesivamente. Es realmente una página interesante. Puedes encontrar muchos dispositivos conectados a tu portátil. Por ejemplo, el magic trick pod es un dispositivo HID también. Puedes trabajar con él de alguna manera. Y sí, debes convertir números de esta pestaña porque aquí hay 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, uso devicehunt.com.

Bien, tenemos alguna lista de dispositivos. Si queremos trabajar con solo un dispositivo, usaré dispositivos en cero, y deberíamos abrir alguna conexión a este dispositivo. Así que usaremos await-device-open, y tendremos 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 para reaccionar a algo. Y quiero usar el evento input report cuando mi dispositivo real me envíe algunos datos. Por ejemplo, clic de botón, así que puedo capturar este evento, escucharlo, y el evento tiene el atributo data, campo de datos. Es solo datos simples que puedo pasar y trabajar con ellos. Y tiene 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 decir que hice clic en algo.

Es una forma de decirlo. Y sí, los datos tienen un tipo data view. Así que puedes usar métodos de data view. Y sí, encontré un formato de datos para mi DualShock. Puedes encontrar algo interesante. 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 a valores booleanos y sí, tendré un código que puede ayudarme a usar algo de lógica binaria, tendré un triángulo expresado, cruz expresada y así sucesivamente. Bien.

Y DualShock tiene dos características adicionales. Primero, tiene una barra de luz. Esta barra de luz puede cambiar su color y tiene vibración. Así que quiero usarlo y para usarlo solo necesito establecer algunos datos. Usaré uint8 array. Solo lleno este array con números específicos. Realmente necesito leer la especificación sobre PlayStation DualShock y usaré un método device send report y funcionará. Así que es hora de la demostración. Déjame cambiar la página. OK. 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. Así que puedo usarlo de los datos también. Intentemos colorear nuestra barra de luz, no solo en los botones. Sí. ¡Hop! Cambia el color. Verde, naranja. Sí, funciona. E incluso puedo intentar vibrar.

Vamos a usar mi micrófono. Creo que puedes escucharlo, tales vibraciones. Tiene dos vibraciones que puedo controlar. Pesada y ligera. Ooh, algo de ASMR. Sí, puedo controlar mi gamepad y es realmente genial. Pero intentemos 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é.

Tengo un stream deck y tiene 15 botones. Quiero usarlo como una batería. Así que intentemos hacerlo. Dame un momento para desconectar el gamepad y conectar el stream deck.

Sí. Así que este es el stream deck. Este es mi stream deck. Y trataré de configurarlo para usarlo como una batería. Soy un baterista. Así que estoy feliz.

Estoy realmente feliz de que Pete LePage usara su stream deck para controlar Google Meet. Y tiene un Meet stream deck helper en GitHub. Puedo usar su código. Y estoy realmente feliz de que Brahms Van Damme usara este stream deck helper para crear su propia batería. Así que solo uso su código y el artículo para Brahms. Y encontré un gist interesante en GitHub sobre el protocolo del stream deck. Es realmente útil porque el protocolo del stream deck no es público. Deberías depurarlo para encontrar algunas características interesantes.

Así que, chicos, realmente, ayuden. Gracias. Son realmente útiles para mí con sus artículos y demostraciones. Y es hora de la demostración nuevamente. Abramos una página más. Ups. Puedes ver que tiene los mismos botones que en la página web. Así que, puedes usar WebPageID para mostrar algo en el Elgato Stream Deck, en sus botones. Y usémoslo para reproducir algo. Está bien. Espero que mi sonido sea grabado. ¡Sí, genial! Puedo tocar la guitarra sin guitarra.

Solo cinco notas y puedes tocar Seven Nation Army. Realmente 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 comenzar 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 realmente útiles.

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