Network
Join Attendee Network
 

JS + HTML5 Video + Canvas = WOAH!

Wes Bos (Wes Bos Design)
2:35pm Thursday, 05/31/2012
Ancillary Technologies, Continental 5
Average rating: ****.
(4.38, 16 ratings)
  1. Introduction
  2. How does HTML5 Video work?
    1. Setting it up
    2. Access to the player’s data
    3. Using CSS3 with HTML5 Video
  3. HTML + Canvas
    1. A match made in heaven
    2. We can use canvas to manipulate video in endless amounts of ways
  4. Web RTC Native Camera / Hardware access
    1. getUserMedia() is the future of native hardware access! No more flash :)
    2. Basic Example
    3. Integrating with canvas
    4. Manipulating with canvas
  5. HTML5 Video/ Canvas Green screen Effect
    1. Pixel Level detail with getImageData()
    2. Accessing the Red, Green, Blue and Alpha channels
    3. Using thresholds to replace my solid colour t-shirt with another HTML5 video element
  6. Interactive HTML5 Video Face Detection
    1. How does face detection work?
    2. Simple Code / Demo of detecting faces and placing Goofy glasses on my face
    3. Turn camera to audience and see how many faces we can place goofy Glasses on (I’ve done at least 15 simultaneously)
    4. A quick word on performance and web workers
  7. Use in the real world?
    1. Great for fun, but how can we use it in the real world?
    2. Current polyfills for older browser support
    3. Uses: Online After Effects, Skype Killer, etc…
    4. Quick demo of a pure HTML5 video conference using NodeJS on the back end
  8. Wrap up + Questions

People planning to attend this session also want to see:

Photo of Wes Bos

Wes Bos

Wes Bos Design

Wes Bos is an independent web developer, UI designer and all around hacker from Toronto, Canada. He is super passionate about design, development, and business spending most of his time working with JavaScript, CSS3, HTML5 and PHP. Wes is one to push the limits of new technology and has been known to publish HTML5 and Node.js experiments and tutorials to his blog.

Wes loves open source software and community learning, he spends a lot of time on github, twitter, and IRC (freenode) connecting with other developers. If you’re a woman looking to break into the developer industry, Wes teaches day long training for the non-profit Ladies Learning Code

Comments on this page are now closed.

Comments

Picture of Nathan Lounds
Nathan Lounds
06/06/2012 10:23am PDT

Thanks for a very good presentation. It was lots of fun and it is exciting to think of all that is possible with what you shared. Any chance we could get the slides?

Sponsors

  • appendTo
  • Enyo
  • Ludei
  • Sencha
  • Appcelerator
  • Twitter
  • Infragistics
  • Code For America
  • DevChix
  • Eclipse Foundation
  • Women Who Code

For information on exhibition and sponsorship opportunities at Fluent conference, contact Gloria Lombardo at (203) 381-9245 or glombardo@oreilly.com.

For information on trade opportunities with O'Reilly conferences contact mediapartners
@oreilly.com

View a complete list of Fluent contacts