HTML5: Video-Manipulation mit Canvas

Videos mit Canvas modifizieren

Ein ImageData-Objekt enthält neben den Angaben width und height (die Maße des Ausschnitts) ein Array, das der Reihe nach alle Farbwerte aller Pixel enthält.

Der erste Eintrag im Array ist der Rot-Wert des ersten Pixels, der zweite Eintrag ist der Grün-Wert des ersten Pixels, an dritter Stelle folgt der Blau-Wert des ersten Pixels, dann kommt der Alpha-Wert des ersten Pixels und dann der Rot-Wert des zweiten Pixels … und so weiter. Diese Werte effektvoll zu manipulieren ist sehr einfach:

// Wendet den Effekt an

function effekt(bilddaten){

var pixel = bilddaten.data;

var i = 0;

var r, g, b, new_r, new_g, new_b;

while(i < pixel.length){

// R, G und B holen...

r = pixel[i],

g = pixel[i + 1],

b = pixel[i + 2];

// Manipulieren...

new_r = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189),

new_g = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168),

new_b = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);

// ... und speichern!

pixel[i] = new_r;

pixel[i + 1] = new_g;

pixel[i + 2] = new_b;

// Auf zum nächsten Pixel - den Alphawert einfach überspringen

i += 4;

}

return bilddaten;

}

Die Funktion arbeitet sich einmal durch das Bilddaten-Array, verändert die RGB-Werte der Pixel, überspringt den Alpha-Wert und gibt am Ende ein komplett überarbeitetes ImageData-Objekt zurück. Dieses muss man dann nur noch abbilden, d.h. die Funktion effekt() in copy() wird einmal auf die Bilddaten anwendet

// Diese Funktion kopiert Pixel von "film" in "zwischenablage", dann in "ziel"

function copy(){

zwischenablage.drawImage(film, 0, 0);

var bilddaten = zwischenablage.getImageData(0, 0, 320, 180);

bilddaten = effekt(bilddaten); // Effekt anwenden

ziel.putImageData(bilddaten, 0, 0);

}

Und so sieht ein Video aus, das in Canvas manipuliert wurde.

Fazit

Ein paar Pixel zu modifizieren ist in Canvas mit HTML 5 nicht besonders schwer. Wollte man wirklich Videodaten erst im Browser generieren, wäre das aber im Prinzip auch kein Hexenwerk: mit der createImageData()-Methode des 2D-Kontext (Spezifikationen) kann man leere Bilddatensätze erstellen und diese dann mit Farbwerten für die diversen Pixel befüllen.

Die Herausforderung liegt tatsächlich eher in der Codierung und Decodierung von Bilddaten, denn man will schließlich in Sachen Wiedergabe weder von dem löchrigen Codec-Support der Browser abhängig sein, noch möchte man darauf verzichten, bei Effektgeneratoren wie im Demo am Ende fertige Filme abzuspeichern. In diesem Bereich liegen die wahren Herausforderungen. Die Werkzeuge sind jedoch alle da. Nun sind die Entwickler dran. (mje)

Dieser Artikel basiert auf einem Beitrag unserer Schwesterpublikation Macwelt.