Mozilla Developer site has a good introduction to Manipulating video using canvas
One of the powerful features of Canvas is that after an image is created …
var canvas = document.getElementById(“area”);
var context = canvas.getContext(“2d”);
var image = document.getElementById(“canvasSource”);
context.drawImage(image, 0, 0);
… it can be read …
… then the data changed pixel by pixel. This gives web pages the same type of image processing as desktop graphics programs have. The data is broken down in to four channels, Red, Green, Blue and alpha. A green screen effect or chroma-keying is done in Mozilla’s example using a video element as a source.
There are a few security restrictions on the getImageData function. The image or video must come from the same domain as page. It does not operate from a local html file on ones own computer it must be served by an http server. Therefore for development a http://localhost is needed.
HTML5doctor has several effects on their Video + canvas = magic first changing the colors to gray scale and second a emboss effect for video … with examples. The math used to create a gray scale is technically more accurate at spyrestudios.com … the luminance formula: red x 0.3 + green x 0.59 + blue x 0.11.