WebBluetooth: El eslabón perdido

Los navegadores se han construido en torno a la idea de que solicitarían datos de un servidor y los renderizarían. Por lo tanto, los navegadores siempre han sido excelentes para renderizar datos. Pero siempre fue bastante difícil interactuar con dispositivos que estaban junto al navegador. Ahora, con todo el movimiento de aplicaciones web progresivas, con el proyecto Fugu, hemos visto un par de nuevas API, hemos visto web USB, web serial API, web HID API, y así sucesivamente, y todas intentan llenar esta brecha entre el navegador y los dispositivos periféricos.

Ahora, veamos algunos conceptos básicos. Bluetooth es una tecnología inalámbrica estándar para intercambiar datos que utiliza la misma frecuencia que LAN inalámbrica, pero envía cantidades muy pequeñas de datos a distancias bastante cortas. Si ahora piensas en esa experiencia antigua, defectuosa y frustrante que tuviste con tus primeros teléfonos inteligentes o tus primeros teléfonos móviles, tengo muy buenas noticias para ti, porque eso era el antiguo Bluetooth, Bluetooth 4.0. También tenemos BLE, que significa Bluetooth de baja energía, y ese es un estándar completamente nuevo que se construyó específicamente para dispositivos IoT, por lo que es muy eficiente en energía y también funciona a distancias bastante largas. Y con Web Bluetooth, siempre hablamos de BLE, porque es un estándar que se implementó. Entonces, Bluetooth normalmente funciona así. Tendrías un dispositivo central que es el dispositivo más capaz en términos de CPU y uso de batería, y luego tendrías dispositivos periféricos. Ahora, también nos referimos a ellos como el cliente y el servidor, y es muy importante que puedas conectar un dispositivo central a varios dispositivos periféricos, pero un dispositivo periférico solo puede estar conectado a un dispositivo central al mismo tiempo. Esa también es la razón por la que, por ejemplo, no puedes conectar tus auriculares y tu reloj inteligente al mismo teléfono inteligente, pero no puedes conectar tus auriculares a dos teléfonos inteligentes al mismo tiempo. Eso simplemente no es posible. Ahora, como parte de BLE, el grupo de interés especial de Bluetooth introdujo GATT, el perfil genérico de atributos, y básicamente es la forma en que el dispositivo periférico expone sus datos al cliente. Tendrías el servidor GATT que contiene una lista de servicios GATT, cada servicio es simplemente un grupo de características, y ahora, una característica identifica un valor y también define qué operaciones se pueden realizar en ese valor. Por ejemplo, si tienes un nivel de batería, tiene sentido que puedas leer el nivel de batería y también quieres ser notificado cuando el nivel de batería cambie en el dispositivo, pero no tiene sentido que sea escribible porque no puedes simplemente sobrescribir el nivel de batería y esperar que sea mágicamente 100 por ciento, si ese fuera el caso, nuestros problemas de energía, problemas de cambio climático se resolverían. Pero no es así. Pero si tienes la dirección de vuelo de un dron, por ejemplo, ahí sí tiene sentido o es crucial que puedas controlar la dirección, que no puedas controlar tu dron. Necesita ser escribible. Ahora, un valor GATT es una estructura de datos de bajo nivel, es solo un conjunto de bytes. Si ahora miras el lado derecho, aquí tengo la implementación de un servidor GTT del Playbulb Sphere, que es una bombilla de luz BLE, y tenemos los servicios, tenemos las características, y es muy importante mencionar que los servicios y características no se identifican realmente por sus nombres, sino por UUID. Hay una lista de UUID estándar mantenidos por el grupo de interés especial de Bluetooth que cubren casos de uso comunes como información sobre el dispositivo o niveles de batería, por lo que sabemos que en cada dispositivo, el servicio, o digamos el servicio 180F, sería el servicio de batería, pero también tenemos servicios no estándar como en ese ejemplo el servicio de luz y la característica de luz, y ahí podemos utilizar UUID de 128 bits, por lo que son largos y únicos, o podemos elegir UUID de 16 bits que aún no están especificados, en ese caso tenemos FF0F para el servicio de luz y FFFC para la característica. La parte complicada ahora es cómo se estructuran esos valores. Los dos primeros son bastante básicos, es básicamente una cadena codificada en UTF-8. El nivel de batería es la representación decimal de nuestro byte, por lo que 5a sería el 90 por ciento, y ahora para las características personalizadas, tenemos que recurrir a la documentación, y en la mayoría de los casos no hay documentación, pero en nuestro caso, tenemos documentación, por lo que sabemos que el Playbulb Sphere tiene cuatro bytes, cuatro LED dentro de la bombilla de luz, y con el valor de cada byte, puedes controlar la intensidad de uno de esos LED, y lo interesante ahora es que con rojo, verde y azul, básicamente podemos crear cualquier color que tengamos en el espacio de color RGB. Ahora que tenemos los conceptos básicos, veamos la API web. La API web es bastante sencilla.

