Scegli l'API appropriata per comunicare con un dispositivo hardware di tua scelta.
L'obiettivo di questa guida è aiutarti a scegliere l'API migliore per comunicare con un dispositivo hardware (ad esempio webcam, microfono e così via) sul web. "Migliore" significa che ti offre tutto ciò di cui hai bisogno con il minimo lavoro. In altre parole, sai quale caso d'uso generale vuoi risolvere (ad esempio quando accedi ai video), ma non sai quale API utilizzare o non sai se c'è un altro modo per ottenerla.
Uno dei problemi che vedo spesso gli sviluppatori web è passare alle API di basso livello senza conoscere le API di livello superiore, più facili da implementare e che offrono una UX migliore. Di conseguenza, questa guida inizia consigliando prima le API di livello superiore, ma menziona anche le API di livello inferiore nel caso in cui tu abbia stabilito 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 Puntatore. Se questo dispositivo è un controller di gioco, utilizza l'API Gamepad per sapere quali pulsanti vengono premuti e quali assi spostati.
Se nessuna di queste opzioni funziona per te, un'API di basso livello potrebbe essere la soluzione. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
📸 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 la panoramica, l'inclinazione e lo zoom della videocamera, nonché altre impostazioni della fotocamera, come luminosità e contrasto, e persino scattare immagini statiche. Puoi usare Audio web per aggiungere effetti all'audio, creare visualizzazioni audio o applicare effetti spaziali (come il panning). Scopri anche come profilare le prestazioni delle app web audio in Chrome.
Se nessuna di queste opzioni funziona per te, un'API di basso livello potrebbe essere la soluzione. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
🖨 Stampa su questo dispositivo
Utilizza window.print() per aprire una finestra di dialogo del browser che consenta all'utente di scegliere questo dispositivo come destinazione per stampare il documento corrente.
Se questa soluzione non funziona, la soluzione potrebbe essere un'API di basso livello. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
🔐 Esegui l'autenticazione su questo dispositivo
Usa WebAuthn per creare una chiave pubblica efficace, attestata e basata sull'origine con questo dispositivo di sicurezza hardware per autenticare gli utenti. Supporta l'utilizzo di dispositivi di autenticazione Bluetooth, NFC e USB-roaming U2F o FIDO2, noti anche come token di sicurezza, e di un autenticatore di piattaforma, che consente agli utenti di eseguire l'autenticazione usando le proprie impronte o blocchi schermo. Consulta Creare la tua prima app WebAuthn.
Se questo dispositivo è un altro tipo di dispositivo di sicurezza hardware (ad esempio un portafoglio di criptovalute), la soluzione potrebbe essere un'API di basso livello. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
🗄 Accedi ai file su questo dispositivo
Utilizza l'API File System Access per leggere e salvare le modifiche direttamente su 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 il contenuto di questi file.
Se nessuna di queste opzioni funziona per te, un'API di basso livello potrebbe essere la soluzione. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
🧲 Accedi ai sensori su questo dispositivo
Utilizza l'API Generic Sensor per leggere i valori grezzi dei sensori di sensori di movimento (ad es. accelerometro o giroscopio) e sensori ambientali (ad esempio luce ambientale, magnetometro). Se non sono disponibili, utilizza gli eventi DeviceMotion e DeviceOrientation per accedere ad accelerometro, giroscopio e bussola integrati nei dispositivi mobili.
Se non funziona, la soluzione potrebbe essere un'API di basso livello. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
🛰 Accedi alle coordinate GPS su questo dispositivo
Utilizza l'API Geolocation per ottenere la latitudine e la longitudine della posizione attuale dell'utente su questo dispositivo.
Se non funziona, la soluzione potrebbe essere un'API di basso livello. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
🔋 Controlla la batteria di questo dispositivo
Utilizza l'API Battery per ricevere informazioni sull'host sul livello di carica della batteria e ricevere notifiche quando il livello o lo stato di ricarica della batteria cambiano.
Se non funziona, la soluzione potrebbe essere un'API di basso livello. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.
📲 Comunica con questo dispositivo tramite la rete
Nella rete locale, utilizza l'API Remote Playback per trasmettere audio e/o video su un dispositivo di riproduzione remoto (ad esempio una smart TV o uno speaker wireless) oppure utilizza l'API Presentation per eseguire il rendering di una pagina web su un secondo schermo (ad esempio un display secondario collegato con un cavo HDMI o una smart TV connessa in modalità wireless).
Se il dispositivo espone un server web, usa l'API Fetch e/o WebSockets per recuperare alcuni dati da questo dispositivo utilizzando gli endpoint appropriati. Sebbene i socket TCP e UDP non siano disponibili sul web, controlla WebTransport per gestire connessioni di rete interattive, bidirezionali e multiplexate. 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 dipende dalla natura della connessione fisica al dispositivo. Se è wireless, prova Web NFC per le connessioni wireless a corto raggio e Web Bluetooth per i dispositivi wireless nelle vicinanze.
Con NFC web, puoi leggere e scrivere su questo dispositivo quando si trova nelle vicinanze del dispositivo dell'utente (di solito 5-10 cm). Strumenti come NFC TagInfo di NXP ti consentono di sfogliare i contenuti di questo dispositivo per effettuare attività di reverse engineering.
Con Web Bluetooth, connettiti a questo dispositivo tramite una connessione Bluetooth Low Energy. Quando il sistema utilizza servizi GATT Bluetooth standardizzati (come il servizio a batteria), il suo comportamento è ben documentato, pertanto dovrebbe essere semplice comunicare. In caso contrario, a questo punto devi trovare della documentazione hardware relativa al dispositivo o eseguire il reverse engineering. Puoi utilizzare strumenti esterni come nRF Connect for Mobile e strumenti del browser integrati come la pagina interna
about://bluetooth-internalsnei browser basati su Chromium. Dai un'occhiata a Reverse-Engineering una lampadina Bluetooth di Uri Shaked. Tieni presente che anche i dispositivi Bluetooth potrebbero parlare i protocolli HID o seriali.
Se con cavo, controlla queste API nell'ordine specifico:
Con WebHID, comprendere i report HID e i descrittori tramite le raccolte è fondamentale per comprendere questo dispositivo. Ciò può essere complicato senza la documentazione del fornitore per questo dispositivo. Strumenti come Wireshark possono aiutarti a decompilare il tutto. Puoi anche utilizzare l'app web HID Explorer per eseguire il dump delle informazioni sui dispositivi HID in un formato leggibile.
Con il numero di serie web, senza la documentazione del fornitore relativa a questo dispositivo e ai comandi supportati, è difficile, ma è comunque possibile fare congetture. La decompilazione di questo dispositivo può essere eseguita acquisendo il traffico USB non elaborato con strumenti come Wireshark. Puoi anche utilizzare l'app web Serial Terminal per fare delle prove con questo dispositivo se utilizza un protocollo leggibile.
Con WebUSB, senza una documentazione chiara per questo dispositivo e senza i comandi vocali supportati da questo dispositivo, è difficile, ma è comunque possibile fare congetture. Guarda il video Esplorazione di WebUSB e il suo entusiasmante potenziale di Suz Hinton. Puoi anche eseguire il reverse engineering di questo dispositivo acquisendo il traffico USB non elaborato e ispezionando i descrittori USB con strumenti esterni come Wireshark e strumenti del browser integrati come la pagina interna
about://usb-internalsnei browser basati su Chromium.
Ringraziamenti
Ringraziamo Reilly Grant, Thomas Steiner e Kayce Basques per aver letto questo articolo.
Foto di Darya Provafanava su Unsplash.