Wednesday, April 22nd, 2009

Dynamic Content Injection with HTML5 Canvas and Video

Category: Canvas, Examples, Firefox, Video

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:


Check out the demo in a bleeding edge Firefox browser, or watch the video:

Crazy cool stuff :)

Posted by Dion Almaer at 8:50 am

3.7 rating from 66 votes


Comments feed TrackBack URI

“Crazy cool stuff :)”
You can say that again! That was pretty mind blowing. Can’t wait to see what people will do with this.

Comment by iliad — April 22, 2009

I’m astonished by a) how seamless this is and b) how accurately the center of the screens is calculated (consistently). Also the fact that it’s done in vanilla HTML/JS.

Comment by tj111 — April 22, 2009

I’m imagining a canvas/SVG equivalent of FLARToolkit, something that can serve as an alternative to proprietary solutions for web-based augmented reality.

Comment by raynevandunem — April 22, 2009

This is the only use of video element so far.

All of the examples I’ve seen, without any exceptions were: let’s use a video tag, hide it, and use a canvas instead while transforming the image (motion detection, etc).

Maybe, just maybe: wouldn’t it be easier to get a flash video player client which supports overlays and screengrabbing? HTML overlays are already supported in a lot of them. For screengrabbing, I don’t know if it’s possible with flash’s video API, possibly not.

Or maybe we should just define video as a subelement of canvas, as it’s the only way we use it.

Comment by Aadaam — April 23, 2009

Crazy cool indeed!

Maybe in a year, we’ll see video player frameworks that will be able to replace their Flash counterparts.

Comment by hdragomir — April 30, 2009

Leave a comment

You must be logged in to post a comment.