Primero debes solicitar un dispositivo, pasar un conjunto de filtros, necesitamos especificar los servicios que usaremos más adelante, y cuando se ejecute ese código, el usuario verá esta ventana emergente, allí podemos seleccionar uno de todos los dispositivos que coincidan con los filtros que hemos definido.

En nuestro caso, queremos filtrar por el nombre Playbop Sphere, y por lo tanto podemos seleccionar el Playbop Sphere, una vez que el usuario se conecta a él, podemos llamar a device.connect para conectarnos al servidor.

Para leer el valor, podemos obtener el servicio utilizando el UUID y también la característica utilizando el UUID. Ahora, en la característica, podemos llamar a characteristic.readValue para leer el valor, y en ese caso, recibiremos una vista de datos y ahora estamos interesados en el primer byte de la vista de datos en formato decimal, así que en este momento solo queremos imprimir en la consola el nivel de batería de la característica del dispositivo.

Dado que la característica de la batería también permite la operación de notificación, podemos agregar un event listener para el cambio de valor de la característica, y eso se activará cada vez que el nivel de batería cambie en el dispositivo. Es muy importante aquí también que necesitamos llamar a notifications porque, por eficiencia de la batería, esos eventos no se envían de forma predeterminada.

Para escribir valores, nuevamente necesitamos solicitar el servicio y la característica, esta vez para el servicio de luz. Ahora podemos leer el valor como antes, pero ahora estamos interesados en el valor RGB. Así que el segundo, el tercer y el cuarto valor. Y ahora, para escribir un valor, podemos llamar a la función writeValue sin respuesta o con respuesta. Eso depende del dispositivo que estés utilizando. Pero ambas funciones aceptan una nueva vista de datos. Así que en ese caso, simplemente sobrescribiremos la vista de datos actual y eso cambiará la característica en el dispositivo.

Ahora comencemos con una pequeña demostración. En primer lugar, mis diapositivas se ejecutan en el navegador. Lo que puedo hacer es abrir la consola. Y estos son exactamente los comandos que has visto antes. En primer lugar, copiemos esto. No soy una persona de trackpad, pero creo que funcionará. Ahora podemos conectarnos al Playbop Sphere. En el dispositivo, podemos seleccionar el servidor. En el servidor, podemos seleccionar el servicio de diapositivas. Y en el servicio de luz, ahora podemos escribir un nuevo valor. Así que en nuestro caso, queremos sobrescribir ese valor y esperamos que la bombilla de luz se encienda. Sí, OK. Lo siento, olvidé obtener la característica. Intentémoslo de nuevo. Aquí vamos. No, lo siento. Espera.

OK, intentémoslo de nuevo. Siempre es agradable hacer codificación en vivo o demostraciones en una conferencia. Así que vamos de nuevo. Conectémonos. Servicio. Ahora. Característica. Y ahora el momento de la verdad. ¿Se pondrá azul? Sí, lo hará.

OK. Entonces, al final, con Web Bluetooth, básicamente ahora podemos controlar cualquier dispositivo BLE que tengamos a nuestro alrededor. Pero hay un problema. La ingeniería inversa de dispositivos Bluetooth es un gran dolor de cabeza. Antes de encontrar el Play Bulbsphere, probé un par de bombillas de luz RGB diferentes. Y el problema es que, como no hay un estándar para la luz, cada fabricante tiene su propio conjunto de características, sus propios UUID. Y yo estaba allí tratando de darle sentido a esto. Y eso fue una gran pérdida de tiempo y energía.

