!!! Listings zum Artikel "Kanalarbeit" von
!!! Johannes Heck, Luigi Lo Iacono, Tien Sang Ta
!!! in iX 7/2012, S. 132

!!! Listing 1: Mehrere Quellen durch source


<video poster="movie.jpg" controls>
  <source src='movie.webm'
          type='video/webm; codecs="vp8.0, vorbis"'/>
  <source src='movie.mp4'
          type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
  <p>
    Hier kommt der Fallback-Code hin
    (z.B. Fehlermeldung, Flash-Video)
  </p>
</video>

!!! Listing 2: Setzen des Context 

function init() {
  // Referenz auf video-Element
  var video = document.getElementById("video");
  
  // Referenz auf canvas-Element
  var canvas = document.getElementById("canvas");
  
  // Referenz auf context-Element
  var context = canvas.getContext("2d");
  
  // EventListener auf Video-Element
  // Wenn das Video abgespielt wird,
  // wird die Groesse des Canvas angepasst
  // und ueber die draw()-Funktion dessen
  // Inhalt generiert
  video.addEventListener("play", function() {
    canvas.height = video.clientHeight;
	  canvas.width = video.clientWidth;
    draw(video, canvas, context);
  }, false);
}

!!! Listing 3: Funktion draw()


function draw(video, canvas, context) {
    // tu nichts, falls das Video pausiert
    if(video.paused || video.ended) return false;
    
    // schreibe den aktuellen Video-Frame in den Context
    context.drawImage(video,0,0);
    
    // manipuliere das Bild wie gewuenscht
    // hier: Mosaik-Effekt
    mosaic(canvas, context);
    
    // draw()-Funktion nach 17ms wieder aufrufen
    setTimeout(function() { draw(video, canvas, context) }, 17);
}

!!! Listing 4: Funktion mosaic()

function mosaic(canvas, context) {
  var pixels = context.getImageData(0, 0, canvas.width, canvas.height);
  var output = context.createImageData(canvas.width, canvas.height);
  var inputData = pixels.data;
  var outputData = output.data;
  var w = pixels.width;
  var h = pixels.height;
	
  // Groesse der Bloecke
  var k = 11;

  // Kantenlaenge der quadratischen Region
  var length = Math.floor(k/2);

  // Im Ausgangsbild Alphakanal korrekt setzen
  for(var i = 1; i <= outputData.length; i++)
    if(i % 4 == 0) outputData[i-1] = 255;
		
	// Schleifen laufen Bild in Bereichen ab.
    for (var y = length; y < h-length; y += length) {
      for (var x = length; x < w-length; x += length) {
        for(var c = 0; c < 3; c++) {
		  // Koordinaten im eindimensionalen Array errechnen 
          var i = (y*w + x) * 4 + c;
          var sum = 0;
		  // Durchschnitt aus Bereichsregion  ermitteln
          for(var a = -length; a <= length; a++) {
            for(var b = -length; b <= length; b++) {
              sum += inputData[i + b*w*4 + a*4];
            }
          }
          sum /= (k*k);
		  // Durchschnittswert  in die Ausgangspixel schreiben
          for(var a = -length; a <= length; a++) {
            for(var b = -length; b <= length; b++) {
              outputData[i + b*w*4 + a*4] = sum;
            }
          }
        }
      }
    }
    context.putImageData(output, 0, 0);
}