Com funciona el seguiment de mans al navegador

Ho pots provar ara mateix. Obre Ink, activa la càmera i assenyala amb l'índex per dibuixar un fil de color. Ajunta el polze i l'índex per recollir una gota i després separa'ls perquè floreixi a l'aigua.

Aquesta guia segueix aquest procés pas a pas. Explica què concedeix realment el permís de càmera, què retorna un model com MediaPipe Hand Landmarker, com unes quantes desenes de nombres es converteixen en un gest, què es queda al teu dispositiu i on la tècnica encara té dificultats. Si t'interessa la pregunta més àmplia de què fa que l'art sigui interactiu o generatiu, L'art generatiu interactiu, explicat cobreix aquest terreny. Aquí ens centrem en el mecanisme.

Com funciona, en cinc passos

1. La pàgina demana la càmera. El navegador mostra un avís de permís i no es captura res fins que acceptes.
2. Els fotogrames van a un model. Cada fotograma del vídeo s'entrega a un model de visió que s'executa dins la pàgina.
3. El model retorna punts clau. Per cada mà que troba, genera 21 punts: el canell i les articulacions i puntes dels dits.
4. El codi dedueix gestos. Les distàncies, angles i velocitats entre aquests punts es converteixen en estats com assenyalar, pessigar, el palmell obert o el puny.
5. Els gestos es converteixen en paràmetres. Aquests estats s'assignen a un sistema visual o sonor, com una posició, una força o un color.

La resta de la guia recorre cada pas.

Pas 1: demanar la càmera

Per defecte, una pàgina web no pot veure a través de la teva webcam. Per obtenir vídeo, crida una funció del navegador anomenada getUserMedia(), que forma part de l'especificació Media Capture and Streams publicada pel W3C. La referència de MDN sobre getUserMedia descriu què passa després. El navegador demana permís a l'usuari i només si el concedeix la pàgina rep un MediaStream, un flux de fotogrames en directe. Si l'usuari el rebutja, o no hi ha càmera, la petició falla i la pàgina no rep res.

Alguns detalls d'aquest pas importen per a la privadesa i per a com se sent l'experiència:

