three elements
* video
* temp canvas
* output canvas
every 33 milliseconds (30 frames per second) render a video snapshot to the temp canvas, fetch the canvaspixelarray of the temp canvas, perform some calculations on the RGB values of the 230400 pixels, render the changed canvaspixelarray to the output canvas.
why the two canvas-es? better performance.
any issues? yes, you need three different videos, one for google chrome (webm), one for apple (h264), one for firefox (ogv). that's why the effect look slightly different on each plattforms (different encoding == different pixels).
does not work on ipad safari, as the render video snapshot to canvas throws some strange errors and security exceptions, pain to debug.
three elements * video * temp canvas * output canvas
every 33 milliseconds (30 frames per second) render a video snapshot to the temp canvas, fetch the canvaspixelarray of the temp canvas, perform some calculations on the RGB values of the 230400 pixels, render the changed canvaspixelarray to the output canvas.
why the two canvas-es? better performance.
any issues? yes, you need three different videos, one for google chrome (webm), one for apple (h264), one for firefox (ogv). that's why the effect look slightly different on each plattforms (different encoding == different pixels).
does not work on ipad safari, as the render video snapshot to canvas throws some strange errors and security exceptions, pain to debug.
hope you like it.