Acceso a dispositivos de hardware en la Web

Elige la API adecuada para comunicarte con el dispositivo de hardware que prefieras.

François Beaufort

El objetivo de esta guía es ayudarte a elegir la mejor API para comunicarte con un hardware (p.ej., cámara web, micrófono, etc.) en la Web. Por "mejor" Lo digo en serio te da 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 videos), pero no sabes qué API usar o te preguntas si hay otra manera de lograrlo.

Un problema que suelo enfrentar a los desarrolladores web es APIs de bajo nivel sin conocer las APIs de nivel superior que son más fáciles de implementar y proporcionar una mejor UX. Por eso, en esta guía se empieza por recomendar de las APIs de nivel superior primero, pero también se mencionan las APIs de nivel inferior en caso de que determinó que la API de nivel superior no satisface tus necesidades.

🕹 Recibir eventos de entrada de este dispositivo

Intenta escuchar eventos del teclado y el Pointer. Si este dispositivo es un juego usa la API de Gamepad para saber qué botones se presionan qué ejes se movían.

Si ninguna de estas opciones te funciona, una API de bajo nivel puede ser la solución. Para comenzar tu recorrido, consulta Descubre cómo comunicarte con tu dispositivo.

📸 Accede al audio y el video desde este dispositivo.

Usa MediaDevices.getUserMedia() para obtener transmisiones de audio y video en vivo desde este y obtén 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 contrastar y hasta tomar imágenes estáticas. Se puede usar Web Audio para agregar efectos. a audio, crear visualizaciones de audio o aplicar efectos espaciales (como (desplazamiento lateral). Consulta cómo generar perfiles del rendimiento de las apps de audio web en Chrome. a tus conjuntos de datos.

Si ninguna de estas opciones te funciona, una API de bajo nivel puede ser la solución. Para comenzar tu recorrido, 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 esta opción. dispositivo como destino para imprimir el documento actual.

Si esto no funciona en tu caso, una API de bajo nivel puede ser la solución. Finalizar la compra Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.

🔐 Autenticar con este dispositivo

Usar WebAuthn para crear una 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 autentican con sus huellas dactilares o bloqueos de pantalla. Consulta Build your primera app de WebAuthn.

Si este es otro tipo de dispositivo de seguridad de hardware (p.ej., un billetera de criptomonedas), una API de bajo nivel puede ser la solución. Consulta Descubre cómo comunicarse con el dispositivo para comenzar el recorrido.

🗄 Accede a los archivos de este dispositivo.

Usa la API de File System Access para leer los cambios y guardarlos directamente en los archivos y carpetas del dispositivo del usuario. Si no está disponible, usa la API de File para preguntar al usuario seleccionar archivos locales de un diálogo del navegador y, luego, leer el contenido de esos archivos.

Si ninguna de estas opciones te 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 los sensores de este dispositivo

Usa la API de Generic Sensor para leer valores sin procesar de sensores de sensores de movimiento (p.ej., acelerómetro o giroscopio) y sensores ambientales (p.ej., luz ambiente, magnetómetro). Si no están disponibles, usa DeviceMotion y DeviceOrientation para obtener acceso al acelerómetro, el giroscopio y la brújula integrados dispositivos móviles.

Si no funciona en tu caso, una API de bajo nivel puede ser la solución. Finalizar la compra 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 los posición actual en este dispositivo.

Si no funciona en tu caso, una API de bajo nivel puede ser la solución. Finalizar la compra Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.

🔋 Verifica 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 una notificación cuando cambie el nivel de la batería o el estado de carga.

Si no funciona en tu caso, una API de bajo nivel puede ser la solución. Finalizar la compra Descubre cómo comunicarte con tu dispositivo para comenzar tu recorrido.

💸 Comunícate 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 utiliza API de Presentation para renderizar una página web en una segunda pantalla (p.ej., una 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 Recupera algunos datos de este dispositivo presionando los extremos adecuados. Si bien TCP y Los sockets UDP no están disponibles en la Web; consulta WebTransport para controlarlos. para 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. con un protocolo entre pares.

🧱 Descubre cómo comunicarte con tu dispositivo

La decisión de qué API de bajo nivel debes usar está determinada por la naturaleza de tu conexión física con el dispositivo. Si es inalámbrico, consulta Web NFC para conexiones inalámbricas de muy corto alcance y Web Bluetooth o Web Serial para dispositivos dispositivos inalámbricos.

Con la función NFC web, puedes leer y escribir en este dispositivo cuando está cerca de el dispositivo del usuario (por lo general, de 5 a 10 cm, de 2 a 4 pulgadas). Herramientas como NFC TagInfo de NXP te permite explorar el contenido de este dispositivo para realizar ingeniería inversa comerciales.
Con Web Bluetooth, conéctate a este dispositivo a través de un Bluetooth de bajo consumo conexión. Debería ser fácil comunicarse contigo cuando utiliza servicios estandarizados de Bluetooth GATT (como el servicio de batería) como su el comportamiento de los usuarios esté bien documentado. Si no es así, en este punto deberás buscar documentación de hardware para este dispositivo o aplicarle ingeniería inversa. Puedes Usar herramientas externas como nRF Connect para dispositivos móviles y herramientas integradas del navegador. como la página interna about://bluetooth-internals en versiones basadas en Chromium navegadores para eso. Consulta Cómo aplicar ingeniería inversa a una bombilla Bluetooth de El URI se agitó. Ten en cuenta que los dispositivos Bluetooth también pueden comunicar la instrucción de número de serie o HID protocolos.
Con Serial por Bluetooth, comunícate con los servicios RFCOMM en Dispositivos Bluetooth clásicos, como el perfil de puerto en serie (SPP) estandarizado Para personalizados basados en RFCOMM, deberás consultar la configuración documentación del proveedor para que el UUID del servicio pase a requestPort().

Si usas una conexión con cable, consulta estas APIs en este orden específico:

Con WebHID, comprende los informes HID y los descriptores de informes mediante collections es fundamental para que comprendas este dispositivo. Puede ser desafiante sin la documentación del proveedor para este dispositivo. Herramientas como Wireshark puede ayudarte a aplicar ingeniería inversa. También puedes usar el HID App web de Explorer para volcar información de dispositivos HID en un formato legible por humanos
Con Web Serial, sin documentación del proveedor para este dispositivo y qué comandos que admite este dispositivo, es difícil, pero de todos modos es posible adivinar. Se puede realizar ingeniería inversa en este dispositivo capturando USB sin procesar el tráfico con herramientas como Wireshark. También puedes usar la Terminal en serie app web para experimentar con este dispositivo si usa un protocolo legible por humanos.
Con WebUSB, sin documentación clara para este dispositivo y qué USB comandos que admite este dispositivo, es difícil, pero de todos modos es posible adivinar. Mira Explorando WebUSB y su emocionante potencial en Suz Hinton. También puedes aplicar ingeniería inversa en este dispositivo capturando USB sin procesar el tráfico y la inspección de descriptores USB con herramientas externas, como Wireshark y herramientas integradas del navegador, como la página interna about://usb-internals en navegadores basados en Chromium.

Agradecimientos

Agradecemos a Reilly Grant, Thomas Steiner y Kayce Basques por revisar este artículo.

Foto de Darya Tryfanava en Unsplash