Wie Hand-Tracking im Browser funktioniert: ein Leitfaden

Du kannst es gleich ausprobieren. Öffne Ink, schalte die Kamera ein und zeige mit dem Zeigefinger, um einen Farbfaden zu zeichnen. Führe Daumen und Zeigefinger zusammen, um einen Tropfen zu sammeln, und öffne sie dann, damit er im Wasser aufblüht.

Dieser Leitfaden folgt dieser Pipeline Schritt für Schritt. Er zeigt, was die Kameraerlaubnis tatsächlich gewährt, was ein Modell wie MediaPipe Hand Landmarker zurückgibt, wie ein paar Dutzend Zahlen zu einer Geste werden, was auf deinem Gerät bleibt und wo die Technik noch an Grenzen stößt. Wenn dich die größere Frage interessiert, was Kunst interaktiv oder generativ macht, findest du sie in Interaktive generative Kunst, erklärt. Hier geht es um den Mechanismus.

So funktioniert es, in fünf Schritten

Die Seite fragt nach der Kamera. Der Browser zeigt eine Berechtigungsabfrage, und nichts wird aufgenommen, bevor du zustimmst.
Einzelbilder gehen an ein Modell. Jedes Videobild wird an ein Bildverarbeitungsmodell übergeben, das innerhalb der Seite läuft.
Das Modell gibt Landmarken zurück. Für jede gefundene Hand liefert es 21 Punkte: das Handgelenk sowie die Gelenke und Spitzen der Finger.
Code leitet Gesten ab. Abstände, Winkel und Geschwindigkeiten zwischen diesen Punkten werden zu Zuständen wie Zeigen, Pinch, offener Handfläche oder Faust.
Gesten werden zu Parametern. Diese Zustände werden auf ein visuelles oder klangliches System abgebildet, etwa auf eine Position, eine Kraft oder eine Farbe.

Der Rest dieses Leitfadens geht die Schritte nacheinander durch.

Schritt 1: Nach der Kamera fragen

Eine Webseite kann standardmäßig nicht durch deine Webcam sehen. Um Video zu bekommen, ruft sie eine Browserfunktion namens getUserMedia() auf, die zur vom W3C veröffentlichten Spezifikation Media Capture and Streams gehört. Die MDN-Referenz zu getUserMedia beschreibt, was dann passiert. Der Browser bittet die Person um Erlaubnis, und nur wenn sie erteilt wird, erhält die Seite einen MediaStream, einen Live-Strom von Einzelbildern. Lehnt die Person ab oder gibt es keine Kamera, schlägt die Anfrage fehl und die Seite erhält nichts.

Einige Details dieses Schritts sind für den Datenschutz und für das Erlebnis wichtig:

Die Anfrage ist konkret. Eine Seite kann nur Video, nur Audio oder beides anfordern und angeben, welche Kamera sie bevorzugt (zum Beispiel die, die auf die Person gerichtet ist). Eine Hand-Tracking-Seite hat keinen Grund, nach dem Mikrofon zu fragen.
Sie braucht einen sicheren Kontext. Laut MDN ist getUserMedia() nur auf Seiten verfügbar, die über HTTPS (oder von einer lokalen Entwicklungsadresse) ausgeliefert werden. Eine gewöhnliche unsichere Seite kann die Kamera überhaupt nicht anfordern.
Der Browser behält die Kontrolle. Browser zeigen eine Anzeige, solange die Kamera aktiv ist, und du kannst die Erlaubnis jederzeit in den Website-Einstellungen widerrufen. Die Regeln dafür sind in der W3C-Spezifikation Media Capture and Streams festgelegt.

Achte darauf, was dieser Schritt nicht bedeutet. Kamerazugriff zu erlauben heißt nicht, dass das Video auf dem Bildschirm gezeigt, aufgezeichnet oder irgendwohin gesendet wird. Die Seite erhält einfach Einzelbilder im Speicher. Was sie damit macht, ist eine andere Frage, auf die der Abschnitt zum Datenschutz weiter unten zurückkommt.

Schritt 2: Von Einzelbildern zum Modell

Sobald der Strom läuft, liest die Seite Einzelbilder daraus, meist indem sie den Strom an ein verstecktes <video>-Element hängt und es bei jedem Animationsframe abtastet. Jedes abgetastete Bild ist ein Raster aus Pixeln und wird an ein Modell übergeben.

