HTML5 video canvas example - rocha.la

html5videocanvas

/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * See working example at http://rocha.la/fun-with-pixels-html5-video-canvas
 * 
 */
var canvasVideo = function()
{
	var $ = jQuery,
		video = document.getElementById('canvasVideo'),
		canvas = document.getElementById('canvasVideoCvs'),
		backcvs = document.getElementById('canvasVideoBcvs'),
		ctx = canvas.getContext('2d'),
		bcv = backcvs.getContext('2d'),
		w = canvas.width,
		h = canvas.height;

	var SELECTED_MODE;

	video.addEventListener('play', function(){
		if (video.currentTime < 5)
		{
			video.currentTime = 20;
		}
		switch (SELECTED_MODE)
		{
			case "cvsbtnBW":
				drawBlackWhiteFrame();
				break;
			case "cvsbtnSephia":
				drawSephiaFrame();
				break;			
			case "cvsbtnInvert":
				drawInvertColors();
				break;			
			case "cvsbtnPixelate":
				drawPixelFrame(4);
				break;
			case "cvsbtnChannels":
				drawTwoChannels();
				break;
			default:
				drawFrame();
				break;
		}
	}, false);

	$('.cvsBtnType').click(function() { 
		SELECTED_MODE = $(this).attr("id");
		if (SELECTED_MODE != "canvasPause") { reloadMode(); }
	});
	$('#canvasPause').click(function(){
		video.pause();
	});
	$('.cvsBtnType').button();
	$('#canvasPause').button();

	function reloadMode()
	{
		video.pause();
		var wait = setTimeout(function(){ 
			video.play(); 
		}, 5);
	}

	function drawFrame() {
		bcv.drawImage(video, 0, 0, w, h);
		var apx = bcv.getImageData(0, 0, w, h);
		ctx.putImageData(apx, 0, 0);
		if (video.paused || video.ended) {
		  return;
		}
		setTimeout(function() {
			drawFrame();
		}, 0);
	}

	function drawInvertColors() {

		bcv.drawImage(video, 0, 0, w, h);
		var apx = bcv.getImageData(0, 0, w, h);
		var data = apx.data;
			
		// Loop through the pixels, turning them grayscale
		for(var i = 0; i < data.length; i+=4)
		{
			var r = data[i],
				g = data[i+1],
				b = data[i+2];
			data[i] = 255-r;
			data[i+1] = 255-g;
			data[i+2] = 255-b;
		}
		apx.data = data;
		ctx.putImageData(apx, 0, 0);

		if (video.paused || video.ended) {
		  return;
		}
		setTimeout(function() {
			drawInvertColors();
		}, 0);
	}

	function drawTwoChannels() {

		bcv.drawImage(video, 0, 0, w, h);
		var apx = bcv.getImageData(0, 0, w, h);
		var data = apx.data;
		
		
		
		// Loop through the pixels, turning them grayscale
		for(var i = 0; i < data.length; i+=4)
		{
			var r = data[i],
				g = data[i+1],
				b = data[i+2];
			data[i] = r;
			data[i+1] = g;
			data[i+2] = g;
		}
		apx.data = data;
		ctx.putImageData(apx, 0, 0);

		if (video.paused || video.ended) {
		  return;
		}
		setTimeout(function() {
			drawTwoChannels();
		}, 0);
	}

	function drawBlackWhiteFrame() {

		bcv.drawImage(video, 0, 0, w, h);
		var apx = bcv.getImageData(0, 0, w, h);
		var data = apx.data;

		for(var i = 0; i < data.length; i+=4)
		{
			var r = data[i],
				g = data[i+1],
				b = data[i+2],
				gray = (r+g+b)/3;
			data[i] = gray;
			data[i+1] = gray;
			data[i+2] = gray;
		}
		apx.data = data;
		ctx.putImageData(apx, 0, 0);

		if (video.paused || video.ended) {
		  return;
		}
		setTimeout(function() {
			drawBlackWhiteFrame();
		}, 0);
	}

	function drawSephiaFrame() {

		bcv.drawImage(video, 0, 0, w, h);
		var apx = bcv.getImageData(0, 0, w, h);
		var data = apx.data;

		for(var i = 0; i < data.length; i+=4)
		{
			var r = data[i],
				g = data[i+1],
				b = data[i+2];
			data[i] = (r * .393) + (g *.769) + (b * .189)
			data[i+1] = (r * .349) + (g *.686) + (b * .168)
			data[i+2] = (r * .272) + (g *.534) + (b * .131)
		}
		apx.data = data;
		ctx.putImageData(apx, 0, 0);

		if (video.paused || video.ended) {
		  return;
		}
		setTimeout(function() {
			drawSephiaFrame();
		}, 0);
	}

	function drawPixelFrame(blocksize) {
		bcv.drawImage(video, 0, 0, w, h);

		//apply pixalate algorithm
		for(var x = 1; x < w; x += blocksize)
		{
			for(var y = 1; y < h; y += blocksize)
			{
				var pixel = bcv.getImageData(x, y, 1, 1);
				ctx.fillStyle = "rgb("+pixel.data[0]+","+pixel.data[1]+","+pixel.data[2]+")";
				ctx.fillRect(x, y, x + blocksize - 1, y + blocksize - 1);
			}
		}

		if (video.paused || video.ended) {
		  return;
		}
		setTimeout(function () {
			drawPixelFrame(blocksize);
		}, 0);
	}
}

jQuery(function(){
	canvasVideo();
});

sorry for notice, but why you can't use "filter" css property with video element?