Camera input tag
09.23.08 - 02:15pm
Earlier this month I spent some time working on exposing camera functionality to content in fennec and firefox. First, I built upon Chris Double’s implementation of a GStreamer back end for the video tag and extended it to support a “camera://” protocol. When the video tag encounters this, it creates a GStreamer pipeline starting from a video for linux 2 source (v4l2).
This currently works on desktop linux that have a v4l2 supported camera (such as iSight) and the n800/n810. It will need to be implemented on mac and windows and configurations will need to be stored in preferences (in case you have multiple cameras or your camera uses a difference interface).
Next I wrapped a video tag, image and a few buttons in xbl and bound it to <input type=”camera” />. When a user hits a website using this tag, he or she currently will see a live video preview and a “take photo” button. When the user clicks the button, the photo is grabbed from the camera and shown to the user in the image element. The image element and video element are in a deck element so only one is shown at a time. After the photo is taken, there is a button that reads “Take another photo,” in case the user doesn’t like the one they just took. Once the user is satisfied, this element works like any other form element and the file can be uploaded to a web service.
After talking to a few people this should acutally be bound to <input type=”file” accept=”image/png”/>. Also, it needs some UI design both for what it looks like in content and for a configuration dialog. Finally, we’ll need to think about security and make sure no one can snap a photo of you when you’re not looking your best. Speaking of which, I might as well share:
I’ve notice quite a few iPhone apps that allow users to take a photo and upload it with out leaving the application. Absent the ability to do this from the web, these otherwise web centric services have been forced to write a native application to accomplish their goal. Hopefully this will eventually help web services stay on the web.
This is your Meme(me) photo, clearly.
why not just cam:// or would that be a bit too voyeurish?
Mozilla, bringing the surveillance state into your home:P
As the Dr Pepper commercials in the UK ask, “what’s the worst that could happen”?
nice work
This is excellent. Especially with the new work Vlad and Roc have done with SVG transforms, this will be lots of fun.
I wonder if it’s possible to abuse this the same way like the old IE “trick” with an iframe that points to C:\. The “trick” is very cheap, but nevertheless scares non-technical people.
fantastic news!
The obvious next steps are and . Imagining submitting an audio search to Google by talking to your phone, or using your browser as a webcam!
stupid HTML stripping! What I refer to above are <input type=”file” accept=”audio/*”/> and <input type=”file” accept=”video/*”/>.
Please make sure that this can not be enabled without the user knowing. Having a remote web site ‘steal’ photos of people would be really scary to contemplate.
Please make sure it’s accessible to JavaScript for Canvas usage; being able to add ‘filters’ (like Cheese on Linux) is something I could see a little ecosystem of avatar tools would want.
Don’t forget audio and video…
(oh, and pixel shaders… definitely we /need/ pixel shaders…)
hey!!!
microphone:// and <input type=”mic(rophone)”> are absolutely required, as well.
oops: <input type=”mic(rophone)”>
<video type=”camera”> makes more sense doesn’t it?
Personally I think that adding these as extensions to the video and audio elements respectively would be more useful in the long run as they are in face video and audio related.
The idea seems really promising and could help build another bridge between interfacing the operating system functionality from the web. It’s a brilliant idea actually.
Where can I download the code ?
I’m very interesting in use this functionaly in my web browser and create a video in a remote server, always without use flash
…
Excelente job !!!
AWESOME!That’s great.