Accesso a dispositivi hardware sul Web

Seleziona l'API appropriata per comunicare con un dispositivo hardware di tua scelta.

François Beaufort
François Beaufort

L'obiettivo di questa guida è aiutarti a scegliere l'API migliore per comunicare con un dispositivo hardware (ad es. webcam, microfono e così via) sul web. Per "migliore" Voglio dire ti offre tutto ciò di cui hai bisogno con il minor lavoro possibile. In altre parole, conosci il caso d'uso generale che vuoi risolvere (ad esempio l'accesso ai video), ma non sai quale API usare o non ti chiedi se esiste un altro modo per ottenerla.

Uno dei problemi più comuni è che gli sviluppatori web affrontano le API di basso livello senza dover conoscere le API di livello superiore più facili implementare e fornire una UX migliore. Pertanto, questa guida inizia consigliando le API di livello superiore, ma menziona anche le API di livello inferiore nel caso determinato che l'API di livello superiore non soddisfa le tue esigenze.

🕹 Ricevi eventi di input da questo dispositivo

Prova ad ascoltare gli eventi Tastiera e Pointer. Se questo dispositivo è un gioco usa l'API Gamepad per sapere quali pulsanti vengono premuti e quali assi si spostano.

Se nessuna di queste opzioni funziona, un'API di basso livello potrebbe essere la soluzione. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.

📸 Accedi ad audio e video da questo dispositivo

Utilizza MediaDevices.getUserMedia() per ricevere stream audio e video in diretta da questo dispositivo e scopri come acquisire audio e video. Puoi anche controllare il panoramica, inclinazione e zoom della fotocamera e altre impostazioni della fotocamera, come luminosità e contrasto e scattare immagini fisse. È possibile usare l'audio web per aggiungere effetti all'audio, creare visualizzazioni audio o applicare effetti spaziali (come panoramica). Scopri come profilare le prestazioni delle app audio web in Chrome .

Se nessuna di queste opzioni funziona, un'API di basso livello potrebbe essere la soluzione. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.

🖨 Stampa su questo dispositivo

Utilizza window.print() per aprire una finestra di dialogo del browser che consenta all'utente di selezionare questa opzione dispositivo come destinazione per stampare il documento corrente.

Se questa soluzione non funziona nel tuo caso, la soluzione potrebbe essere un'API di basso livello. Paga Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.

🔐 Effettua l'autenticazione con questo dispositivo

Utilizza WebAuthn per creare una chiave pubblica efficace, attestata e basata sull'origine credenziali con questo dispositivo di sicurezza hardware per autenticare gli utenti. Supporta l'uso di autenticatori Bluetooth, NFC e USB U2F o FIDO2 con funzionalità di roaming, inoltre noti come token di sicurezza, nonché autenticatore di piattaforma, che consente agli utenti Autenticare tramite impronta o blocco schermo. Consulta Creare la prima app WebAuthn.

Se questo è un altro tipo di dispositivo di sicurezza hardware (ad es. una criptovaluta), un’API di basso livello potrebbe essere la soluzione. Consulta Discover come comunicare con il tuo dispositivo per iniziare il tuo percorso.

🗄 Accedi ai file su questo dispositivo

Utilizza l'API File System Access per leggere e salvare le modifiche direttamente nei file e cartelle sul dispositivo dell'utente. Se non è disponibile, utilizza l'API File per chiedere all'utente di selezionare file locali da una finestra di dialogo del browser e quindi di leggere i contenuti di questi file.

Se nessuna di queste opzioni funziona, un'API di basso livello potrebbe essere la soluzione. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.

🧲 Accedi ai sensori su questo dispositivo

Utilizza l'API Generic Sensor per leggere i valori non elaborati dei sensori dai sensori di movimento (ad es. accelerometro o giroscopio) e sensori ambientali (ad es. luce ambientale, magnetometro). Se non sono disponibili, usa gli attributi DeviceMotion e DeviceOrientation per accedere all'accelerometro, al giroscopio e alla bussola integrati dispositivi mobili.

Se non funziona, un'API di basso livello potrebbe essere la soluzione. Paga Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.

🛰 Accedi alle coordinate GPS su questo dispositivo

Utilizza l'API Geolocation per ottenere la latitudine e la longitudine posizione attuale su questo dispositivo.

