Elige la API adecuada para comunicarte con el dispositivo de hardware que elijas.
El objetivo de esta guía es ayudarte a elegir la mejor API para comunicarte con un dispositivo de hardware (p.ej., una cámara web, un micrófono, etc.) en la Web. Cuando digo “mejor”, me refiero a que te brinda todo lo que necesitas con la menor cantidad de trabajo. En otras palabras, conoces el caso de uso general que quieres resolver (p.ej., acceder a un video), pero no sabes qué API usar o te preguntas si hay otra forma de lograrlo.
Un problema que veo con frecuencia en los desarrolladores web es que se lanzan a las APIs de bajo nivel sin aprender sobre las APIs de nivel superior que son más fáciles de implementar y proporcionan una mejor UX. Por lo tanto, esta guía comienza por recomendar primero las APIs de nivel superior, pero también menciona las APIs de nivel inferior en caso de que hayas determinado que la API de nivel superior no satisface tus necesidades.
🕹 Cómo recibir eventos de entrada de este dispositivo
Intenta escuchar los eventos de teclado y puntero. Si este dispositivo es un control de juegos, usa la API de Gamepad para saber qué botones se presionan y qué ejes se mueven.
Si ninguna de estas opciones funciona, es posible que una API de bajo nivel sea la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
📸 Acceder al audio y video de este dispositivo
Usa MediaDevices.getUserMedia() para obtener transmisiones de audio y video en vivo desde este dispositivo y obtener información para capturar audio y video. También puedes controlar el desplazamiento lateral, la inclinación y el zoom de la cámara, y otros parámetros de configuración, como el brillo y el contraste, y hasta tomar imágenes fijas. Web Audio se puede usar para agregar efectos al audio, crear visualizaciones de audio o aplicar efectos espaciales (como el paneo). Consulta cómo generar perfiles del rendimiento de las apps de audio web en Chrome.
Si ninguna de estas opciones funciona, es posible que una API de bajo nivel sea la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🖨 Imprimir en este dispositivo
Usa window.print() para abrir un diálogo del navegador que le permita al usuario elegir este dispositivo como destino para imprimir el documento actual.
Si esto no funciona, una API de bajo nivel puede ser la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🔐 Autentícate con este dispositivo
Usa WebAuthn para crear una credencial de clave pública sólida, certificada y centrada en el origen con este dispositivo de seguridad de hardware para autenticar a los usuarios. Admite el uso de autenticadores U2F o FIDO2 con Bluetooth, NFC y roaming de USB, también conocidos como llaves de seguridad, así como un autenticador de plataforma, que les permite a los usuarios autenticarse con sus huellas dactilares o bloqueos de pantalla. Consulta Cómo compilar tu primera app de WebAuthn.
Si este dispositivo es otro tipo de dispositivo de seguridad de hardware (p.ej., una billetera de criptomonedas), una API de bajo nivel puede ser la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🗄 Accede a archivos en este dispositivo
Usa la API de acceso al sistema de archivos para leer y guardar cambios directamente en archivos y carpetas del dispositivo del usuario. Si no está disponible, usa la API de File para pedirle al usuario que seleccione archivos locales desde un diálogo del navegador y, luego, lea el contenido de esos archivos.
Si ninguna de estas opciones funciona, es posible que una API de bajo nivel sea la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🧲 Acceso a los sensores de este dispositivo
Usa la API de sensores genéricos para leer los valores de sensores sin procesar de los sensores de movimiento (p.ej., acelerómetro o giroscopio) y los sensores ambientales (p.ej., luz ambiente o magnetómetro). Si no están disponibles, usa los eventos DeviceMotion y DeviceOrientation para obtener acceso al acelerómetro, al giroscopio y a la brújula integrados en los dispositivos móviles.
Si no funciona, es posible que una API de bajo nivel sea la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🛰 Accede a las coordenadas de GPS en este dispositivo
Usa la API de Geolocation para obtener la latitud y longitud de la ubicación actual del usuario en este dispositivo.
Si no funciona, es posible que una API de bajo nivel sea la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🔋 Cómo verificar la batería de este dispositivo
Usa la API de Battery para obtener información del host sobre el nivel de carga de la batería y recibir notificaciones cuando cambie el nivel de batería o el estado de carga.
Si no funciona, es posible que una API de bajo nivel sea la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
📞 Comunicarse con este dispositivo a través de la red
En la red local, usa la API de Remote Playback para transmitir audio o video en un dispositivo de reproducción remoto (p.ej., una smart TV o una bocina inalámbrica) o usa la API de Presentation para renderizar una página web en una segunda pantalla (p.ej., una pantalla secundaria conectada con un cable HDMI o una smart TV conectada de forma inalámbrica).
Si este dispositivo expone un servidor web, usa la API de Fetch o WebSockets para recuperar algunos datos de este dispositivo. Para ello, accede a los extremos adecuados. Si bien los sockets TCP y UDP no están disponibles en la Web, consulta WebTransport para controlar las conexiones de red interactivas, bidireccionales y multiplexadas. Ten en cuenta que WebRTC también se puede usar para comunicar datos en tiempo real con otros navegadores a través de un protocolo punto a punto.
🧱 Descubre cómo comunicarte con tu dispositivo
La decisión de qué API de bajo nivel debes usar se determina según la naturaleza de tu conexión física con el dispositivo. Si es inalámbrico, consulta Web NFC para conexiones inalámbricas de corto alcance y Web Bluetooth o Web Serial para dispositivos inalámbricos cercanos.
Con NFC web, puedes leer y escribir en este dispositivo cuando está cerca del dispositivo del usuario (por lo general, entre 5 y 10 cm, o 2 y 4 pulgadas). Las herramientas como NFC TagInfo de NXP te permiten explorar el contenido de este dispositivo con fines de ingeniería inversa.
Con Bluetooth Web, conéctate a este dispositivo a través de una conexión Bluetooth de bajo consumo. Debe ser bastante fácil comunicarse con él cuando usa servicios GATT de Bluetooth estandarizados (como el servicio de batería), ya que su comportamiento está bien documentado. De lo contrario, en este punto, debes encontrar documentación de hardware para este dispositivo o hacer ingeniería inversa. Para ello, puedes usar herramientas externas, como nRF Connect para dispositivos móviles, y herramientas integradas en el navegador, como la página interna
about://bluetooth-internalsen navegadores basados en Chromium. Consulta Reverse-Engineering a Bluetooth Lightbulb de Uri Shaked. Ten en cuenta que los dispositivos Bluetooth también pueden usar los protocolos HID o en serie.Con Serial por Bluetooth, comunícate con los servicios de RFCOMM en dispositivos Bluetooth Classic vinculados, como el perfil de puerto serie (SPP) estandarizado. Sin embargo, para los servicios personalizados basados en RFCOMM, deberás consultar la documentación del proveedor del dispositivo para obtener el UUID del servicio que se pasará a
requestPort().
Si es por cable, consulta estas APIs en este orden específico:
Con WebHID, comprender los informes y descriptores de informes HID a través de colecciones es clave para comprender este dispositivo. Esto puede ser un desafío sin la documentación del proveedor para este dispositivo. Herramientas como Wireshark pueden ayudarte a realizar ingeniería inversa. También puedes usar la app web HID Explorer para volcar la información de los dispositivos HID en un formato legible por humanos.
Con Web Serial, sin la documentación del proveedor para este dispositivo y los comandos que admite, es difícil, pero aún es posible con una suposición afortunada. Para realizar la ingeniería inversa de este dispositivo, se puede capturar el tráfico USB sin procesar con herramientas como Wireshark. También puedes usar la app web de Serial Terminal para experimentar con este dispositivo si usa un protocolo legible por humanos.
Con WebUSB, sin documentación clara para este dispositivo y los comandos USB que admite, es difícil, pero aún es posible con una suposición afortunada. Mira Exploring WebUSB and its exciting potential de Suz Hinton. También puedes realizar ingeniería inversa de este dispositivo capturando tráfico USB sin procesar e inspeccionando los descriptores USB con herramientas externas, como Wireshark, y herramientas integradas en el navegador, como la página interna
about://usb-internalsen navegadores basados en Chromium.
Agradecimientos
Gracias a Reilly Grant, Thomas Steiner y Kayce Basques por revisar este artículo.
Foto de Darya Tryfanava en Unsplash.