Comment fonctionne le suivi des mains dans le navigateur

Tu peux essayer tout de suite. Ouvre Ink, active la caméra et pointe avec l’index pour tracer un fil de couleur. Rapproche le pouce et l’index pour recueillir une goutte, puis écarte-les pour la laisser éclore dans l’eau.

Ce guide suit ce processus étape par étape. Il explique ce que l’autorisation de la caméra accorde réellement, ce que renvoie un modèle comme MediaPipe Hand Landmarker, comment quelques dizaines de nombres deviennent un geste, ce qui reste sur ton appareil et où la technique a encore du mal. Si tu t’intéresses à la question plus large de ce qui rend l’art interactif ou génératif, L’art génératif interactif, expliqué couvre ce terrain. Ici, on se concentre sur le mécanisme.

Comment ça marche, en cinq étapes

1. La page demande la caméra. Le navigateur affiche une demande d’autorisation, et rien n’est capturé tant que tu n’as pas accepté.
2. Les images vont à un modèle. Chaque image de la vidéo est transmise à un modèle de vision qui s’exécute dans la page.
3. Le modèle renvoie des points clés. Pour chaque main trouvée, il produit 21 points : le poignet ainsi que les articulations et le bout des doigts.
4. Le code en déduit des gestes. Les distances, angles et vitesses entre ces points deviennent des états comme pointer, pincer, la paume ouverte ou le poing.
5. Les gestes deviennent des paramètres. Ces états sont associés à un système visuel ou sonore, comme une position, une force ou une couleur.

La suite de ce guide reprend chaque étape.

Étape 1 : demander la caméra

Par défaut, une page web ne peut pas voir à travers ta webcam. Pour obtenir de la vidéo, elle appelle une fonction du navigateur nommée getUserMedia(), qui fait partie de la spécification Media Capture and Streams publiée par le W3C. La référence MDN sur getUserMedia décrit la suite. Le navigateur demande l’autorisation à l’utilisateur, et ce n’est que si elle est accordée que la page reçoit un MediaStream, un flux d’images en direct. Si l’utilisateur refuse, ou s’il n’y a pas de caméra, la demande échoue et la page ne reçoit rien.

Certains détails de cette étape comptent pour la confidentialité et pour le ressenti de l’expérience :

• La demande est précise. Une page peut demander la vidéo seule, l’audio seul ou les deux, et indiquer quelle caméra elle préfère (par exemple, celle tournée vers l’utilisateur). Une page de suivi des mains n’a aucune raison de demander le micro.
• Il faut un contexte sécurisé. Selon MDN, getUserMedia() n’est disponible que sur des pages servies en HTTPS (ou depuis une adresse de développement locale). Une page ordinaire non sécurisée ne peut pas du tout demander la caméra.
• Le navigateur garde la main. Les navigateurs affichent un indicateur tant que la caméra est active, et tu peux révoquer l’autorisation à tout moment dans les paramètres du site. Les règles sont définies dans la spécification Media Capture and Streams du W3C.

Note ce que cette étape n’implique pas. Autoriser l’accès à la caméra ne signifie pas que la vidéo est affichée à l’écran, enregistrée ou envoyée où que ce soit. La page reçoit simplement des images en mémoire. Ce qu’elle en fait est une autre question, sur laquelle revient la section confidentialité plus bas.

Étape 2 : des images au modèle

Une fois le flux lancé, la page en lit les images, généralement en reliant le flux à un élément <video> caché et en l’échantillonnant à chaque image d’animation. Chaque image échantillonnée est une grille de pixels, transmise à un modèle.

Le modèle le plus utilisé pour cette tâche sur le web est MediaPipe Hand Landmarker, issu du projet MediaPipe de Google. Sa documentation décrit une tâche qui « opère sur des données d’image avec un modèle d’apprentissage automatique (ML), sous forme de données statiques ou de flux continu ». Elle est fournie avec des guides pour Android, Python et le web. Sur le web, la page télécharge le fichier du modèle, et le calcul s’exécute dans le navigateur via un environnement WebAssembly, avec une accélération GPU facultative.

La tâche propose trois modes d’exécution. IMAGE traite des images isolées et VIDEO des fichiers vidéo décodés. LIVE_STREAM est celui qui convient à une webcam ; dans ce mode, les résultats arrivent via un listener au fil du traitement des images. Plusieurs réglages ajustent son comportement. num_hands fixe le nombre de mains à chercher, 1 par défaut. Trois seuils de confiance (détection, présence et suivi, chacun à 0,5 par défaut) déterminent le degré de certitude requis avant de signaler une main ou de continuer à la suivre.

Deux modèles font le travail, réunis dans un même paquet. Selon la documentation de Google :

• Un modèle de détection de la paume parcourt toute l’image à la recherche de quelque chose qui ressemble à une main.
• Un modèle de détection des points clés de la main examine ensuite cette zone de près et place les points.

