Come funziona il tracciamento delle mani nel browser

Puoi provarlo subito. Apri Ink, accendi la fotocamera e indica con l'indice per disegnare un filo di colore. Avvicina pollice e indice per raccogliere una goccia, poi separali per lasciarla sbocciare nell'acqua.

Questa guida segue quel processo passo dopo passo. Spiega cosa concede davvero il permesso della fotocamera, cosa restituisce un modello come MediaPipe Hand Landmarker, come poche decine di numeri diventano un gesto, cosa resta sul tuo dispositivo e dove la tecnica è ancora in difficoltà. Se ti interessa la domanda più ampia su cosa renda l'arte interattiva o generativa, L'arte generativa interattiva, spiegata copre quel terreno. Qui ci concentriamo sul meccanismo.

Come funziona, in cinque passi

1. La pagina chiede la fotocamera. Il browser mostra una richiesta di permesso e non viene catturato nulla finché non accetti.
2. I fotogrammi vanno a un modello. Ogni fotogramma del video viene passato a un modello di visione che gira dentro la pagina.
3. Il modello restituisce punti di riferimento. Per ogni mano che trova, produce 21 punti: il polso e le articolazioni e le punte delle dita.
4. Il codice ricava i gesti. Distanze, angoli e velocità tra quei punti diventano stati come indicare, pizzicare, il palmo aperto o il pugno.
5. I gesti diventano parametri. Quegli stati vengono associati a un sistema visivo o sonoro, come una posizione, una forza o un colore.

Il resto della guida affronta ogni passo.

Passo 1: chiedere la fotocamera

Per impostazione predefinita, una pagina web non può vedere attraverso la tua webcam. Per ottenere il video chiama una funzione del browser chiamata getUserMedia(), parte della specifica Media Capture and Streams pubblicata dal W3C. Il riferimento di MDN su getUserMedia descrive cosa succede dopo. Il browser chiede il permesso all'utente e solo se viene concesso la pagina riceve un MediaStream, un flusso di fotogrammi dal vivo. Se l'utente rifiuta, o non c'è una fotocamera, la richiesta fallisce e la pagina non riceve nulla.

Alcuni dettagli di questo passo contano per la privacy e per come si percepisce l'esperienza:

