Posts Tagged ‘example’

Dynamic Content Injection with HTML5 Canvas and Video

April 24th, 2009

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.



Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10

Here are key things that occur during the main loop:

  • 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,
  • fourth, the content of the selected pattern is injected in the main canvas
    following the transformation.

A little drawing:



admin Tips and Tutorials , ,

Panda3D video cube example

March 27th, 2009

One of the major drawbacks of the Blender game engine is that it doesn’t support video textures. There is something under development but it is still in its early stages.

Panda3D on the other hand has solid support for video textures. Getting it to work is really easy:

import direct.directbase.DirectStart

#load movie texture from disk
tex = loader.loadTexture("trailer.avi")
#load 3D cube model (.egg file) from disk
cube = loader.loadModel("videotexttest")
#put the cube in the scenegraph
#set the cube's position
#apply the texture
#rotate the cube
#scale the cube

#run the program

The cube was created with Blender and then exporter with Chicken, a blender to .egg exporter.

admin Designing , ,

eXTReMe Tracker