Elige la API adecuada para comunicarte con el dispositivo de hardware que prefieras.
El objetivo de esta guía es ayudarte a elegir la mejor API para comunicarte con un dispositivo de hardware (p.ej., cámara web, micrófono, etc.) en la Web. Por "mejor", me refiero a que te da todo lo que necesitas con la menor cantidad de trabajo. En otras palabras, conoces el caso de uso general que deseas resolver (p.ej., el acceso a videos), pero no sabes qué API usar o te preguntas si hay otra manera de lograrlo.
Un problema en el que suelen caer los desarrolladores web es saltar 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, en esta guía, se comienza recomendando primero las APIs de nivel superior, pero también se mencionan las APIs de nivel inferior en caso de que hayas determinado que la API de nivel superior no satisface tus necesidades.
🕹 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, una API de bajo nivel puede ser la solución. Para comenzar, consulta Descubre cómo comunicarte con tu dispositivo.
📸 Accede al audio y video desde este dispositivo.
Usa MediaDevices.getUserMedia() para obtener transmisiones de audio y video en vivo desde este dispositivo y obtén información sobre la captura de 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, o incluso tomar imágenes estáticas. Web Audio se puede usar para agregar efectos al audio, crear visualizaciones de audio o aplicar efectos espaciales (como el desplazamiento lateral). Consulta cómo generar perfiles del rendimiento de las apps de audio web en Chrome.
Si ninguna de estas opciones funciona, una API de bajo nivel puede ser la solución. Para comenzar, consulta Descubre cómo comunicarte con tu dispositivo.
🖨 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. Para comenzar tu recorrido, consulta Descubre cómo comunicarte con tu dispositivo.
🔐 Autentica con este dispositivo
Usa WebAuthn para crear una credencial de clave pública sólida, certificada y con alcance de origen con este dispositivo de seguridad de hardware para autenticar usuarios. Admite el uso de autenticadores U2F o FIDO2 Bluetooth, NFC y roaming USB (también conocidos como llaves de seguridad) y un autenticador de plataforma, que permite a los usuarios autenticarse con sus huellas digitales o bloqueos de pantalla. Consulta Compila tu primera app de WebAuthn.
Si este 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 los 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 en un diálogo del navegador y que luego lea el contenido de esos archivos.
Si ninguna de estas opciones funciona, una API de bajo nivel puede ser la solución. Para comenzar, consulta Descubre cómo comunicarte con tu dispositivo.
🧲 Acceso a los sensores en este dispositivo
Usa la API de Generic Sensor para leer los valores sin procesar de los sensores de los sensores de movimiento (p.ej., el acelerómetro o el giroscopio) y los sensores ambientales (p.ej., la luz ambiente o el 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 de los dispositivos móviles.
Si no funciona, una API de bajo nivel puede ser la solución. Para comenzar tu recorrido, consulta Descubre cómo comunicarte con tu dispositivo.
🛰 Acceder a las coordenadas de GPS en este dispositivo
Usa la API de Geolocation para obtener la latitud y longitud de la posición actual del usuario en este dispositivo.
Si no funciona, una API de bajo nivel puede ser la solución. Para comenzar tu recorrido, consulta Descubre cómo comunicarte con tu dispositivo.
🔋 Revisa 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 la batería o el estado de carga.
Si no funciona, una API de bajo nivel puede ser la solución. Para comenzar tu recorrido, consulta Descubre cómo comunicarte con tu dispositivo.
📣 Comunícate con este dispositivo por la red.
En la red local, usa la API de Remote Playback para transmitir audio o video en un dispositivo de reproducción remota (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 los WebSockets para recuperar algunos datos de este dispositivo al alcanzar los extremos adecuados. Si bien los sockets TCP y UDP no están disponibles en la Web, consulta WebTransport para administrar conexiones de red interactivas, bidireccionales y multiplexadas. Ten en cuenta que WebRTC también se puede usar para comunicar datos en tiempo real a otros navegadores mediante un protocolo entre pares.
🧱 Descubre cómo comunicarte con tu dispositivo
La naturaleza de tu conexión física con el dispositivo determina la API de bajo nivel que debes usar. Si es inalámbrico, revisa la Web NFC para ver conexiones inalámbricas de muy corto alcance y Web Bluetooth para dispositivos inalámbricos cercanos.
Con Web NFC, puedes leer y escribir en este dispositivo cuando esté cerca del dispositivo del usuario (por lo general, de 5 a 10 cm o de 2 a 4 pulgadas). Las herramientas como NFC TagInfo de NXP te permiten explorar el contenido de este dispositivo con fines de ingeniería inversa.
Con el Bluetooth web, conéctate a este dispositivo a través de una conexión Bluetooth de bajo consumo. Debería ser bastante fácil comunicarse cuando se usan servicios Bluetooth GATT estandarizados (como el servicio de batería), ya que su comportamiento está bien documentado. De lo contrario, en este punto, debes encontrar la documentación de hardware del dispositivo o aplicarle ingeniería inversa. Para ello, puedes usar herramientas externas, como nRF Connect for Mobile, y herramientas integradas del navegador, como la página interna
about://bluetooth-internals, en navegadores basados en Chromium. Consulta Ingeniería inversa de una bombilla Bluetooth de URI Shaked. Ten en cuenta que los dispositivos Bluetooth también pueden anunciar el HID o los protocolos en serie.
Si usas una conexión con cable, consulta estas APIs en este orden específico:
Con WebHID, comprender los informes HID y los descriptores de informes mediante las colecciones es fundamental para que comprendas este dispositivo. Esto puede ser desafiante sin la documentación del proveedor para este dispositivo. Hay herramientas como Wireshark que te pueden ayudar a aplicar 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 este dispositivo, es difícil, pero igual es posible con suerte. Puedes aplicar ingeniería inversa a este dispositivo capturando tráfico USB sin procesar con herramientas como Wireshark. También puedes usar la app web de la terminal en serie para experimentar con este dispositivo si usa un protocolo legible por humanos.
Con WebUSB, sin documentación clara para este dispositivo y con qué comandos USB admite este dispositivo, es difícil, pero igual es posible con suerte. Mira el video Exploring WebUSB and su emocionante potencial de Suz Hinton. También puedes aplicar ingeniería inversa a este dispositivo. Para ello, captura tráfico USB sin procesar e inspecciona los descriptores USB con herramientas externas como Wireshark y herramientas integradas del navegador, como la página interna
about://usb-internalsen navegadores basados en Chromium.
Agradecimientos
Agradecemos a Reilly Grant, Thomas Steiner y Kayce Vasques por revisar este artículo.
Foto de Darya Tryfanava de Unsplash.