• La petició és concreta. Una pàgina pot demanar només vídeo, només àudio o tots dos, i pot indicar quina càmera prefereix (per exemple, la que mira l'usuari). Una pàgina de seguiment de mans no té cap motiu per demanar el micròfon.
• Necessita un context segur. Segons MDN, getUserMedia() només està disponible en pàgines servides per HTTPS (o des d'una adreça local de desenvolupament). Una pàgina normal no segura no pot demanar la càmera de cap manera.
• El navegador mana. Els navegadors mostren un indicador mentre la càmera està activa, i pots revocar el permís des de la configuració del lloc en qualsevol moment. Les regles es defineixen a l'especificació Media Capture and Streams del W3C.

Fixa't en el que aquest pas no implica. Concedir accés a la càmera no vol dir que el vídeo es mostri a la pantalla, s'enregistri o s'enviï enlloc. La pàgina simplement rep fotogrames a la memòria. El que en faci és una altra qüestió, i la secció de privadesa hi torna més avall.

Pas 2: dels fotogrames a un model

Un cop el flux està en marxa, la pàgina en llegeix fotogrames, normalment connectant-lo a un element <video> ocult i prenent-ne una mostra a cada fotograma d'animació. Cada fotograma mostrejat és una imatge, una graella de píxels, i es passa a un model.

El model més utilitzat per a aquesta tasca al web és MediaPipe Hand Landmarker, del projecte MediaPipe de Google. La seva documentació descriu una tasca que «opera sobre dades d'imatge amb un model d'aprenentatge automàtic (ML), com a dades estàtiques o com a flux continu». Inclou guies per a Android, Python i el web. Al web, la pàgina descarrega el fitxer del model i el càlcul s'executa dins el navegador mitjançant un entorn WebAssembly, amb acceleració per GPU opcional.

La tasca té tres modes d'execució. IMAGE processa imatges soltes i VIDEO processa fitxers de vídeo descodificats. LIVE_STREAM és el que correspon a una webcam, i en aquest mode els resultats arriben a través d'un listener a mesura que es processen els fotogrames. Diversos ajustos regulen el comportament. num_hands fixa quantes mans cal buscar, i el valor per defecte és 1. Tres llindars de confiança (detecció, presència i seguiment, cadascun 0,5 per defecte) decideixen quina seguretat necessita el model abans d'informar d'una mà o de continuar seguint-la.

Dos models fan la feina, empaquetats junts en un mateix paquet. Segons la documentació de Google:

• Un model de detecció del palmell recorre tot el fotograma buscant alguna cosa que sembli una mà.
• Un model de detecció de punts clau de la mà examina després aquella regió de prop i hi col·loca els punts.

Aquesta divisió és el motiu pel qual el seguiment pot ser lleuger. En els modes de vídeo i de flux en directe, un cop trobada una mà, el model de punts clau la pot seguir d'un fotograma a l'altre. La detecció del palmell, més pesada, només s'ha de tornar a executar quan el seguiment perd la confiança que hi ha una mà.

Pas 3: vint-i-un punts clau

El resultat que importa és el conjunt de punts clau. El model de mans de MediaPipe retorna 21 punts per mà, que la documentació de Google anomena «21 coordenades dels artells de la mà»:

• 1 punt per al canell
• 4 punts per a cadascun dels cinc dits: l'articulació de la base, dues articulacions intermèdies i la punta

Cada punt arriba en dues formes. Les coordenades d'imatge són x i y, normalitzades a l'amplada i l'alçada del fotograma, més un valor de profunditat relativa. Les coordenades del món són posicions 3D aproximades en metres, amb l'origen al centre geomètric aproximat de la mà. El model també indica la lateralitat, una estimació de si cada mà és esquerra o dreta.

Ajuda imaginar el resultat com un petit esquelet de punts, redibuixat moltes vegades per segon sobre un vídeo que la pàgina no necessita mostrar-te mai. Aquest esquelet és l'única cosa amb què treballa la resta del sistema. A partir d'aquí, el codi ja no tracta amb la imatge d'una mà. Tracta amb 21 punts i el seu moviment.

La documentació també diu que el model es va entrenar amb unes 30.000 imatges del món real, a més de models sintètics de mans renderitzats sobre fons diversos. Això explica en part per què funciona amb molts tons de pell, habitacions i condicions de llum, i també per què encara el poden enganyar els angles inusuals.

Pas 4: dels punts als gestos

Vint-i-un punts en moviment encara no són un gest. Convertir-los en una cosa que una persona pugui fer amb intenció, i repetir, és l'ofici de les interfícies de seguiment de mans. El model no decideix que estàs pessigant. Ho decideix el codi de l'aplicació, a partir de la geometria.

Algunes deduccions habituals:

• Assenyalar i posició. La punta de l'índex (o el centre del palmell) es converteix en un cursor. La seva x i la seva y s'assignen a la pantalla, normalment en mirall perquè, quan mous la mà cap a la dreta, el cursor vagi cap a la dreta, com en un mirall.
• Pessic. Es mesura la distància entre la punta del polze i la de l'índex. Quan baixa d'un llindar, relatiu a la mida de la mà perquè funcioni a prop i lluny de la càmera, comença un pessic. Quan puja per sobre d'un llindar una mica més gran, s'acaba. El marge entre tots dos llindars evita que l'estat parpellegi.
• Palmell obert i puny. Com de lluny queden les puntes dels dits del canell o del centre del palmell, comparat amb les seves articulacions, indica si els dits estan estirats o doblegats. Fent la mitjana entre els dits, dona un valor continu entre obert i tancat, i no només un sí o un no.
• Velocitat i direcció. Comparar la posició d'un punt entre fotogrames dona la velocitat, de manera que un escombratge horitzontal ràpid es distingeix d'una deriva lenta.

De seguida apareixen dos problemes pràctics. El primer és el tremolor: els punts clau tremolen lleugerament fins i tot amb la mà quieta, així que la majoria d'aplicacions els suavitzen durant uns quants fotogrames i accepten un petit retard a canvi d'un moviment tranquil. Synfield ho fa amb un filtre One Euro sobre el punt seguit, un passabaix que s'adapta a la velocitat i manté tranquil·les les mans quietes sense que els moviments ràpids es notin enganxosos. El segon és l'abast: la zona que la teva mà pot cobrir còmodament és més petita que el camp de la càmera, així que Synfield et deixa calibrar les vores d'aquesta zona i les desa localment com a preferència de «zona de la mà» (gestureos.calibration.v1 a la pàgina de privadesa).

Pas 5: dels gestos a un sistema viu

L'últim pas és on el seguiment de mans deixa de ser una demo tècnica i es converteix en una experiència. Els estats dels gestos s'assignen a paràmetres del que estigui executant la pàgina, com un camp de partícules, un fluid, un so o un conjunt de reflexos.

L'assignació és una decisió de disseny, i el mateix petit vocabulari de gestos pot significar coses molt diferents. Als mons de Synfield, per exemple:

• A Helix, assenyalar enrotlla un corrent de llum, un pessic sostingut l'atreu i el trenca en esquitxos, i en deixar-lo anar es torna a formar una onada de llum. Obrir o tancar la mà estén l'onada o en riça la cresta.
• A Mirror, el teu índex dibuixa un traç que es reflecteix al voltant d'un centre. Un pessic sostingut mou aquest centre, i el palmell obert o el puny afegeixen o treuen plecs.
• A Breathe, la mà gairebé no mana. Un pessic posa en pausa la llum que respira i en deixar-lo anar continua, mentre que obrir o tancar la mà l'eixampla o la suavitza.

El procés és idèntic en tots tres. Només canvia l'assignació. Aquesta és la lliçó útil per a qui construeix amb seguiment de mans: el model et dona els mateixos 21 punts cada vegada, i el caràcter de l'obra depèn del que deixis que aquests punts signifiquin. Per veure com encaixen aquestes assignacions en els sistemes generatius en general, consulta la secció sobre la càmera de L'art generatiu interactiu, explicat.

El seguiment de mans al navegador és privat?

Pot ser-ho, però depèn de com estigui construït cada lloc. La tècnica no ho garanteix. Cal ser precís sobre quines parts fixa el navegador i quines són decisions del lloc.

El que garanteix el navegador. Segons l'especificació Media Capture i la pràctica dels navegadors descrita per MDN, una pàgina no pot llegir la càmera sense el teu permís, s'ha de servir de manera segura per demanar-lo i mostra un indicador mentre la càmera està en ús. Pots retirar el permís en qualsevol moment.

El que depèn del lloc. Un cop una pàgina té fotogrames, el seu codi en pot fer qualsevol cosa. Això inclou processar-los localment, dibuixar-los a la pantalla, enregistrar-los o pujar-los a un servidor. MediaPipe Hand Landmarker està dissenyat per executar-se al dispositiu, dins el navegador, així que un lloc que l'utilitzi no necessita enviar vídeo enlloc per seguir la teva mà. Que ho faci o no depèn del lloc, així que la prova honesta és llegir-ne la pàgina de privadesa i, si pots, observar-ne l'activitat de xarxa.

El que Synfield diu que fa. La pàgina de privadesa de Synfield descriu el lloc tal com està construït avui:

• La càmera està apagada quan s'obre un món. Només s'engega si tries «Explora amb les mans», o si l'actives després des del control de càmera o amb la tecla C.
• La petició és de vídeo de la càmera que et mira, sense micròfon, i la imatge no es mostra a la pàgina.
• Els fotogrames es llegeixen a la pàgina i es passen a una tasca de visió que també s'executa al navegador. Busca una mà i retorna punts. El model és un fitxer del mateix lloc i només es descarrega després que s'engegui la càmera.
• El codi del lloc no enregistra el vídeo, no puja els fotogrames ni els punts de la mà i no crea cap compte.
• El comptador anònim de visites només registra dades generals, com si s'ha fet servir un ratolí, la pantalla tàctil o les mans, i quan s'ha engegat la càmera. No inclou res de la imatge de la càmera ni dels punts de la mà.

Aquestes afirmacions coincideixen amb el codi publicat: Synfield carrega MediaPipe Hand Landmarker (@mediapipe/tasks-vision) amb el fitxer de model hand_landmarker.task del mateix lloc, fixa numHands a 1 i prova primer un delegat de GPU amb alternativa de CPU.

Triar «Mans» a la pàgina d'informació d'un món només mostra instruccions i no engega mai la càmera. La càmera només s'engega dins d'un món, i només quan tu ho demanes.

Les eines, en breu

No cal que coneguis les eines per gaudir d'una obra amb seguiment de mans, però ajuda saber què volen dir els noms.

• getUserMedia / Media Capture and Streams. És l'estàndard del navegador per accedir a la càmera i al micròfon. Tota experiència web basada en la webcam comença aquí. (MDN, W3C)
• MediaPipe Hand Landmarker. La tasca actual de Google per a punts clau de la mà, amb un paquet web que carrega un model i l'executa a la pàgina. Retorna punts clau, punts clau del món i lateralitat. (Documentació de Google AI Edge)
• TensorFlow.js i models de mans anteriors. Abans de l'API actual MediaPipe Tasks, el seguiment de mans al navegador es feia sovint amb models de TensorFlow.js com Handpose i amb l'antiga solució «MediaPipe Hands». Molts tutorials encara fan servir aquests noms, així que si els veus, descriuen una generació anterior de la mateixa idea.
• Una capa de renderització. Els punts clau controlen després el que dibuixa la imatge, normalment WebGL o Canvas. Aquesta part és programació gràfica normal, i és on es prenen la majoria de decisions artístiques.

Límits, i per què el ratolí i la pantalla tàctil continuen important

El seguiment de mans al navegador funciona prou bé per fer-hi art. No funciona a tot arreu, i no és la millor manera d'interactuar per a tothom. Els límits habituals:

• Llum. El model veu píxels. Una habitació fosca, una llum forta darrere teu o una mà a l'ombra en redueixen la confiança, i pot perdre la mà.
• Distància i enquadrament. Massa a prop, parts de la mà surten de l'enquadrament. Massa lluny, la mà només ocupa uns quants píxels. A un braç de distància de la càmera d'un portàtil sol ser còmode.
• Oclusió. Quan els dits se superposen o la mà es posa de cantell respecte a la càmera, el model ha d'endevinar on són les articulacions amagades, i gestos com el pessic es tornen menys fiables.
• Dues mans i altres persones. Més mans vol dir més ambigüitat i més càlcul. Moltes experiències només segueixen una mà per aquest motiu.
• Dispositius. La inferència necessita potència de càlcul. Els portàtils recents la gestionen sense problemes. Els dispositius més antics o de baix consum poden fer el seguiment a menys freqüència o escalfar-se notablement, i els navegadors mòbils varien. Synfield no publica una llista tancada de dispositius compatibles: el mode mans necessita un context segur, getUserMedia i un navegador que pugui executar el WASM de visió (amb GPU quan sigui disponible). Els navegadors d'escriptori recents són la via còmoda; als mòbils la mateixa tecnologia pot funcionar, però l'enquadrament i l'escalfor varien, així que la pantalla tàctil sol ser més fàcil.
• Cossos. No tothom pot mantenir un braç aixecat gaire estona, i no tothom vol sortir a la càmera. Una interacció que només funciona amb les mans deixa gent fora.

Per aquest últim motiu, les obres amb seguiment de mans més acurades tracten la càmera com una via d'entrada entre diverses. A Synfield, tots els mons també es poden explorar amb ratolí o pantalla tàctil, i els gestos tenen equivalents directes. Mantenir premut el botó del ratolí o recolzar un dit fa el mateix que un pessic, i la roda o separar dos dits fa el mateix que obrir i tancar la mà. La guia Com explorar els mostra un al costat de l'altre.

Una breu nota històrica

La idea d'un cos que dirigeix una imatge sense tocar res és més antiga que les webcams. Videoplace, de Myron Krueger, dels anys setanta i vuitanta, feia servir càmeres per introduir la silueta d'una persona en una obra que responia. Aquesta història forma part del relat de l'art interactiu, explicat a Què és l'art interactiu?. El que és nou és el context. Detectar una mà amb detall abans requeria maquinari especial, i ara és un fitxer de model que una pàgina web pot descarregar i executar en una pestanya.

Prova-ho

La millor manera d'entendre el procés és sentir com respon. Comença per un d'aquests i després explora:

• Ink: pessiga per recollir una gota, deixa-la anar perquè floreixi.
• Helix: assenyala per enrotllar un corrent de llum.
• Mirror: dibuixa un traç i mira com es plega.
• Breathe: un món més lent, on un pessic només posa en pausa la llum.
• Matter: el palmell obert repel·leix un camp de partícules i el puny l'atreu.

O obre Explora i tria «Explora amb les mans». La càmera continua apagada fins que ho facis.

Preguntes freqüents

He d'instal·lar res per al seguiment de mans al navegador? No. N'hi ha prou amb un navegador modern i una webcam. La pàgina descarrega el model i l'executa ella mateixa. Tu només concedeixes el permís de càmera.

El seguiment de mans amb webcam és privat? El navegador garanteix que una pàgina no pot fer servir la teva càmera sense permís. Que els fotogrames es quedin al teu dispositiu depèn del lloc. Models com MediaPipe Hand Landmarker s'executen localment, així que no cal pujar res. Consulta la pàgina de privadesa del lloc. La de Synfield diu que els fotogrames i els punts de la mà no s'enregistren ni es pugen.

Què són els 21 punts clau de la mà? Són els punts que el model de MediaPipe col·loca a cada mà detectada: un per al canell i quatre per a cada dit, des de l'articulació de la base fins a la punta. Els gestos es calculen a partir de les distàncies i els angles entre ells.

Funciona al mòbil? Sovint sí, quan el navegador mòbil permet l'accés a la càmera i pot executar el model de visió a la pàgina. El rendiment i l'enquadrament varien segons el dispositiu, així que al mòbil la pantalla tàctil sol ser la manera més còmoda d'entrar.

Què puc fer si el seguiment perd la meva mà? Afegeix llum davant teu, posa't a un braç de distància de la càmera i mantén el palmell cap a ella. Si encara costa, un ratolí o una pantalla tàctil ofereixen la mateixa experiència.