Using Flash to shim a webcam to Canvas

A couple of weeks ago I posted my work on developing virtual keypad using HTML5 video. That worked surprisingly well, but had some unfortunate requirements in that HTML5 doesn’t really support access to webcams.

Flash Does.

I’ve developed a Flash shim, which gets access to your webcam, and copies frames to data urls which can be used in HTML DOM images.

This works well, within some limits:

  • The performance of the Flash->Javascript interface is adequate for normal use, but drops off as the data being copied across increases in size. This means that you need to have a postage stamp sized (80×60) video in flash to get adequate performance in HTML (~25 fps).
  • Chrome (and Safari?) leaks memory when new data URLs are created. (See bug). Apart from that, this technique works on both Chrome & Firefox, but my virtual keypad is Firefox only ATM
  • I don’t really know Flash. I downloaded the Flex SDK a few days ago and started hacking, so I’m pretty sure my Flash code sucks.

Here’s a demo. Take a look at the previous post to see how you are supposed to use it. I started work on making a proper Javascript API for it, but yeah… The code is on GitHub, though:

2 thoughts on “Using Flash to shim a webcam to Canvas

  1. Great work,

    I believe your prototype can be used as a proof of concept and development for future products.

    I have been playing a bit with face tracking and hand tracking myself and being a web developer I guess this is a cool way to go for now, until we can use the new device tag for html.

    I plan to go trough your code and try some stuff myself. Ill make sure to follow you and give some feedback on my achievements as soon as I have some. :)

    Cool work!

Leave a Reply

Your email address will not be published. Required fields are marked *