Das im Web am häufigsten genutzte Modell für diese Aufgabe ist MediaPipe Hand Landmarker aus Googles MediaPipe-Projekt. Die Dokumentation beschreibt eine Aufgabe, die „mit einem Machine-Learning-Modell (ML) auf Bilddaten arbeitet, als statische Daten oder als kontinuierlicher Strom“. Es gibt Anleitungen für Android, Python und das Web. Im Web lädt die Seite die Modelldatei herunter, und die Berechnung läuft im Browser über eine WebAssembly-Laufzeit, optional mit GPU-Beschleunigung.

Die Aufgabe hat drei Ausführungsmodi. IMAGE verarbeitet einzelne Bilder und VIDEO dekodierte Videodateien. LIVE_STREAM ist der Modus für eine Webcam; darin kommen die Ergebnisse über einen Listener, während die Bilder verarbeitet werden. Mehrere Einstellungen steuern das Verhalten. num_hands legt fest, nach wie vielen Händen gesucht wird, standardmäßig 1. Drei Konfidenzschwellen (Erkennung, Präsenz und Tracking, jeweils standardmäßig 0,5) bestimmen, wie sicher sich das Modell sein muss, bevor es eine Hand meldet oder ihr weiter folgt.

Zwei Modelle erledigen die Arbeit, zusammen in einem Bundle verpackt. Laut Googles Dokumentation:

Ein Modell zur Handflächenerkennung sucht im ganzen Bild nach etwas, das wie eine Hand aussieht.
Ein Modell zur Erkennung von Handlandmarken sieht sich diesen Bereich dann genau an und setzt die Punkte.

Diese Aufteilung ist der Grund, warum das Tracking leichtgewichtig bleiben kann. Im Video- und Live-Stream-Modus kann das Landmarkenmodell eine einmal gefundene Hand von Bild zu Bild verfolgen. Die aufwendigere Handflächenerkennung muss erst wieder laufen, wenn der Tracker nicht mehr sicher ist, dass eine Hand vorhanden ist.

Schritt 3: Einundzwanzig Landmarken

Das entscheidende Ergebnis ist die Menge der Landmarken. MediaPipes Handmodell liefert 21 Punkte pro Hand, die Googles Dokumentation „21 Koordinaten der Handknöchel“ nennt:

1 Punkt für das Handgelenk
4 Punkte für jeden der fünf Finger: das Grundgelenk, zwei Mittelgelenke und die Spitze

Jeder Punkt liegt in zwei Formen vor. Bildkoordinaten sind x und y, normiert auf Breite und Höhe des Bildes, dazu ein relativer Tiefenwert. Weltkoordinaten sind grobe 3D-Positionen in Metern mit dem Ursprung im ungefähren geometrischen Mittelpunkt der Hand. Außerdem meldet das Modell die Händigkeit, eine Schätzung, ob es sich um eine linke oder rechte Hand handelt.

Es hilft, sich das Ergebnis als kleines Skelett aus Punkten vorzustellen, das viele Male pro Sekunde über einem Video neu gezeichnet wird, das die Seite dir nie zeigen muss. Dieses Skelett ist das Einzige, womit der Rest des Systems arbeitet. Ab hier hat der Code nicht mehr mit dem Bild einer Hand zu tun, sondern mit 21 Punkten und ihrer Bewegung.

Laut Dokumentation wurde das Modell mit etwa 30.000 realen Bildern trainiert, dazu mit synthetischen Handmodellen vor verschiedenen Hintergründen. Das erklärt zum Teil, warum es mit vielen Hauttönen, Räumen und Lichtverhältnissen zurechtkommt, und auch, warum ungewöhnliche Winkel es noch täuschen können.

Schritt 4: Von Punkten zu Gesten

Einundzwanzig bewegte Punkte sind noch keine Geste. Sie in etwas zu verwandeln, das ein Mensch absichtlich ausführen und wiederholen kann, ist das Handwerk von Hand-Tracking-Interfaces. Das Modell entscheidet nicht, dass du einen Pinch machst. Das entscheidet der Code der Anwendung, anhand der Geometrie.

Einige gängige Ableitungen:

Zeigen und Position. Die Spitze des Zeigefingers (oder die Mitte der Handfläche) wird zum Cursor. Ihre x- und y-Werte werden auf den Bildschirm abgebildet, meist gespiegelt, damit der Cursor sich nach rechts bewegt, wenn du die Hand nach rechts bewegst, wie in einem Spiegel.
Pinch. Gemessen wird der Abstand zwischen Daumen- und Zeigefingerspitze. Fällt er unter eine Schwelle, die relativ zur Handgröße ist, damit es nah und fern der Kamera funktioniert, beginnt ein Pinch. Steigt er über eine etwas größere Schwelle, endet er. Der Abstand zwischen den beiden Schwellen verhindert, dass der Zustand flackert.
Offene Handfläche und Faust. Wie weit die Fingerspitzen vom Handgelenk oder der Handflächenmitte entfernt sind, verglichen mit ihren Gelenken, zeigt, ob die Finger gestreckt oder gebeugt sind. Über die Finger gemittelt ergibt das einen stufenlosen Wert zwischen offen und geschlossen, nicht nur ein Ja oder Nein.
Geschwindigkeit und Richtung. Der Vergleich der Position eines Punktes über mehrere Bilder ergibt die Geschwindigkeit, sodass sich ein schnelles horizontales Wischen von einem langsamen Driften unterscheiden lässt.

Zwei praktische Probleme tauchen sofort auf. Das erste ist Zittern: Landmarken wackeln leicht, selbst wenn deine Hand ruhig ist, deshalb glätten die meisten Anwendungen sie über einige Bilder und nehmen eine kleine Verzögerung für eine ruhige Bewegung in Kauf. Synfield macht das mit einem One-Euro-Filter auf dem verfolgten Punkt, einem geschwindigkeitsadaptiven Tiefpass, der ruhige Hände ruhig hält, ohne dass schnelle Bewegungen zäh wirken. Das zweite ist die Reichweite: Der Bereich, den deine Hand bequem abdecken kann, ist kleiner als das Sichtfeld der Kamera, deshalb lässt Synfield dich die Ränder dieses Bereichs kalibrieren und speichert sie lokal als Einstellung „Handbereich“ (gestureos.calibration.v1 auf der Datenschutzseite).

Schritt 5: Von Gesten zu einem lebendigen System

Im letzten Schritt hört Hand-Tracking auf, eine Technikdemo zu sein, und wird zu einem Erlebnis. Die Gestenzustände werden auf Parameter dessen abgebildet, was die Seite gerade ausführt, etwa ein Partikelfeld, eine Flüssigkeit, einen Klang oder eine Reihe von Spiegelungen.

Die Abbildung ist eine Designentscheidung, und dasselbe kleine Gestenvokabular kann sehr Unterschiedliches bedeuten. In den Welten von Synfield zum Beispiel:

In Helix windet Zeigen einen Lichtstrom auf, ein gehaltener Pinch zieht ihn heran und bricht ihn in Gischt, und Loslassen lässt wieder eine Lichtwelle entstehen. Die Hand zu öffnen oder zu schließen breitet die Welle aus oder rollt ihren Kamm ein.
In Mirror zeichnet dein Zeigefinger einen Strich, der um ein Zentrum gespiegelt wird. Ein gehaltener Pinch verschiebt dieses Zentrum, und eine offene Handfläche oder eine Faust fügt Faltungen hinzu oder entfernt sie.
In Breathe steuert die Hand kaum etwas. Ein Pinch pausiert das atmende Licht, Loslassen lässt es weiterlaufen, und die Hand zu öffnen oder zu schließen weitet oder dämpft es.

Die Pipeline ist in allen drei identisch. Nur die Abbildung ändert sich. Das ist die nützliche Lehre für alle, die mit Hand-Tracking bauen: Das Modell gibt dir jedes Mal dieselben 21 Punkte, und der Charakter des Werks hängt davon ab, was du diese Punkte bedeuten lässt. Wie solche Abbildungen allgemein in generative Systeme passen, beschreibt der Kameraabschnitt von Interaktive generative Kunst, erklärt.

Ist Hand-Tracking im Browser privat?

Es kann privat sein, aber das hängt davon ab, wie eine bestimmte Website gebaut ist. Die Technik selbst garantiert es nicht. Man sollte genau unterscheiden, was der Browser festlegt und was die Website entscheidet.

Was der Browser garantiert. Nach der Media-Capture-Spezifikation und der von MDN beschriebenen Browserpraxis kann eine Seite die Kamera nicht ohne deine Erlaubnis lesen, muss sicher ausgeliefert werden, um danach zu fragen, und zeigt eine Anzeige, solange die Kamera benutzt wird. Du kannst die Erlaubnis jederzeit zurückziehen.

Was von der Website abhängt. Sobald eine Seite Einzelbilder hat, kann ihr Code alles damit tun. Dazu gehört, sie lokal zu verarbeiten, auf dem Bildschirm anzuzeigen, aufzuzeichnen oder auf einen Server hochzuladen. MediaPipe Hand Landmarker ist dafür gemacht, auf dem Gerät im Browser zu laufen, sodass eine Website, die es nutzt, kein Video irgendwohin senden muss, um deine Hand zu verfolgen. Ob sie es trotzdem tut, entscheidet die Website. Der ehrliche Test ist daher, ihre Datenschutzseite zu lesen und, wenn möglich, ihre Netzwerkaktivität zu beobachten.