Se non funziona, un'API di basso livello potrebbe essere la soluzione. Paga Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.

🔋 Controlla la batteria del dispositivo

Utilizza l'API Battery per ricevere informazioni sull'host sul livello di carica della batteria e ricevi una notifica quando il livello della batteria o lo stato di ricarica cambiano.

Se non funziona, un'API di basso livello potrebbe essere la soluzione. Paga Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.

📲 Comunica con questo dispositivo attraverso la rete

Nella rete locale, utilizza l'API Remote Riproduzione per trasmettere audio e/o video su un dispositivo di riproduzione remoto (ad es. una smart TV o uno speaker wireless) oppure utilizza L'API Presentation per visualizzare una pagina web su un secondo schermo (ad es. una pagina un display collegato tramite cavo HDMI o a una smart TV connessa in modalità wireless).

Se questo dispositivo espone un server web, utilizza l'API Fetch e/o WebSockets per Recupera alcuni dati da questo dispositivo raggiungendo gli endpoint appropriati. Mentre i protocolli TCP e I socket UDP non sono disponibili sul web. Consulta WebTransport per gestire di reti interattive, bidirezionali e multiplex. Tieni presente che WebRTC può essere utilizzato anche per comunicare dati in tempo reale con altri browser. utilizzando un protocollo peer-to-peer.

🧱 Scopri come comunicare con il tuo dispositivo

La decisione relativa all'API di basso livello da utilizzare è determinata dalla natura la connessione fisica al dispositivo. Se è wireless, cerca NFC web per connessioni wireless a molto corto raggio e Bluetooth Web per dispositivi wireless nelle vicinanze dispositivi mobili.

  • Con la tecnologia NFC web, puoi leggere e scrivere su questo dispositivo quando si trova nelle vicinanze di dispositivo dell'utente (di solito 5-10 cm). Strumenti come NFC TagInfo di NXP ti consente di sfogliare i contenuti di questo dispositivo per il reverse engineering scopi.

  • Con il Web Bluetooth, connettiti a questo dispositivo tramite Bluetooth Low Energy connessione. Dovrebbe essere abbastanza facile comunicare con quando usa ai servizi Bluetooth GATT standardizzati (come il servizio batteria) come loro il comportamento sia ben documentato. In caso contrario, a questo punto devi trovare della documentazione hardware relativa al dispositivo o eseguirne il reverse engineering. Puoi Utilizzare strumenti esterni come nRF Connect for Mobile e strumenti del browser integrati come la pagina interna about://bluetooth-internals nelle browser per questo scopo. Dai un'occhiata a Reverse-Engineering a Bluetooth Light Bull di Uri si è scossa. Tieni presente che i dispositivi Bluetooth possono anche enunciare i codici HID o protocolli.

Se utilizzi un cavo, controlla queste API nell'ordine specifico:

  1. Con WebHID, puoi comprendere i report HID e i descrittori dei report tramite raccolte è fondamentale per comprendere questo dispositivo. Può essere difficile senza la documentazione del fornitore per questo dispositivo. Strumenti come Wireshark può aiutarti a decodificarlo. Puoi anche usare l'HID App web Explorer per il dump delle informazioni dei dispositivi HID in un formato leggibile.

  2. Con il numero di serie web, senza documentazione del fornitore per il dispositivo e la cosa supportati da questo dispositivo, è difficile ma comunque possibile a indovinare. La decompilazione di questo dispositivo può essere eseguita acquisindo dati USB non elaborati il traffico con strumenti come Wireshark. Puoi anche usare il terminale seriale app web per eseguire esperimenti con questo dispositivo se utilizza un protocollo leggibile.

  3. Con WebUSB, senza documentazione chiara per questo dispositivo e quale dispositivo USB supportati da questo dispositivo, è difficile ma comunque possibile a indovinare. Guarda Esplorazione di WebUSB e il suo potenziale entusiasmante di Suz Hinton. Puoi anche decodificare questo dispositivo acquisendo dati USB non elaborati il traffico e l'ispezione dei descrittori USB con strumenti esterni come Wireshark e strumenti del browser integrati come la pagina interna about://usb-internals nei browser basati su Chromium.

Ringraziamenti

Grazie a Reilly Grant, Thomas Steiner e Kayce Basques per aver letto questo articolo.

Foto di Darya Tryfanava su Unsplash.