Capture image from camera into form or html5 canvas

Question

I need to capture an image from a webcam (tethered camera, etc.) into a form or html5 canvas so that I can save the image to the server. Also, I would like to be able to preview the image live in the page.

For example, I have a browser running at a registration check in station. I would like to take a picture of the attendee currently standing in front of the table, and submit that image into the database. Then I can use that image to print the attendee's badge with their picture on it.

I'm using rails and paperclip, though I doubt that matters.

Anyone done this before, or have some ideas how to do it?

Answer 1

At present, if you want to interact with a web cam from a web page you need to look at using a plug in. Flash has a mature interface to web cams, so it would be my first choice of tool.

There is a spec for native web cam support, but I'm not aware of any implementations.

Answer 2

There is a plugin for jQuery entitled 'jQuery Webcam Plugin' that provides a friendly and easy way to interact with a webcam. It actually relies on a small flash component (unfortunately), but it does a great job of making the interaction easy - as well as providing functionality to copy imagery direct into an HTML5 canvas.

Again, it's unfortunate that it relies on Flash, but I think any reliable solution is going to need flash at this point in time.

The plugin is available here: http://www.xarg.org/project/jquery-webcam-plugin/