Cette séparation explique pourquoi le suivi peut rester léger. En mode vidéo et en flux direct, une fois la main trouvée, le modèle de points clés peut la suivre d’une image à l’autre. La détection de la paume, plus lourde, n’a besoin de tourner à nouveau que lorsque le suivi perd confiance dans la présence d’une main.

Étape 3 : vingt et un points clés

Le résultat qui compte, c’est l’ensemble des points clés. Le modèle de main de MediaPipe renvoie 21 points par main, que la documentation de Google appelle « 21 coordonnées des articulations de la main » :

• 1 point pour le poignet
• 4 points pour chacun des cinq doigts : l’articulation de la base, deux articulations intermédiaires et le bout

Chaque point existe sous deux formes. Les coordonnées image sont x et y, normalisées par la largeur et la hauteur de l’image, plus une valeur de profondeur relative. Les coordonnées monde sont des positions 3D approximatives en mètres, dont l’origine est le centre géométrique approximatif de la main. Le modèle indique aussi la latéralité, une estimation de la gauche ou de la droite pour chaque main.

Il aide d’imaginer le résultat comme un petit squelette de points, redessiné de nombreuses fois par seconde sur une vidéo que la page n’a jamais besoin de te montrer. Ce squelette est la seule chose avec laquelle travaille le reste du système. À partir de là, le code ne manipule plus l’image d’une main. Il manipule 21 points et leur mouvement.

La documentation précise aussi que le modèle a été entraîné sur environ 30 000 images réelles, plus des modèles de mains synthétiques rendus sur des arrière-plans variés. Cela explique en partie pourquoi il s’en sort avec de nombreuses carnations, pièces et conditions d’éclairage, et aussi pourquoi des angles inhabituels peuvent encore le tromper.

Étape 4 : des points aux gestes

Vingt et un points en mouvement ne font pas encore un geste. Les transformer en quelque chose qu’une personne peut faire intentionnellement, et répéter, c’est tout le savoir-faire des interfaces de suivi des mains. Le modèle ne décide pas que tu pinces. C’est le code de l’application qui le décide, à partir de la géométrie.

Quelques déductions courantes :

• Pointer et position. Le bout de l’index (ou le centre de la paume) devient un curseur. Ses x et y sont projetés sur l’écran, généralement en miroir, pour que déplacer la main vers la droite déplace le curseur vers la droite, comme dans un miroir.
• Pincement. On mesure la distance entre le bout du pouce et le bout de l’index. Quand elle passe sous un seuil, relatif à la taille de la main pour fonctionner près comme loin de la caméra, un pincement commence. Quand elle repasse au-dessus d’un seuil un peu plus grand, il se termine. L’écart entre les deux seuils évite que l’état clignote.
• Paume ouverte et poing. La distance entre le bout des doigts et le poignet ou le centre de la paume, comparée à leurs articulations, indique si les doigts sont tendus ou repliés. En moyenne sur les doigts, cela donne une valeur continue entre ouvert et fermé, et pas seulement un oui ou un non.
• Vitesse et direction. Comparer la position d’un point d’une image à l’autre donne la vitesse, ce qui permet de distinguer un balayage horizontal rapide d’une lente dérive.

Deux problèmes pratiques surgissent aussitôt. Le premier est le tremblement : les points clés tremblent légèrement même quand la main est immobile, alors la plupart des applications les lissent sur quelques images et acceptent un léger retard en échange d’un mouvement calme. Synfield le fait avec un filtre One Euro sur le point suivi, un passe-bas adaptatif selon la vitesse qui garde les mains immobiles calmes sans rendre les mouvements rapides collants. Le second est la portée : la zone que ta main peut couvrir confortablement est plus petite que le champ de la caméra, alors Synfield te permet de calibrer les bords de cette zone et les enregistre localement comme préférence de « zone de la main » (gestureos.calibration.v1 sur la page de confidentialité).

Étape 5 : des gestes à un système vivant

La dernière étape est celle où le suivi des mains cesse d’être une démo technique pour devenir une expérience. Les états des gestes sont associés aux paramètres de ce que la page fait tourner, comme un champ de particules, un fluide, un son ou un ensemble de reflets.

L’association est un choix de design, et le même petit vocabulaire de gestes peut signifier des choses très différentes. Dans les mondes de Synfield, par exemple :

• Dans Helix, pointer enroule un courant de lumière, un pincement maintenu l’attire et le brise en embruns, et relâcher laisse une vague de lumière se reformer. Ouvrir ou fermer la main déploie la vague ou enroule sa crête.
• Dans Mirror, ton index trace un trait reflété autour d’un centre. Un pincement maintenu déplace ce centre, et la paume ouverte ou le poing ajoute ou retire des plis.
• Dans Breathe, la main ne commande presque rien. Un pincement met en pause la lumière qui respire et relâcher la laisse reprendre, tandis qu’ouvrir ou fermer la main l’élargit ou l’adoucit.

