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 es. webcam, microfono e così via) sul web. Per "migliore" intendo che ti offre tutto ciò di cui hai bisogno con il minimo sforzo. In altre parole, conosci il caso d'uso generale che vuoi risolvere (ad es. l'accesso ai 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 è il passaggio alle API di basso livello senza conoscere le API di livello superiore, che sono più facili da implementare e offrono una UX migliore. Pertanto, 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 per videogiochi, utilizza l'API Gamepad per sapere quali pulsanti vengono premuti e quali assi vengono spostati.
Se nessuna di queste opzioni è adatta alle tue esigenze, un'API di basso livello potrebbe essere la soluzione. Per iniziare, consulta Scopri come comunicare con il tuo dispositivo.
📸 Accedi ad audio e video da questo dispositivo
Utilizza MediaDevices.getUserMedia() per ottenere stream audio e video in diretta da questo dispositivo e scopri di più sull'acquisizione di audio e video. Puoi anche controllare la panoramica, l'inclinazione e lo zoom della videocamera, nonché altre impostazioni della videocamera, come luminosità e contrasto, e persino scattare immagini fisse. Web Audio può essere utilizzato 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 è adatta alle tue esigenze, un'API di basso livello potrebbe essere la soluzione. Per iniziare, consulta 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 è adatta alle tue esigenze, un'API di basso livello potrebbe essere la soluzione. Per iniziare, consulta Scopri come comunicare con il tuo dispositivo.
🔐 Autenticati con questo dispositivo
Utilizza WebAuthn per creare una credenziale con chiave pubblica efficace, attestata e con ambito di origine con questo dispositivo di sicurezza hardware per autenticare gli utenti. Supporta l'utilizzo di autenticatori U2F o FIDO2 con roaming Bluetooth, NFC e USB, noti anche come token di sicurezza, nonché di un autenticatore della piattaforma, che consente agli utenti di autenticarsi con le proprie impronte o con i blocchi schermo. Dai un'occhiata a Crea la tua prima app WebAuthn.
Se questo dispositivo è un altro tipo di dispositivo di sicurezza hardware (ad es. un wallet di criptovalute), un'API di basso livello potrebbe essere la soluzione. Dai un'occhiata a Scopri come comunicare con il tuo dispositivo per iniziare il tuo percorso.
🗄 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 leggere i contenuti di questi file.
Se nessuna di queste opzioni è adatta alle tue esigenze, un'API di basso livello potrebbe essere la soluzione. Per iniziare, consulta 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, un'API di basso livello potrebbe essere la soluzione. Per iniziare, consulta Scopri come comunicare con il tuo dispositivo.
🛰 Accedere 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, un'API di basso livello potrebbe essere la soluzione. Per iniziare, consulta Scopri come comunicare con il tuo dispositivo.
🔋 Controlla la batteria su questo dispositivo
Utilizza l'API Battery per ottenere informazioni sull'host relative al livello batteria e ricevere notifiche quando il livello batteria o lo stato di ricarica cambiano.
Se non funziona, un'API di basso livello potrebbe essere la soluzione. Per iniziare, consulta Scopri come comunicare con il tuo dispositivo.
📞 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 i WebSockets per recuperare alcuni dati dal dispositivo raggiungendo gli endpoint appropriati. Sebbene i socket TCP e UDP non siano disponibili sul web, consulta 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 su quale API di basso livello utilizzare è determinata dalla natura della connessione fisica al dispositivo. Se è wireless, consulta Web NFC per connessioni wireless a brevissimo raggio e Web Bluetooth o Web Serial per dispositivi wireless nelle vicinanze.
Con Web NFC, leggi e scrivi su questo dispositivo quando si trova nelle immediate vicinanze del dispositivo dell'utente (di solito 5-10 cm). Strumenti come NFC TagInfo by NXP ti consentono di sfogliare i contenuti di questo dispositivo per scopi di reverse engineering.
Con Web Bluetooth, connettiti a questo dispositivo tramite una connessione Bluetooth Low Energy. Dovrebbe essere abbastanza facile comunicare con il dispositivo quando utilizza servizi GATT Bluetooth standardizzati (come il servizio batteria), poiché il loro comportamento è ben documentato. In caso contrario, a questo punto devi trovare la documentazione hardware per questo dispositivo o eseguire il reverse engineering. A questo scopo, puoi utilizzare strumenti esterni come nRF Connect for Mobile e strumenti integrati nel browser, come la pagina interna
about://bluetooth-internalsnei browser basati su Chromium. Dai un'occhiata a Reverse-Engineering a Bluetooth Lightbulb di Uri Shaked. Tieni presente che i dispositivi Bluetooth possono anche utilizzare i protocolli HID o seriali.Con Serial over Bluetooth, comunica con i servizi RFCOMM sui dispositivi Bluetooth Classic accoppiati, come il profilo della porta seriale (SPP) standardizzato. Per i servizi personalizzati basati su RFCOMM, tuttavia, dovrai consultare la documentazione del fornitore del dispositivo per l'UUID del servizio da passare a
requestPort().
Se il dispositivo è cablato, controlla queste API nell'ordine specifico:
Con WebHID, comprendere i report HID e i descrittori di report tramite le raccolte è fondamentale 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 eseguire il dump delle informazioni dei dispositivi HID in un formato leggibile.
Con Web Serial, senza la documentazione del fornitore per questo dispositivo e i comandi che supporta, è difficile, ma comunque possibile, indovinare. 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 Serial Terminal per sperimentare con questo dispositivo se utilizza un protocollo leggibile.
Con WebUSB, senza una documentazione chiara per questo dispositivo e per i comandi USB supportati, è difficile, ma comunque possibile, indovinare. Guarda Exploring WebUSB and its exciting potential 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 integrati nel browser, come la pagina interna
about://usb-internalsnei browser basati su Chromium.
Ringraziamenti
Grazie a Reilly Grant, Thomas Steiner e Kayce Basques per aver rivisto questo articolo.