Was Synfield nach eigener Aussage tut. Die Datenschutzseite von Synfield beschreibt die Website, wie sie heute gebaut ist:

Die Kamera ist aus, wenn eine Welt geöffnet wird. Sie startet nur, wenn du „Mit den Händen erkunden“ wählst oder sie später über die Kamerasteuerung oder die Taste C einschaltest.
Angefordert wird Video der auf dich gerichteten Kamera, ohne Mikrofon, und das Bild wird auf der Seite nicht angezeigt.
Die Einzelbilder werden in der Seite gelesen und an eine Bildverarbeitungsaufgabe übergeben, die ebenfalls im Browser läuft. Sie sucht nach einer Hand und gibt Punkte zurück. Das Modell ist eine Datei auf der Website selbst und wird erst heruntergeladen, nachdem die Kamera gestartet ist.
Der Code der Website zeichnet das Video nicht auf, lädt weder die Einzelbilder noch die Handpunkte hoch und legt kein Konto an.
Der anonyme Besuchszähler erfasst nur grobe Angaben, etwa ob Maus, Touch oder Hände verwendet wurden und wann die Kamera eingeschaltet wurde. Nichts aus dem Kamerabild oder den Handpunkten ist enthalten.

Diese Aussagen entsprechen dem ausgelieferten Code: Synfield lädt MediaPipe Hand Landmarker (@mediapipe/tasks-vision) mit der eigenen Modelldatei hand_landmarker.task, setzt numHands auf 1 und versucht zuerst einen GPU-Delegate mit CPU-Fallback.

„Hände“ auf der Infoseite einer Welt zu wählen, zeigt nur eine Anleitung und schaltet die Kamera nie ein. Die Kamera startet nur innerhalb einer Welt, und nur wenn du es willst.

Die Technik, kurz erklärt

Du musst die Werkzeuge nicht kennen, um ein Werk mit Hand-Tracking zu genießen, aber es hilft zu wissen, was die Namen bedeuten.

getUserMedia / Media Capture and Streams. Das ist der Browserstandard für den Zugriff auf Kamera und Mikrofon. Jedes webcambasierte Erlebnis im Web beginnt hier. (MDN, W3C)
MediaPipe Hand Landmarker. Googles aktuelle Aufgabe für Handlandmarken, mit einem Webpaket, das ein Modell-Bundle lädt und in der Seite ausführt. Es liefert Landmarken, Welt-Landmarken und Händigkeit. (Google-AI-Edge-Dokumentation)
TensorFlow.js und frühere Handmodelle. Vor der aktuellen MediaPipe-Tasks-API wurde Hand-Tracking im Browser häufig mit TensorFlow.js-Modellen wie Handpose und mit der älteren Lösung „MediaPipe Hands“ umgesetzt. Viele Tutorials verwenden noch diese Namen; wenn du ihnen begegnest, beschreiben sie eine frühere Generation derselben Idee.
Eine Rendering-Ebene. Die Landmarken steuern dann, was das Bild zeichnet, meist WebGL oder Canvas. Dieser Teil ist gewöhnliche Grafikprogrammierung, und hier fallen die meisten künstlerischen Entscheidungen.

Grenzen, und warum Maus und Touch weiter wichtig sind

Hand-Tracking im Browser funktioniert gut genug, um damit Kunst zu machen. Es funktioniert nicht überall, und es ist nicht für alle die beste Eingabe. Die üblichen Grenzen:

Licht. Das Modell sieht Pixel. Ein dunkler Raum, starkes Licht hinter dir oder eine Hand im Schatten senken seine Konfidenz, und es kann die Hand verlieren.
Abstand und Bildausschnitt. Zu nah, und Teile der Hand verlassen das Bild. Zu weit weg, und die Hand ist nur ein paar Pixel breit. Eine Armlänge vor der Kamera eines Laptops ist meist angenehm.
Verdeckung. Wenn sich Finger überlappen oder die Hand seitlich zur Kamera steht, muss das Modell raten, wo verdeckte Gelenke sind, und Gesten wie ein Pinch werden unzuverlässiger.
Zwei Hände und andere Menschen. Mehr Hände bedeuten mehr Mehrdeutigkeit und mehr Rechenaufwand. Viele Erlebnisse verfolgen deshalb nur eine Hand.
Geräte. Inferenz braucht Rechenleistung. Aktuelle Laptops schaffen das problemlos. Ältere oder stromsparende Geräte verfolgen eventuell mit geringerer Rate oder werden spürbar warm, und mobile Browser verhalten sich unterschiedlich. Synfield veröffentlicht keine geschlossene Liste unterstützter Geräte: Der Handmodus braucht einen sicheren Kontext, getUserMedia und einen Browser, der das Vision-WASM ausführen kann (mit GPU, wenn verfügbar). Aktuelle Desktop-Browser sind der bequeme Weg; auf Smartphones kann dieselbe Technik funktionieren, aber Bildausschnitt und Wärme schwanken, daher ist Touch meist einfacher.
Körper. Nicht alle können einen Arm lange hochhalten, und nicht alle wollen vor der Kamera sein. Eine Interaktion, die nur mit den Händen funktioniert, schließt Menschen aus.

Aus diesem letzten Grund behandeln die sorgfältigsten Hand-Tracking-Werke die Kamera als einen Zugang unter mehreren. In Synfield lässt sich jede Welt auch mit Maus oder Touchscreen erkunden, und die Gesten haben direkte Entsprechungen. Die Maustaste gedrückt zu halten oder einen Finger aufzulegen, wirkt wie ein Pinch, und das Mausrad oder das Spreizen zweier Finger wirkt wie das Öffnen und Schließen der Hand. Der Leitfaden „So erkundest du“ stellt sie nebeneinander.

Eine kurze Anmerkung zur Geschichte

Die Idee, dass ein Körper ein Bild steuert, ohne etwas zu berühren, ist älter als Webcams. Myron Kruegers Videoplace aus den 1970er- und 1980er-Jahren nutzte Kameras, um die Silhouette eines Menschen in ein reagierendes Kunstwerk zu bringen. Diese Geschichte gehört zur Geschichte der interaktiven Kunst, erzählt in Was ist interaktive Kunst?. Neu ist der Rahmen. Eine Hand detailliert zu erkennen, erforderte früher spezielle Hardware, heute ist es eine Modelldatei, die eine Webseite herunterladen und in einem Tab ausführen kann.

Probier es aus

Am besten verstehst du die Pipeline, wenn du spürst, wie sie reagiert. Fang mit einer dieser Welten an und streife dann weiter:

Ink: Pinch, um einen Tropfen zu sammeln, loslassen, damit er aufblüht.
Helix: Zeige, um einen Lichtstrom aufzuwinden.
Mirror: Zeichne einen Strich und sieh zu, wie er sich faltet.
Breathe: eine langsamere Welt, in der ein Pinch das Licht nur pausiert.
Matter: Eine offene Handfläche stößt ein Partikelfeld ab, eine Faust zieht es an.

Oder öffne Erkunden und wähle „Mit den Händen erkunden“. Bis dahin bleibt die Kamera aus.

FAQ

Muss ich für Hand-Tracking im Browser etwas installieren? Nein. Ein moderner Browser und eine Webcam reichen. Die Seite lädt das Modell herunter und führt es selbst aus. Du erteilst nur die Kameraerlaubnis.

Ist Webcam-Hand-Tracking privat? Der Browser garantiert, dass eine Seite deine Kamera nicht ohne Erlaubnis nutzen kann. Ob die Einzelbilder auf deinem Gerät bleiben, hängt von der Website ab. Modelle wie MediaPipe Hand Landmarker laufen lokal, ein Hochladen ist also nicht nötig. Sieh dir die Datenschutzseite der Website an. Die von Synfield sagt, dass Einzelbilder und Handpunkte weder aufgezeichnet noch hochgeladen werden.

Was sind die 21 Handlandmarken? Das sind die Punkte, die MediaPipes Modell auf jede erkannte Hand setzt: einer für das Handgelenk und vier für jeden Finger, vom Grundgelenk bis zur Spitze. Gesten werden aus den Abständen und Winkeln zwischen ihnen berechnet.

Funktioniert es auf dem Smartphone? Oft ja, wenn der mobile Browser Kamerazugriff unterstützt und das Vision-Modell in der Seite ausführen kann. Leistung und Bildausschnitt hängen vom Gerät ab, daher ist Touch auf dem Smartphone meist der bequemere Zugang.

Was kann ich tun, wenn das Tracking meine Hand verliert? Sorge für mehr Licht vor dir, geh etwa eine Armlänge von der Kamera weg und halte die Handfläche zur Kamera. Wenn es weiter hakt, bieten Maus oder Touchscreen dasselbe Erlebnis.