MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

• By copying pixel data from a video, it’s possible with the canvas to dynamically manipulate a
video (without affecting the source, of course). This is a useful technique, even if it’s
processor-intensive; for this latter reason, though, it might not work well on low-power devices.
Here’s an example of frame-by-frame video manipulation, the technique for which is nicely outlined
in a Windows team blog post, Canvas Direct Pixel Manipulation. 53 In the VideoEdit example for this
chapter, default.html contains a video and canvas element in its main body:
In code (js/default.js), we call startVideo from within the activated handler. This function starts the
video and uses requestAnimationFrame to do the pixel manipulation for every video frame:
var video1, canvas1, ctx;
var colorOffset = { red: 0, green: 1, blue: 2, alpha: 3 };
function startVideo() {
video1 = document.getElementById("video1");
canvas1 = document.getElementById("canvas1");
ctx = canvas1.getContext("2d");
}
video1.play();
requestAnimationFrame(renderVideo);
function renderVideo() {
//Copy a frame from the video to the canvas
ctx.drawImage(video1, 0, 0, canvas1.width, canvas1.height);
//Retrieve that frame as pixel data
var imgData = ctx.getImageData(0, 0, canvas1.width, canvas1.height);
var pixels = imgData.data;
//Loop through the pixels, manipulate as needed
var r, g, b;
for (var i = 0; i < pixels.length; i += 4) {
r = pixels[i + colorOffset.red];
g = pixels[i + colorOffset.green];
b = pixels[i + colorOffset.blue];
}
//This creates a negative image
pixels[i + colorOffset.red] = 255 - r;
pixels[i + colorOffset.green] = 255 - g;
pixels[i + colorOffset.blue] = 255 - b;
//Copy the manipulated pixels to the canvas
ctx.putImageData(imgData, 0, 0);
53 See also http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/.
415