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. Con "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 suelo ver en los desarrolladores web es que se lanzan a usar APIs de bajo nivel sin aprender sobre las APIs de alto nivel, que son más fáciles de implementar y proporcionan una mejor UX. Por lo tanto, esta guía comienza recomendando 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.
🕹 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 te funciona, una API de bajo nivel puede ser 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 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 de la cámara, como el brillo y el contraste, y hasta 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 paneo). Consulta cómo generar perfiles del rendimiento de las apps de Web Audio en Chrome.
Si ninguna de estas opciones te funciona, una API de bajo nivel puede ser 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 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.
🔐 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 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 los archivos de este dispositivo
Usa la API de File System Access para leer y guardar cambios directamente en los archivos y las carpetas del dispositivo del usuario. Si no está disponible, usa la API de File para pedirle al usuario que seleccione archivos locales de un diálogo del navegador y, luego, lee el contenido de esos archivos.
Si ninguna de estas opciones te funciona, una API de bajo nivel puede ser la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🧲 Acceder a los sensores de este dispositivo
Usa la API de Generic Sensor para leer los valores sin procesar de los sensores de movimiento (p.ej., acelerómetro o giroscopio) y los sensores ambientales (p.ej., luz ambiente, magnetómetro). Si no están disponibles, usa los eventos DeviceMotion y DeviceOrientation para acceder al acelerómetro, al giroscopio y a la brújula integrados en los dispositivos móviles.
Si no funciona, una API de bajo nivel puede ser la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🛰 Acceder a las coordenadas de GPS en este dispositivo
Usa la API de Geolocation para obtener la latitud y la longitud de la ubicación actual del usuario en este dispositivo.
Si no funciona, una API de bajo nivel puede ser la solución. Consulta Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.
🔋 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 cambien el nivel de batería o el estado de carga.
Si no funciona, una API de bajo nivel puede ser 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 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 WebSockets para recuperar algunos datos de este dispositivo accediendo 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 de intercambio de tráfico.
🧱 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 al dispositivo. Si es inalámbrico, consulta Web NFC para conexiones inalámbricas de muy corto alcance y Web Bluetooth o Web Serial para dispositivos inalámbricos cercanos.
Con Web NFC, lee y escribe en este dispositivo cuando esté cerca del dispositivo del usuario (por lo general, de 5 a 10 cm, 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 Web Bluetooth, conéctate a este dispositivo a través de una conexión Bluetooth de bajo consumo. Debería ser bastante fácil comunicarse con él cuando usa servicios de 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 aplicar ingeniería inversa. Para ello, puedes usar herramientas externas, como nRF Connect para dispositivos móviles, y herramientas integradas del 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 over Bluetooth, comunícate con los servicios de RFCOMM en dispositivos Bluetooth Classic vinculados, como el perfil de puerto en 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 con cable, consulta estas APIs en este orden específico:
Con WebHID, comprender los informes de HID y los descriptores de informes a través de las colecciones es clave para entender este dispositivo. Esto puede ser difícil sin la documentación del proveedor para este dispositivo. Las herramientas como Wireshark pueden ayudarte 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, es difícil, pero aún es posible con un poco de suerte. La ingeniería inversa de este dispositivo se puede realizar capturando el 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 los comandos USB que admite, es difícil, pero aún es posible con una suposición afortunada. Mira Explora WebUSB y su potencial emocionante de Suz Hinton. También puedes aplicar ingeniería inversa a este dispositivo capturando el tráfico USB sin procesar y, luego, inspeccionando 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 Basques por revisar este artículo.