Thursday, September 25th, 2008

input type=camera to give us a simple way to integrate to Webcams

Category: Browsers, Component, Firefox, HTML, Mozilla

There are a substantial number of iPhone apps that tie into the builtin native components such as the camera.

Brad Lassey has been hacking on Fennec (the Mozilla mobile browser) as well as Firefox itself to integrate with camera phones and Webcams alike:

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 actually 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.

I kinda like having an input type="camera" myself, to be more explicit. It would be cool if you can get access to the image as data (e.g. the value is data:......). I love it.

Posted by Dion Almaer at 6:13 am

2.3 rating from 80 votes


Comments feed TrackBack URI

Neat idea, and there’s something to be said for the simplicity of the proposed implementation, but I sure hope that this would be designed to take into account more subtle uses and requirements.

For example, can the form specify allowable resolutions or aspect ratios of the input? I could see this being useful if the webcam has an aspect ratio that is significantly different from that needed by the server (e.g. a 16:9 webcam being used to take avatar images that are 1:1 (square))

Also, if your plugging a webcam into forms, an obvious next use would be to grab movie clips. We’re already seeing video comments becoming [somewhat] commonplace on blogs like Techcrunch, so having a built-in ability to grab and post movie clips would be really useful in those cases. If so, can the form specify a desired resolution/format/maximum time allowed?


Comment by broofa — September 25, 2008

second on the capturing of video clips as well.

Could we:

Comment by collintmiller — September 25, 2008

Why not have type=”still” and type=”motion” or something similar?

Manipulation of images could be done in script if the data can be loaded into a canvas element.

Comment by collintmiller — September 25, 2008

How about:
– type=”camera_still”: for uploading photo;
– type=”camera_motion”: for uploading video;
– type=”camera_live”: for live streaming.

Comment by nickvidal — September 25, 2008


Comment by naterkane — September 25, 2008

I’m really waiting for
input=machine type=washing
and the last but not least
input=hole type=ass

Comment by kkboud1 — September 26, 2008

> It would be cool if you can get access to the image as data

no – that would open up the user to a load of privacy-based problems. For example, let’s say that the computer is in the user’s bedroom, and the browser is open to a compromised site which has the input type=camera in a hidden form. that form could periodically upload photos of the bedroom and its going-ons to a server which could use the photos for various nefarious purposes.

not as serious as allowing type=file data to be read by javascript, but still…

I’d say the solution is to only allow javascript access to the photo data when the Take Photo button has physically been clicked.

Comment by kae — September 27, 2008

@nickvidal: thats a bad solution.

type=”camera” action=”still”
type=”camera” action=”motion”
type=”camera” action=”live”

wold be better.

Comment by Aimos — September 27, 2008


Pretty much the same than Dion shared with us here… but is a good blog, it does worth the read.

Comment by whoisyeco — January 2, 2009

Leave a comment

You must be logged in to post a comment.