• La richiesta è specifica. Una pagina può chiedere solo video, solo audio o entrambi, e può indicare quale fotocamera preferisce (per esempio quella rivolta verso l'utente). Una pagina di tracciamento delle mani non ha alcun motivo di chiedere il microfono.
• Serve un contesto sicuro. Secondo MDN, getUserMedia() è disponibile solo su pagine servite via HTTPS (o da un indirizzo locale di sviluppo). Una normale pagina non sicura non può proprio chiedere la fotocamera.
• Il browser resta al comando. I browser mostrano un indicatore mentre la fotocamera è attiva, e puoi revocare il permesso dalle impostazioni del sito in qualsiasi momento. Le regole sono definite nella specifica Media Capture and Streams del W3C.

Nota cosa questo passo non comporta. Concedere l'accesso alla fotocamera non significa che il video venga mostrato sullo schermo, registrato o inviato da qualche parte. La pagina riceve semplicemente fotogrammi in memoria. Cosa ne faccia è un'altra questione, su cui torna la sezione sulla privacy più avanti.

Passo 2: dai fotogrammi a un modello

Una volta avviato il flusso, la pagina ne legge i fotogrammi, di solito collegandolo a un elemento <video> nascosto e campionandolo a ogni fotogramma di animazione. Ogni fotogramma campionato è un'immagine, una griglia di pixel, e viene passato a un modello.

Il modello più usato per questo compito sul web è MediaPipe Hand Landmarker, del progetto MediaPipe di Google. La sua documentazione descrive un'attività che "opera su dati di immagine con un modello di machine learning (ML), come dati statici o come flusso continuo". Include guide per Android, Python e il web. Sul web, la pagina scarica il file del modello e il calcolo gira dentro il browser tramite un runtime WebAssembly, con accelerazione GPU opzionale.

L'attività ha tre modalità di esecuzione. IMAGE gestisce immagini singole e VIDEO file video decodificati. LIVE_STREAM è quella per una webcam, e in questa modalità i risultati arrivano tramite un listener man mano che i fotogrammi vengono elaborati. Diverse impostazioni ne regolano il comportamento. num_hands stabilisce quante mani cercare, e il valore predefinito è 1. Tre soglie di confidenza (rilevamento, presenza e tracciamento, ciascuna 0,5 per impostazione predefinita) decidono quanto il modello debba essere sicuro prima di segnalare una mano o continuare a seguirla.

Due modelli fanno il lavoro, raccolti insieme in un unico pacchetto. Secondo la documentazione di Google:

• Un modello di rilevamento del palmo cerca in tutto il fotogramma qualcosa che somigli a una mano.
• Un modello di rilevamento dei punti di riferimento della mano esamina poi da vicino quella regione e posiziona i punti.

Questa divisione è il motivo per cui il tracciamento può restare leggero. Nelle modalità video e live stream, una volta trovata una mano, il modello dei punti può seguirla da un fotogramma all'altro. Il rilevamento del palmo, più pesante, deve ripartire solo quando il tracker perde la sicurezza che una mano sia presente.

Passo 3: ventuno punti di riferimento

Il risultato che conta è l'insieme dei punti di riferimento. Il modello delle mani di MediaPipe restituisce 21 punti per mano, che la documentazione di Google chiama "21 coordinate delle nocche della mano":

• 1 punto per il polso
• 4 punti per ciascuna delle cinque dita: l'articolazione alla base, due articolazioni intermedie e la punta

Ogni punto arriva in due forme. Le coordinate immagine sono x e y, normalizzate su larghezza e altezza del fotogramma, più un valore di profondità relativa. Le coordinate mondo sono posizioni 3D approssimative in metri, con l'origine nel centro geometrico approssimativo della mano. Il modello indica anche la lateralità, una stima del fatto che ogni mano sia sinistra o destra.

Aiuta immaginare il risultato come un piccolo scheletro fatto di punti, ridisegnato molte volte al secondo sopra un video che la pagina non ha mai bisogno di mostrarti. Quello scheletro è l'unica cosa con cui lavora il resto del sistema. Da qui in poi, il codice non ha più a che fare con l'immagine di una mano. Ha a che fare con 21 punti e il loro movimento.

La documentazione dice anche che il modello è stato addestrato su circa 30.000 immagini reali, più modelli sintetici di mani renderizzati su sfondi diversi. Questo spiega in parte perché funziona con molte tonalità di pelle, ambienti e condizioni di luce, e anche perché può ancora essere ingannato da angolazioni insolite.

Passo 4: dai punti ai gesti

Ventuno punti in movimento non sono ancora un gesto. Trasformarli in qualcosa che una persona possa fare intenzionalmente, e ripetere, è il mestiere delle interfacce di tracciamento delle mani. Il modello non decide che stai pizzicando. Lo decide il codice dell'applicazione, a partire dalla geometria.

Alcune derivazioni comuni:

• Indicare e posizione. La punta dell'indice (o il centro del palmo) diventa un cursore. Le sue x e y vengono mappate sullo schermo, di solito a specchio, così che muovendo la mano a destra il cursore vada a destra, come in uno specchio.
• Pizzico. Si misura la distanza tra la punta del pollice e quella dell'indice. Quando scende sotto una soglia, relativa alla dimensione della mano perché funzioni vicino e lontano dalla fotocamera, inizia un pizzico. Quando risale sopra una soglia leggermente più grande, finisce. Lo scarto tra le due soglie evita che lo stato sfarfalli.
• Palmo aperto e pugno. Quanto le punte delle dita distano dal polso o dal centro del palmo, rispetto alle loro articolazioni, dice se le dita sono distese o piegate. Facendo la media sulle dita, si ottiene un valore continuo tra aperto e chiuso, e non solo un sì o un no.
• Velocità e direzione. Confrontare la posizione di un punto tra fotogrammi dà la velocità, così un rapido movimento orizzontale si distingue da una lenta deriva.

Due problemi pratici emergono subito. Il primo è il tremolio: i punti di riferimento tremano leggermente anche quando la mano è ferma, quindi la maggior parte delle applicazioni li smussa su alcuni fotogrammi e accetta un piccolo ritardo in cambio di un movimento calmo. Synfield lo fa con un filtro One Euro sul punto tracciato, un passa-basso che si adatta alla velocità e mantiene calme le mani ferme senza rendere appiccicosi i movimenti rapidi. Il secondo è la portata: l'area che la tua mano può coprire comodamente è più piccola del campo della fotocamera, quindi Synfield ti permette di calibrare i bordi di quell'area e li salva localmente come preferenza "area della mano" (gestureos.calibration.v1 nella pagina della privacy).

Passo 5: dai gesti a un sistema vivo

L'ultimo passo è quello in cui il tracciamento delle mani smette di essere una demo tecnica e diventa un'esperienza. Gli stati dei gesti vengono associati ai parametri di ciò che la pagina sta eseguendo, come un campo di particelle, un fluido, un suono o un insieme di riflessi.

L'associazione è una scelta di design, e lo stesso piccolo vocabolario di gesti può significare cose molto diverse. Nei mondi di Synfield, per esempio:

• In Helix, indicare avvolge una corrente di luce, un pizzico mantenuto la attira e la spezza in spruzzi, e lasciando andare si riforma un'onda di luce. Aprire o chiudere la mano distende l'onda o ne arriccia la cresta.
• In Mirror, il tuo indice disegna un tratto che viene riflesso attorno a un centro. Un pizzico mantenuto sposta quel centro, e il palmo aperto o il pugno aggiungono o tolgono pieghe.
• In Breathe, la mano quasi non comanda. Un pizzico mette in pausa la luce che respira e lasciando andare riprende, mentre aprire o chiudere la mano la allarga o la ammorbidisce.

Il processo è identico in tutti e tre. Cambia solo l'associazione. È questa la lezione utile per chi costruisce con il tracciamento delle mani: il modello ti dà ogni volta gli stessi 21 punti, e il carattere dell'opera dipende da cosa lasci che quei punti significhino. Per vedere come queste associazioni si inseriscono più in generale nei sistemi generativi, consulta la sezione sulla fotocamera di L'arte generativa interattiva, spiegata.

Il tracciamento delle mani nel browser è privato?

Può esserlo, ma dipende da come è costruito ogni sito. La tecnica non lo garantisce. Bisogna essere precisi su quali parti sono stabilite dal browser e quali sono scelte del sito.

Cosa garantisce il browser. Secondo la specifica Media Capture e la prassi dei browser descritta da MDN, una pagina non può leggere la fotocamera senza il tuo permesso, deve essere servita in modo sicuro per chiederlo e mostra un indicatore mentre la fotocamera è in uso. Puoi ritirare il permesso in qualsiasi momento.

Cosa dipende dal sito. Una volta che una pagina ha i fotogrammi, il suo codice può farne qualsiasi cosa. Questo include elaborarli localmente, disegnarli sullo schermo, registrarli o caricarli su un server. MediaPipe Hand Landmarker è progettato per girare sul dispositivo, dentro il browser, quindi un sito che lo usa non ha bisogno di inviare video da nessuna parte per seguire la tua mano. Se lo faccia o no dipende dal sito, quindi la verifica onesta è leggere la sua pagina della privacy e, se puoi, osservarne l'attività di rete.

Cosa dichiara di fare Synfield. La pagina della privacy di Synfield descrive il sito così com'è costruito oggi:

• La fotocamera è spenta quando si apre un mondo. Si avvia solo se scegli "Esplora con le mani", o se la accendi più tardi dal controllo della fotocamera o con il tasto C.
• La richiesta riguarda il video della fotocamera rivolta verso di te, senza microfono, e l'immagine non viene mostrata nella pagina.
• I fotogrammi vengono letti nella pagina e passati a un'attività di visione che gira anch'essa nel browser. Cerca una mano e restituisce punti. Il modello è un file del sito stesso e viene scaricato solo dopo l'avvio della fotocamera.
• Il codice del sito non registra il video, non carica i fotogrammi né i punti della mano e non crea alcun account.
• Il contatore anonimo delle visite registra solo dati generici, come se sono stati usati mouse, touch o le mani e quando è stata accesa la fotocamera. Non include nulla dell'immagine della fotocamera né dei punti della mano.

Queste affermazioni corrispondono al codice pubblicato: Synfield carica MediaPipe Hand Landmarker (@mediapipe/tasks-vision) con il file di modello hand_landmarker.task del sito stesso, imposta numHands a 1 e prova prima un delegate GPU con fallback su CPU.

Scegliere "Mani" nella pagina informativa di un mondo mostra solo le istruzioni e non accende mai la fotocamera. La fotocamera si avvia solo dentro un mondo, e solo quando lo chiedi tu.

Gli strumenti, in breve

Non serve conoscere gli strumenti per goderti un'opera con tracciamento delle mani, ma aiuta sapere cosa significano i nomi.

• getUserMedia / Media Capture and Streams. È lo standard del browser per l'accesso a fotocamera e microfono. Ogni esperienza web basata sulla webcam parte da qui. (MDN, W3C)
• MediaPipe Hand Landmarker. L'attività attuale di Google per i punti di riferimento della mano, con un pacchetto web che carica un modello e lo esegue nella pagina. Restituisce punti di riferimento, punti di riferimento mondo e lateralità. (Documentazione di Google AI Edge)
• TensorFlow.js e i modelli di mano precedenti. Prima dell'attuale API MediaPipe Tasks, il tracciamento delle mani nel browser si faceva spesso con modelli TensorFlow.js come Handpose e con la vecchia soluzione "MediaPipe Hands". Molti tutorial usano ancora questi nomi, quindi se li incontri, descrivono una generazione precedente della stessa idea.
• Un livello di rendering. I punti di riferimento poi guidano ciò che disegna l'immagine, di solito WebGL o Canvas. Quella parte è normale programmazione grafica, ed è lì che si prende la maggior parte delle decisioni artistiche.

Limiti, e perché mouse e touch contano ancora

Il tracciamento delle mani nel browser funziona abbastanza bene da farci arte. Non funziona ovunque, e non è il miglior modo di interagire per tutti. I limiti comuni:

• Luce. Il modello vede pixel. Una stanza buia, una luce forte alle tue spalle o una mano in ombra ne abbassano la confidenza, e può perdere la mano.
• Distanza e inquadratura. Troppo vicino, parti della mano escono dall'inquadratura. Troppo lontano, la mano è larga solo pochi pixel. A un braccio di distanza dalla fotocamera di un portatile di solito è comodo.
• Occlusione. Quando le dita si sovrappongono o la mano è di taglio rispetto alla fotocamera, il modello deve indovinare dove sono le articolazioni nascoste, e gesti come il pizzico diventano meno affidabili.
• Due mani e altre persone. Più mani significano più ambiguità e più calcolo. Molte esperienze seguono una sola mano per questo motivo.
• Dispositivi. L'inferenza richiede potenza di calcolo. I portatili recenti la gestiscono senza problemi. I dispositivi più vecchi o a basso consumo possono tracciare a una frequenza inferiore o scaldarsi in modo evidente, e i browser mobili variano. Synfield non pubblica un elenco chiuso di dispositivi supportati: la modalità mani richiede un contesto sicuro, getUserMedia e un browser in grado di eseguire il WASM di visione (con GPU quando disponibile). I browser desktop recenti sono la strada comoda; sui telefoni la stessa tecnologia può funzionare, ma inquadratura e calore variano, quindi il touch di solito è più semplice.
• Corpi. Non tutti possono tenere un braccio alzato a lungo, e non tutti vogliono stare davanti alla fotocamera. Un'interazione che funziona solo con le mani lascia fuori delle persone.

Per quest'ultimo motivo, le opere con tracciamento delle mani più curate trattano la fotocamera come una via d'accesso tra tante. In Synfield, ogni mondo si può esplorare anche con mouse o touch screen, e i gesti hanno equivalenti diretti. Tenere premuto il pulsante del mouse o appoggiare un dito fa ciò che fa un pizzico, e la rotellina o allargare due dita fa ciò che fa aprire e chiudere la mano. La guida Come esplorare li mostra uno accanto all'altro.

Una breve nota storica

L'idea di un corpo che guida un'immagine senza toccare nulla è più antica delle webcam. Videoplace di Myron Krueger, degli anni Settanta e Ottanta, usava telecamere per inserire la sagoma di una persona in un'opera che rispondeva. Quella storia appartiene al racconto dell'arte interattiva, narrato in Che cos'è l'arte interattiva?. La novità è il contesto. Rilevare una mano nel dettaglio un tempo richiedeva hardware speciale, e ora è un file di modello che una pagina web può scaricare ed eseguire in una scheda.

Provalo

Il modo migliore per capire il processo è sentirlo rispondere. Comincia da uno di questi, poi esplora:

• Ink: pizzica per raccogliere una goccia, lascia andare per farla sbocciare.
• Helix: indica per avvolgere una corrente di luce.
• Mirror: disegna un tratto e guardalo piegarsi.
• Breathe: un mondo più lento, dove un pizzico mette solo in pausa la luce.
• Matter: il palmo aperto respinge un campo di particelle e il pugno lo attira.

Oppure apri Esplora e scegli "Esplora con le mani". La fotocamera resta spenta finché non lo fai.

Domande frequenti

Devo installare qualcosa per il tracciamento delle mani nel browser? No. Bastano un browser moderno e una webcam. La pagina scarica il modello e lo esegue da sola. Tu concedi solo il permesso della fotocamera.

Il tracciamento delle mani con webcam è privato? Il browser garantisce che una pagina non può usare la tua fotocamera senza permesso. Che i fotogrammi restino sul tuo dispositivo dipende dal sito. Modelli come MediaPipe Hand Landmarker girano in locale, quindi non serve caricare nulla. Controlla la pagina della privacy del sito. Quella di Synfield dice che fotogrammi e punti della mano non vengono registrati né caricati.

Cosa sono i 21 punti di riferimento della mano? Sono i punti che il modello di MediaPipe posiziona su ogni mano rilevata: uno per il polso e quattro per ogni dito, dall'articolazione alla base fino alla punta. I gesti vengono calcolati dalle distanze e dagli angoli tra di essi.

Funziona sul telefono? Spesso sì, se il browser mobile supporta l'accesso alla fotocamera e può eseguire il modello di visione nella pagina. Prestazioni e inquadratura variano a seconda del dispositivo, quindi sul telefono il touch è di solito il modo più comodo per entrare.

Cosa posso fare se il tracciamento perde la mia mano? Aggiungi luce davanti a te, mettiti a circa un braccio di distanza dalla fotocamera e tieni il palmo rivolto verso di essa. Se fa ancora fatica, un mouse o un touch screen offrono la stessa esperienza.