Le processus est identique dans les trois. Seule l’association change. C’est la leçon utile pour quiconque construit avec le suivi des mains : le modèle te donne les mêmes 21 points à chaque fois, et le caractère de l’œuvre dépend de ce que tu laisses ces points signifier. Pour voir comment ces associations s’inscrivent plus largement dans les systèmes génératifs, consulte la section sur la caméra de L’art génératif interactif, expliqué.

Le suivi des mains dans le navigateur est-il privé ?

Il peut l’être, mais cela dépend de la façon dont chaque site est construit. La technique ne le garantit pas. Il faut être précis sur ce qui est fixé par le navigateur et ce qui relève des choix du site.

Ce que garantit le navigateur. Selon la spécification Media Capture et la pratique des navigateurs décrite par MDN, une page ne peut pas lire la caméra sans ton autorisation, doit être servie de façon sécurisée pour la demander, et affiche un indicateur pendant que la caméra est utilisée. Tu peux retirer l’autorisation à tout moment.

Ce qui dépend du site. Une fois qu’une page a des images, son code peut en faire n’importe quoi. Cela inclut les traiter localement, les afficher à l’écran, les enregistrer ou les envoyer à un serveur. MediaPipe Hand Landmarker est conçu pour s’exécuter sur l’appareil, dans le navigateur, donc un site qui l’utilise n’a pas besoin d’envoyer de la vidéo où que ce soit pour suivre ta main. Le faire ou non dépend du site : le test honnête consiste à lire sa page de confidentialité et, si tu peux, à observer son activité réseau.

Ce que Synfield dit faire. La page de confidentialité de Synfield décrit le site tel qu’il est construit aujourd’hui :

• La caméra est éteinte à l’ouverture d’un monde. Elle ne démarre que si tu choisis « Explorer avec les mains », ou si tu l’actives plus tard depuis le contrôle de la caméra ou la touche C.
• La demande porte sur la vidéo de la caméra tournée vers toi, sans micro, et l’image n’est pas affichée sur la page.
• Les images sont lues dans la page et transmises à une tâche de vision qui s’exécute elle aussi dans le navigateur. Elle cherche une main et renvoie des points. Le modèle est un fichier hébergé sur le site lui-même et n’est téléchargé qu’après le démarrage de la caméra.
• Le code du site n’enregistre pas la vidéo, n’envoie ni les images ni les points de la main, et ne crée pas de compte.
• Le compteur de visites anonyme n’enregistre que des informations générales, comme l’usage d’une souris, du tactile ou des mains, et le moment où la caméra a été activée. Rien de l’image de la caméra ni des points de la main n’y figure.

Ces affirmations correspondent au code publié : Synfield charge MediaPipe Hand Landmarker (@mediapipe/tasks-vision) avec son propre fichier de modèle hand_landmarker.task, règle numHands sur 1, et essaie d’abord un délégué GPU avec repli sur le CPU.

Choisir « Mains » sur la page d’information d’un monde affiche seulement des instructions et n’allume jamais la caméra. La caméra ne démarre qu’à l’intérieur d’un monde, et seulement quand tu le demandes.

Les outils, en bref

Tu n’as pas besoin de connaître les outils pour apprécier une œuvre à suivi des mains, mais il aide de savoir ce que signifient les noms.

• getUserMedia / Media Capture and Streams. C’est le standard du navigateur pour accéder à la caméra et au micro. Toute expérience web basée sur la webcam commence ici. (MDN, W3C)
• MediaPipe Hand Landmarker. La tâche actuelle de Google pour les points clés de la main, avec un paquet web qui charge un modèle et l’exécute dans la page. Elle renvoie les points clés, les points clés monde et la latéralité. (Documentation Google AI Edge)
• TensorFlow.js et les modèles de main antérieurs. Avant l’API actuelle MediaPipe Tasks, le suivi des mains dans le navigateur se faisait souvent avec des modèles TensorFlow.js comme Handpose et avec l’ancienne solution « MediaPipe Hands ». Beaucoup de tutoriels utilisent encore ces noms ; si tu les croises, ils décrivent une génération antérieure de la même idée.
• Une couche de rendu. Les points clés pilotent ensuite ce qui dessine l’image, généralement WebGL ou Canvas. Cette partie relève de la programmation graphique ordinaire, et c’est là que se prennent la plupart des décisions artistiques.

Limites, et pourquoi la souris et le tactile comptent toujours

Le suivi des mains dans le navigateur fonctionne assez bien pour faire de l’art. Il ne fonctionne pas partout, et ce n’est pas le meilleur mode d’interaction pour tout le monde. Les limites courantes :