Por otro lado, hay todo un nuevo mundo justo afuera de la ventana, el mundo de los Arduinos, Raspberry Pis, PICOs, hardware. Quiero decir, soy un desarrollador front-end. Nunca tuve contacto con hardware en ningún momento de mi carrera. Pero pensé, bueno, vamos a embarcarnos en una aventura. Y resultó que la aventura fue un agujero de conejo bastante profundo. Y todavía estoy en algún lugar por ahí. Pero logré crear este Zumbador BLE, que es un Arduino Nano RP2040, que es el último chip o módulo de Arduino, debo decir. Y también hay un chip Bluetooth en la placa.

Entonces, lo que tengo aquí, básicamente, es solo un servidor, un servicio, una característica que tiene un byte. Y ese byte puede ser cero cuando está en estado predeterminado, o puede ser 255 cuando se presiona. Y ahora, mi aplicación web utiliza el Bluetooth para escuchar el evento de cambio de valor de esa característica. Y cada vez que cambia de cero a 255, simplemente mostraré la siguiente diapositiva.

Lo siguiente, lo estoy usando todo el tiempo, pero el problema es que tal vez no lo veas. Bueno, lo siguiente que construí es este pequeño coche. Es nuevamente un Arduino Nano. Se llama Speed Wheels. No es muy rápido, pero mi hijo sugirió el nombre y estoy bien con eso. Así que es un Arduino Nano conectado a esos motores y a un anillo LED RGB.

El problema que tuve aquí es que mi conocimiento de C++ es muy, muy limitado. Y todavía es muy limitado. Y mis ideas eran enormes. Así que lo que tuve que hacer es mantener la parte del dispositivo muy pequeña, muy fácil. Y mover toda la lógica pesada al cliente, a JavaScript, donde me siento cómodo. Entonces, lo que hice básicamente es tener una función que acepta dos valores, uno para la rueda izquierda y otro para la rueda derecha, entre 0, que sería la máxima velocidad hacia atrás, 100, que sería detenerse, y 200, máxima velocidad hacia adelante. Y como esos valores están en el rango de un byte, ahora podemos usar una característica con dos bytes, uno para la rueda izquierda y otro para la rueda derecha.

También tengo una demostración. Y esperemos que esta vez funcione como se espera. También, como tengo mi escenario aquí para que todos lo vean, como una aplicación web es multiplataforma por defecto, puedo usar mi smartphone con la misma aplicación web que tengo en mi escritorio. Ahora puedo conectar dos Speed Wheels. Y ahora puedo. ¡Woo! ¡Woo! ¡Woo! ¡Woo! ¡Ok, funcionó. Pero el problema es que las teclas de flecha son geniales, pero son muy aburridas. Así que se me ocurrió, o intenté aprovechar todo el potencial de la plataforma web. Por ejemplo, tenemos un giroscopio en el smartphone. Así que ahora puedo usar la API de orientación del dispositivo para convertir el movimiento de mi, ah, no. Ok. Todavía está funcionando, así que sí funciona. Pero quiero decir, la orientación del dispositivo es genial, pero tenemos cosas interesantes en la web. Por ejemplo, tenemos el aprendizaje automático. Y como sabrás, podemos usar TensorFlow.js dentro del navegador. Y lo que hice fue tomar un modelo de gestos de mano. Aquí vamos.

Y ahora realmente espero que la luz esté bien. Lo que hago básicamente es analizar la entrada de video proporcionada, y trato de convertir los gestos de mano en eventos característicos correctos. Y tiene cierto retraso, pero funciona. En resumen, tenemos estas nuevas y poderosas APIs. Podemos conectarlas al máximo potencial de la plataforma web. Y me pregunto, ¿hasta dónde podemos llegar? Quiero decir, tenemos, o dije al principio que podemos conectar múltiples dispositivos periféricos a un dispositivo central. Pero, ¿también podemos conectar múltiples dispositivos a una sola aplicación web? Si es así, ¿dónde están los límites? Y no encontré ningún límite.

