gistfile1.js

/**
/
/ Additional Gist for: https://github.com/m90/jquery-seeThru
/
/ Setup:
/ var video is the <video> element containing the source data
/ var buffer is a hidden <canvas> element of the same width and height as the same video
/ var display is the <canvas> element used for actual display (it has the same width as the other elements, but is halved in height)
/ var dimensions is an object containing the target .width and .height of the video
/
**/

function drawFrame(){

	buffer.clearRect(0, 0, dimensions.width, dimensions.height * 2); //clear buffer
	buffer.drawImage(video, 0, 0, dimensions.width, dimensions.height * 2); //draw video into buffer

	var image = buffer.getImageData(0, 0, dimensions.width, dimensions.height); //get RGB
	var alphaData = buffer.getImageData(0, dimensions.height, dimensions.width, dimensions.height).data; //get A

	for (var i = 3, len = image.data.length; i < len; i = i + 4) {
		image.data[i] = Math.floor((alphaData[i - 1] + alphaData[i - 2] + alphaData[i - 3]) / 3); //replace alpha information in `image` by the weighted B/W data
		//in case you are 100% sure your data is strict greyscale you can skip the weighting and just use `image.data[i] = alphaData[i-1]`, i.e. use the blue channel
	}

	display.putImageData(image, 0, 0, 0, 0, dimensions.width, dimensions.height); //draw frame

}

var refresh = setInterval(drawFrame, 1000/25); //running at 25 frames per second