Javascript -> webcam -> SVG

Question

Is there anyway to use the input from my laptop's cam using either https://github.com/taboca/CamCanvas-API- or the jquery webcam plugin and then use the actual webcam image to produce an SVG image? I'm doing an art show in a few weeks and want the camera to be the source for some SVG animations, so that the audience has some form of interaction with the piece. I know that both CamCanvas Jquery Webcam output in SWF i.e. flash but can the flash file displaying the webcam be accessed from javascript and then used in a graphic library like raphael or would I have to write everything in flash?

Is it possible to use the html 5 video tag and access the webcam on my laptop?

Further, could I just stream my camera using VLC in OGG and then the OGG stream as the input for my SVG animation?

Answer 1

SVG is used for vector graphics. So "webcam" and "SVG" don't fit together very well.

I don't think <video> can access devices - so you probably go better with Flash.

Answer 2

No, you can't use the <video> tag to access a webcam – right now.

In the future (long-term), you'll be able to use the <device> tag, but no browser supports it yet.

However, you might be able to hack together a stream to a <video> tag using VLC, since it sounds like this is something you'll be running only on a machine you control. (Also take a look at this guy's second post on taking an image from video and manipulating it on a <canvas>. There's a demo that just blew my mind.)