Así que yo y mis pequeños amigos aquí, creamos una pequeña demostración donde estoy utilizando la API Web Audio para analizar una entrada de audio dada. Y allí puedo interactuar con el audio. Y por ejemplo, puedo obtener el volumen de una frecuencia dada o el ritmo y todo. Y esperemos que el audio también esté encendido. Eso debería ser todo. No quería hacerlo en una demostración en vivo porque hay tantas cosas que necesitan funcionar correctamente.

Podemos conectar la bombilla. Tengo dos pequeñas matrices de LED donde puedo establecer el valor de cada uno de esos LED. Necesito acelerar un poco el proceso porque lleva demasiado tiempo. Pero una vez que todos los dispositivos están conectados, podemos llevarte un poco atrás en el tiempo. Y... Entonces, al final, todo lo que has visto en el video es la aplicación web que analiza la entrada de audio y luego envía muchos pequeños comandos a mis dispositivos.

Eso fue todo de mi parte. Fue genial estar aquí. Tengo algo que decir. Si eres un desarrollador web, si eres un desarrollador front-end, y creo que la mayoría de ustedes lo son, y alguna vez has querido adentrarte en el desarrollo de hardware, ahora es el momento perfecto. Muchas gracias. Mis diapositivas están en línea, así que tendrás todos los enlaces a los hilos de Twitter y los perfiles de GitHub también. Y si hay alguna pregunta, creo que tenemos un par de minutos. ¡Hay algunas preguntas! Vamos a tomar nuestros lugares aquí, MC, orador, y le pido amablemente a nuestro equipo de AV que ponga las preguntas en la pantalla grande.

Sí, entonces, en realidad, ¿cómo controlas dos dispositivos si eso es posible en absoluto? Bueno, es posible. Tal vez hayas visto las dos matrices de LED, tienen el mismo nombre, y simplemente puedes conectarte a ellas y luego tienes dos instancias de ese dispositivo. Así que al final, eso está perfectamente bien, sin problema. Genial. Bueno, esa es una pregunta muy interesante. ¿Puedes usar Bluetooth para controlar tu dispositivo si estás lejos de él? Bueno, por supuesto, debe estar dentro del rango, en el rango de Bluetooth, porque no puedes conectarte de otra manera. Creo que esta no es una pregunta muy simple. Quiero decir, sí, por supuesto, no es posible por Bluetooth, ¿verdad? Porque el punto principal de Bluetooth es estar cerca. Pero ¿por qué no crear algún tipo de biblioteca para proporcionar un respaldo? Entonces, si estás fuera del alcance de Bluetooth, tal vez puedas intentar suerte con alguna conexión cloud y enviar comandos desde tu centro de control a través de otros canales. Además, Bluetooth, el alcance no es tan pequeño, porque con Bluetooth 5.0, he leído que debería ser posible comunicarse a más de 100 metros o más.

Así que está bastante bien, diría yo. No estoy seguro de cuánto tiempo llevará, pero debería ser posible. Sí, solo piensa que este tipo de biblioteca de respaldo podría ser al menos un nominado para el próximo año en una de estas nominaciones. Tal vez, no lo sé. El proyecto más divertido o más emocionante. De acuerdo.

Sin embargo, la última pregunta, o en realidad no la última, así que profundicemos dos minutos más. Primero, una pregunta sencilla. ¿Esta API está disponible en todos los navegadores y qué hay del soporte multiplataforma? Bueno, no lo está. El problema es que ya está disponible en todos los navegadores basados en Chromium desde 2017. No está disponible, por ejemplo, en WebKit. Eso también significa que no podemos usarlo en iOS, porque todos los navegadores necesitan utilizar WebKit en el fondo, pero hay alguna esperanza porque creo que ahora hay algunos cambios regulatorios donde tal vez Apple se vea obligado a permitir otros motores de navegadores en iOS, y también he visto últimamente algún movimiento en todo el ecosistema de WebKit, así que ahora que permitirán notificaciones push, tal vez también cambien de opinión sobre todas las API de hardware, porque ese también es el caso de WebUSB, WebSerial, todas esas cosas geniales, pero por ahora, está disponible en navegadores basados en Chromium. Sí, y diría que las mejoras progresivas y la detección de características son tus mejores amigos.

Muchas gracias, Niko. Dame cinco. Sí, muchas gracias.