The purpose of this recipe is to demonstrate how to perform pixel manipulations on videos in much the same way as we did with images. In this recipe, we'll invert the colors of a short video clip.
Note
WARNING: This recipe must be run on a web server due to security constraints with the getImageData()
method.
Follow these steps to invert the colors of a video:
Create a cross-browser method that requests an animation frame:
window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })();
Define the
drawFrame()
function that captures the current video frame, inverts the colors, draws the frame on the canvas, and then requests a new animation frame:function drawFrame(canvas, context, video){ ...