Dynamic Content Injection with HTML5 Video
Paul Rouget has been pushing Canvas video in new and exciting ways with his dynamic content injection demo. Using the drawImage method provided by the canvas element, he has injected the content of a DOM element in to the canvas. This injection works with three kinds of elements: images, canvas and video.
Paul explains how the demo works:
First, the content of the video is injected in the main canvas. That’s why the canvas element looks like a video element. Second, the position of the 2 brighter areas of the canvas are computed (you have access to all pixels values). Third, the required transformation is computed (rotation, scale, translation). Fourth, the content of the selected pattern is injected in the main canvas following the transformation.
Currently, the demo only works on Firefox 3.1 beta or higher.
Check out the dynamic content injection demo, or read more about the demo
Related demos