Pixelate video stream with HTML5

Question

I'm goofing around with some HTML5 stuff and wanted to combine the Close Pixelate library with the getUserMedia API . I want to pixelate the stream on the fly (i get the frame rate would be crazy low). Is this at all possible? I would like to just give Close Pixelate the video-object instead of the image.

This video by Rob Hawkes gave me the idea.

Solution: http://jsfiddle.net/N46QF/ (you need Google Chrome Canary with MediaStream activated in chrome://flags/ to get it to work)

Answer 1

Yes I think this is possible. However, in order to manipulate the frames of the video at a pixel level, you'll need to draw them onto a canvas first using an interval (see fiddle , tested in firefox and chrome).

Since the Close Pixelate library expects an image as input (which it immediately draws to a canvas anyway), you'll need to amend the code slightly so that you can pass in your canvas directly.

Whether the library will stand up to repeated instantiation on an interval or your frame rate will be acceptable I don't know but think it should be easy enough to test. I'll certainly be interested to see the results!

If it all works out it might be worth considering forking the Close Pixelate library and amending it to allow either an image or a canvas as the input since this would appear to be a useful extension.