I'm going to Haiti, so this will be my last post for a while:  Bluescreen and other video editing.

One of the crucial parts of using HTML5 and open <video> is that we can grab the video frame and add visual effects.  One example of this is at http://media.chikuyonok.ru/ambilight/ - so if that doesn't work for you, download an updated Firefox, Google Chrome, or Safari browser.

The first thing we need to do is create an HTML video.  For security reasons, these projects only work if you have a video and a page coming over the web, from the same website. If you have Apache on your local computer (free install) or a web server of your own, great.  Otherwise, this is just a primer on how to do it:

Add the video and two <canvas> elements, hiding all but the output canvas:

<video id="player" src="myvideo.ogv" width="500" height="300" style="display:none">
</video>
<canvas id="framecopy" width="500" height="300" style="display:none;">
</canvas>
<canvas id="outframe" width="500" height="300">
</canvas>

Grab the video and canvases in JavaScript

video = document.getElementById("player");

canvas = document.getElementById("framecopy");

ctx = canvas.getContext("2d");

canvas2 = document.getElementById("outframe");

ctx2 = canvas2.getContext("2d");

Grab the video's frame and paste it onto the first canvas, then back into the program as frame

ctx.drawImage(video, 0, 0, 500, 300);

frame = ctx.getImageData(0, 0, 500, 300);

Go through each dot in the frame.  Each pixel has red, blue, green, and alpha values.  If a pixel is especially blue, we will set the alpha to zero, making that pixel transparent.  This is how a blue screen works.  Ready?

pixelCount = frame.data.length / 4;

for(var i=0; i < pixelCount; i++) {

    redVal = frame.data[ i * 4 ] ;

   greenVal = frame.data[ i * 4 + 1];

   blueVal = frame.data[ i * 4 + 2];

   alphaVal = frame.data[ i * 4 + 3];

   if(blueVal > 220 && greenVal < 30 && redVal < 30){

            frame.data[ i * 4 + 3 ] = 0;

   }

}

Now we paste the altered frame into canvas2, revealing it to the user:

ctx2.putImageData(frame, 0, 0);

If you wanted to create an image out of your edited frame, to save or to paste onto the page, to review motion frame-by-frame or to do further editing, you would use this code:

newImg = document.createElement("img");

newImg.src = canvas2.toDataURL();

newImg.style.height = "300px";

newImg.style.width = "500px";

document.body.appendChild(newImg);