Web Programming: Crazy stuff with HTML 5, Neat!!

Dynamic Content Injection with HTML5 Canvas and 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
<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
<video/>.

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

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,
    translation);
  • 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🙂

Related infos:

Demo Support Technology
Two videos playing in sync ie: nonefirefox: liveopera: livesafari: livechrome: live video
Interactive canvas gradients ie: nonefirefox: liveopera: livesafari: livechrome: live canvas
Canvas & Video ie: nonefirefox: liveopera: livesafari: livechrome: live video canvas
Video ie: nonefirefox: liveopera: livesafari: livechrome: live video
Canvas ie: nonefirefox: liveopera: livesafari: livechrome: live canvas
Content Editable ie: livefirefox: liveopera: livesafari: livechrome: live contenteditable storage
Geolocation Works on Safari Mobile too ie: nonefirefox: liveopera: nonesafari: nonechrome: nightly geolocation
postMessage same domain ie: livefirefox: liveopera: livesafari: livechrome: live postMessage
postMessage cross domain ie: livefirefox: liveopera: livesafari: livechrome: live postMessage
drag and drop ie: livefirefox: liveopera: nonesafari: livechrome: live dnd
drag anything ie: livefirefox: liveopera: nonesafari: livechrome: live dnd
offline detection Works on Safari Mobile too ie: nonefirefox: liveopera: livesafari: nonechrome: none offline events
navigator.onLine tests Doesn’t use events, only polls ie: livefirefox: liveopera: livesafari: nonechrome: none offline
on/offline event tests ie: nonefirefox: liveopera: livesafari: nonechrome: none offline events
offline application using the manifest FF 3.6 is still buggy – doesn’t request manifest after initial load ie: nonefirefox: liveopera: nonesafari: livechrome: live offline manifest
Storage ie: livefirefox: liveopera: livesafari: livechrome: live storage
Web SQL Database Storage ie: nonefirefox: noneopera: livesafari: livechrome: live sql-database
Web SQL Database – rollback test ie: nonefirefox: noneopera: livesafari: livechrome: live sql-database
Web Workers watch out – uses a lot of CPU!example without – will hang your browser ie: nonefirefox: liveopera: nonesafari: livechrome: live workers

All content, code, video and audio is Creative Commons Share Alike 2.0

source: html5demos.com

  1. Canvas: Drawing Board (Tested in FF 3.01+, Safari 4.0b, Opera 9.62, Chrome 2.0)
  2. Canvas: 1st-Person Gifter (Tested in FF 3.01+, Safari 4.0b, Opera 9.62, Chrome 2.0)
  3. Canvas: Bespin (Tested in FF 3.01+, Safari 4.0b, Chrome 2.0)
  4. Video: Basic Player (Tested in FF 3.5b4+, Opera 9.62 [w/out CSS rotate])
  5. Video: YouTube (Tested in Safari 4.0b; pls wait while page loads)
  6. Geolocation: Google Maps (Tested in FF 3.5b4+)
  7. Geolocation: Google Latitude (Tested in iPhone 3.0)
  8. DB and App Cache: Stickies (Tested in Safari 4.0b)
  9. DB and App Cache: Gmail for mobile (Tested in iPhone 2.2.1+, Android 1.1+)
  10. Workers: Bad Primes (Tested in FF 3.5b4+, Safari 4.0b)
  11. Workers: Good Primes (Tested in FF 3.5b4+, Safari 4.0b)
  12. Workers: Motion Tracker (Tested in FF 3.1b3, FF Nightly)

source: htmlfive.appspot.com

Demo: http://9elements.com/io/projects/html5/canvas/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s