HomeBlogAboutTools

Using Flash to shim a webcam to Canvas

javascript tech

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 (80x60) 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: http://github.com/nlothian/FlashCamShim