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.



