Accesso a dispositivi hardware sul Web

Scegli l'API appropriata per comunicare con un dispositivo hardware a tua scelta.

François Beaufort

Lo scopo 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" intendo che ti offre tutto ciò di cui hai bisogno con il minor lavoro possibile. In altre parole, sai il caso d'uso generale che vuoi risolvere (ad es. accedere a un video), ma non sai quale API utilizzare o ti chiedi se esiste un altro modo per farlo.

Un problema che vedo spesso tra gli sviluppatori web è che si buttano subito sulle API di basso livello senza conoscere quelle di livello superiore, che sono più facili da implementare e offrono un'esperienza utente migliore. Pertanto, questa guida inizia consigliando innanzitutto 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.

🕹 Ricevere eventi di input da questo dispositivo

Prova ad ascoltare gli eventi Keyboard e Pointer. Se si tratta di un controller, utilizza l'API Gamepad per sapere quali pulsanti vengono premuti e quali assi vengono spostati.

Se nessuna di queste opzioni funziona, la soluzione potrebbe essere un'API di basso livello. Per iniziare, consulta l'articolo Scopri come comunicare con il tuo dispositivo.

📸 Accedere ad audio e video da questo dispositivo

Utilizza MediaDevices.getUserMedia() per acquisire stream audio e video in tempo reale da questo dispositivo e scopri di più su come acquisire audio e video. Puoi anche controllare la panoramica, l'inclinazione e lo zoom della fotocamera, nonché altre impostazioni della fotocamera come luminosità e contrasto e persino scattare foto. Web Audio può essere utilizzato per aggiungere effetti all'audio, creare visualizzazioni audio o applicare effetti spaziali (ad esempio il panning). Scopri anche come profilare le prestazioni delle app Web Audio in Chrome.

Se nessuna di queste opzioni funziona, la soluzione potrebbe essere un'API di basso livello. Per iniziare, consulta l'articolo Scopri come comunicare con il tuo dispositivo.

🖨 Stampa su questo dispositivo

Utilizza window.print() per aprire una finestra di dialogo del browser che consente 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 la sezione Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.

🔐 Effettua l'autenticazione con questo dispositivo

Utilizza WebAuthn per creare una credenziale a chiave pubblica sicura, attestata e basata sull'origine con questo dispositivo di sicurezza hardware per autenticare gli utenti. Supporta l'utilizzo di autenticatori U2F o FIDO2 Bluetooth, NFC e USB-roaming, anche noti come token di sicurezza, nonché un autenticatore della piattaforma, che consente agli utenti di effettuare l'autenticazione con le impronte digitali o le schermate di blocco. Consulta Creare la tua prima app WebAuthn.

Se si tratta di un altro tipo di dispositivo di sicurezza hardware (ad es. un portafoglio di criptovaluta), la soluzione potrebbe essere un'API di basso livello. Per iniziare, consulta l'articolo Scopri come comunicare con il tuo dispositivo.

🗄 Accedere ai file su questo dispositivo

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

Se nessuna di queste opzioni funziona, la soluzione potrebbe essere un'API di basso livello. Per iniziare, consulta l'articolo Scopri come comunicare con il tuo dispositivo.

🧲 Accedere ai sensori su questo dispositivo

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

Se non funziona, una soluzione potrebbe essere un'API di basso livello. Consulta Scopri come comunicare con il tuo dispositivo per iniziare il tuo viaggio.

🛰 Accedere alle coordinate GPS su questo dispositivo

Utilizza l'API Geolocation per ottenere la latitudine e la longitudine della posizione corrente 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.

🔋 Controllare la batteria del dispositivo

Utilizza l'API Battery per ottenere informazioni sull'host relative al livello di carica della batteria e ricevere una notifica quando il livello della batteria o lo stato di ricarica 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.

📞 Comunicare 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 remota (ad es. 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 es. un display secondario collegato con un cavo HDMI o una smart TV connessa in modalità wireless).

Se questo dispositivo espone un server web, utilizza l'API Fetch e/o WebSockets per recuperare alcuni dati da questo dispositivo accedendo agli endpoint appropriati. Sebbene le socket TCP e UDP non siano disponibili sul web, dai un'occhiata a WebTransport per gestire le connessioni di rete interattive, bidirezionali e multiplex. Tieni presente che WebRTC può essere utilizzato anche per comunicare i dati in tempo reale con altri browser utilizzando un protocollo peer-to-peer.

🧱 Scopri come comunicare con il tuo dispositivo

La decisione su quale API di basso livello utilizzare è determinata dalla natura della connessione fisica al dispositivo. Se è wireless, dai un'occhiata a Web NFC per le connessioni wireless a raggio molto ridotto e a Web Bluetooth o Web Serial per i dispositivi wireless nelle vicinanze.

• Con Web NFC, puoi leggere e scrivere su questo dispositivo quando è nelle immediate 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 a scopo di reverse engineering.

• Con Web Bluetooth, puoi connetterti a questo dispositivo tramite una connessione Bluetooth Low Energy. Dovrebbe essere abbastanza facile comunicare con il dispositivo quando utilizza servizi GATT Bluetooth standardizzati (ad esempio il servizio batteria), in quanto il loro comportamento è ben documentato. In caso contrario, a questo punto devi trovare la documentazione hardware per il dispositivo o eseguire il reverse engineering. Puoi utilizzare strumenti esterni come nRF Connect per dispositivi mobili e strumenti del browser integrati come la pagina interna about://bluetooth-internals nei browser basati su Chromium. Dai un'occhiata a Reverse-Engineering a Bluetooth Lightbulb di Uri Shaked. Tieni presente che i dispositivi Bluetooth possono supportare anche i protocolli HID o seriali.

• Con Seriale tramite Bluetooth, puoi comunicare con i servizi RFCOMM su dispositivi Bluetooth Classic accoppiati come il profilo porta seriale (SPP) standardizzato. Tuttavia, per i servizi personalizzati basati su RFCOMM, dovrai consultare la documentazione del fornitore del dispositivo per conoscere l'UUID del servizio da passare a requestPort().

Se con cavo, controlla queste API nell'ordine seguente:

1. Con WebHID, è fondamentale comprendere i report e i descrittori dei report HID tramite le collezioni per comprendere questo dispositivo. Questa operazione può essere difficile senza la documentazione del fornitore per questo dispositivo. Strumenti come Wireshark possono aiutarti a eseguire il reverse engineering. Puoi anche utilizzare l'app web HID Explorer per scaricare le informazioni dei dispositivi HID in un formato leggibile.

2. Con Web Serial, senza la documentazione del fornitore per questo dispositivo e i comandi supportati, è difficile, ma è comunque possibile con un po' di fortuna. Il reverse engineering di questo dispositivo può essere eseguito acquisendo il traffico USB non elaborato con strumenti come Wireshark. Puoi anche utilizzare l'app web Terminal seriale per eseguire esperimenti con questo dispositivo se utilizza un protocollo leggibile da una persona.

3. Con WebUSB, senza una documentazione chiara per questo dispositivo e per i comandi USB supportati, è difficile, ma ancora possibile con un po' di fortuna. Guarda Esplorazione di WebUSB e del 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-internals nei browser basati su Chromium.

Ringraziamenti

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

Foto di Darya Tryfanava su Unsplash.