Question

Is it possible to apply custom visual effects (such as grayscale) to the input stream of a tag in HTML5/Javascript? My goal is to be able to display a filtered webcam’s output to the user, but the user should be able to pick from a variety of filters, not just grayscale.

All help is greatly appreciated and I always accept an answer!

Answer 1

The way to do it is to grab each frame of a video element and process and then displaay it with canvas. Here’s an example I did recently for my book (warning: I know there are some issues with this example in IE9 currently), which used a greyscale filter from HTML5 Rocks. The main loop looks something like this, assume video is a reference to the element and context is a 2d canvas context, requestAnimFrame comes from Paul Irish:

function draw() {
    if(video.paused || video.ended) return false;
    context.clearRect(0,0,720,480);
    context.drawImage(video,0,0,720,480);
    context.putImageData(grayscale(context.getImageData(0,0,720,480)),0,0);
    requestAnimFrame(draw);
}

The getUserMedia() function that Alex W mentions is only currently available in Opera and Chrome, you can read some blog posts about it and see some demos here. Once you’ve got a media stream you can pipe it into a video element and do exactly the same thing as above.