Der Entwickler Tim Taubert zeigte im Oktober 2012, wie sich Kamerabilder mit getUserMedia und MediaStreams im Browser verarbeiten lassen. Ein Videoelement nimmt den Stream entgegen, während ein Canvas die einzelnen Bilddaten liest und verändert.
Die erste Demo ersetzt grüne Pixel durch Transparenz. Dafür prüft der JavaScript-Code die Farbwerte jedes Frames, wandelt sie in den HSL-Farbraum um und setzt den Alpha-Kanal erkannter Pixel auf null. WebRTC bildet heute eine wichtige Grundlage für Echtzeitkommunikation im Browser, die damalige Demo zeigt einen deutlich kleineren, aber anschaulichen Anwendungsfall.
Vom Kamerabild zur Spielfläche
Für die Verarbeitung genügt eine Kombination aus einem Videoelement und einem Canvas. Der Browser ruft getUserMedia mit aktivierter Videospur auf, startet die Wiedergabe und verwendet requestAnimationFrame, um den nächsten Frame vor dem Bildschirm-Refresh zu bearbeiten. So entsteht eine einfache Pipeline für interaktive Kameraeffekte, ohne dass die Bilddaten zuerst auf einen Server übertragen werden müssen.
In der zweiten Demo wird der Ansatz zu einem EyeToy-artigen Minispiel erweitert. Bereits freigelegte Pixel werden in einer Tabelle gespeichert. Wird ein grüner Bereich erneut erkannt, bleibt er transparent, anstatt jedes Mal komplett neu bewertet zu werden.
Kleine Demo mit klarer Entwicklungslektion
Taubert bezeichnete das Ergebnis selbst eher als kleine Demo denn als fertiges Spiel. Genau darin liegt der Wert für die Entwicklung: Die Beispiele trennen Kamerazugriff, Frame-Verarbeitung, Pixelmanipulation und Spielzustand in überschaubare Schritte. Daraus lässt sich eine Grundlage für Browserexperimente mit Bewegungserkennung, interaktiven Installationen oder prototypischen Spielemechaniken ableiten.
Die beiden Originalbeiträge enthalten neben dem Code auch die EyeToy-Demo und die grüne Bildschirmdemo. Die Beispiele stammen aus einer Zeit, in der getUserMedia noch nicht in allen Browsern standardmäßig freigeschaltet war. Für heutige Projekte müssen die aktuellen Browser-APIs und Berechtigungsmodelle verwendet werden.