• Lumière. Le modèle voit des pixels. Une pièce sombre, une lumière forte derrière toi ou une main dans l’ombre réduisent sa confiance, et il peut perdre la main.
• Distance et cadrage. Trop près, des parties de la main sortent du cadre. Trop loin, la main ne fait que quelques pixels. Une longueur de bras devant la caméra d’un ordinateur portable est généralement confortable.
• Occlusion. Quand les doigts se chevauchent ou que la main se présente de profil à la caméra, le modèle doit deviner où sont les articulations cachées, et des gestes comme le pincement deviennent moins fiables.
• Deux mains et d’autres personnes. Plus de mains signifie plus d’ambiguïté et plus de calcul. Beaucoup d’expériences ne suivent qu’une seule main pour cette raison.
• Appareils. L’inférence demande de la puissance de calcul. Les ordinateurs portables récents s’en sortent sans peine. Les appareils plus anciens ou peu puissants peuvent suivre à une cadence plus faible ou chauffer sensiblement, et les navigateurs mobiles varient. Synfield ne publie pas de liste fermée d’appareils compatibles : le mode mains nécessite un contexte sécurisé, getUserMedia et un navigateur capable d’exécuter le WASM de vision (avec GPU si disponible). Les navigateurs de bureau récents sont la voie confortable ; sur téléphone, la même technologie peut fonctionner, mais le cadrage et la chauffe varient, donc le tactile est généralement plus simple.
• Corps. Tout le monde ne peut pas garder un bras levé longtemps, et tout le monde ne veut pas être filmé. Une interaction qui ne fonctionne qu’avec les mains laisse des gens de côté.

Pour cette dernière raison, les œuvres à suivi des mains les plus soignées traitent la caméra comme une porte d’entrée parmi d’autres. Dans Synfield, chaque monde peut aussi être exploré à la souris ou sur écran tactile, et les gestes ont des équivalents directs. Maintenir le bouton de la souris ou poser un doigt fait ce que fait un pincement, et la molette ou l’écartement de deux doigts fait ce que fait l’ouverture et la fermeture de la main. Le guide Comment explorer les présente côte à côte.

Une brève note historique

L’idée d’un corps qui pilote une image sans rien toucher est plus ancienne que les webcams. Videoplace de Myron Krueger, dans les années 1970 et 1980, utilisait des caméras pour intégrer la silhouette d’une personne dans une œuvre réactive. Cette histoire appartient au récit de l’art interactif, raconté dans Qu’est-ce que l’art interactif ?. Ce qui est nouveau, c’est le cadre. Détecter une main en détail exigeait autrefois du matériel spécial ; c’est désormais un fichier de modèle qu’une page web peut télécharger et exécuter dans un onglet.

Essaie

La meilleure façon de comprendre le processus est de le sentir répondre. Commence par l’un de ceux-ci, puis promène-toi :

• Ink : pince pour recueillir une goutte, relâche pour la laisser éclore.
• Helix : pointe pour enrouler un courant de lumière.
• Mirror : trace un trait et regarde-le se plier.
• Breathe : un monde plus lent, où un pincement ne fait que mettre la lumière en pause.
• Matter : la paume ouverte repousse un champ de particules et le poing l’attire.

Ou ouvre Explorer et choisis « Explorer avec les mains ». La caméra reste éteinte jusque-là.

FAQ

Dois-je installer quelque chose pour le suivi des mains dans le navigateur ? Non. Un navigateur moderne et une webcam suffisent. La page télécharge le modèle et l’exécute elle-même. Tu accordes seulement l’autorisation de la caméra.

Le suivi des mains par webcam est-il privé ? Le navigateur garantit qu’une page ne peut pas utiliser ta caméra sans autorisation. Que les images restent sur ton appareil dépend du site. Des modèles comme MediaPipe Hand Landmarker s’exécutent localement, donc aucun envoi n’est nécessaire. Consulte la page de confidentialité du site. Celle de Synfield indique que les images et les points de la main ne sont ni enregistrés ni envoyés.

Que sont les 21 points clés de la main ? Ce sont les points que le modèle de MediaPipe place sur chaque main détectée : un pour le poignet et quatre pour chaque doigt, de l’articulation de la base jusqu’au bout. Les gestes sont calculés à partir des distances et des angles entre eux.

Est-ce que ça marche sur un téléphone ? Souvent, oui, lorsque le navigateur mobile permet l’accès à la caméra et peut exécuter le modèle de vision dans la page. Les performances et le cadrage varient selon l’appareil, donc sur téléphone le tactile est généralement l’entrée la plus confortable.

Que faire si le suivi perd ma main ? Ajoute de la lumière devant toi, place-toi à environ une longueur de bras de la caméra et garde la paume tournée vers elle. Si ça coince encore, une souris ou un écran tactile offrent la même expérience.