

New HTML Trick for Web Developers in Apple’s iOS - bitsweet
http://coderwall.com/p/cvmgtw

======
talmand
For this to initiate, does it require user interaction? Is it possible to
trigger this through javascript? Does it use the rear-facing and/or front-
facing cameras? If an image is captured, does the phone let the user know? Can
the user turn this feature off?

I see from the spec it mentions the part about user interaction, so at least
that's there. I'm just curious how the other things work if anyone can get it
to work on a device. Plus, if a page has a regular form for something
unrelated, can this attribute be hidden in the form to snap an image to be
uploaded as well without the user knowing it?

The spec also mentions metadata in the image. Will there be a way for the user
to prevent that?

Also, the spec notes three attributes: camera, camcorder, microphone. They
better lock this badboy down hard.

<http://www.w3.org/TR/html-media-capture/>

~~~
dean
I just tried this. I went to <http://fiddle.jshell.net/wut6z/show/> (which is
the HTML frame of a fiddle someone posted down this page), with my iPhone.
It's just an HTML input tag with type=file and an "accept" attribute set to
"image/*", and it shows up as a "Choose File" button in the browser.

When you tap it, a sheet slides up from the bottom of the screen with buttons
for "Take Photo", "Choose Existing" and "Cancel". Tapping "Take Photo", opens
the rear-facing camera, and I have to tap to take the picture.

"Choose Existing" opens the photo album. It works like a normal file chooser
if your hardware doesn't support a camera.

So, on this page, I had control over taking the picture. But you raise good
points, and I'm curious what you could do with JavaScript if you were trying
to take pictures without the user's knowledge.

I'm also curious what metadata I just uploaded.

------
jonny_eh
Not much a trick, but good to know.

A better title would have been "How to use iOS6's new image + video capture
from HTML". Or something like that.

~~~
bitsweet
agreed, I've updated the title

~~~
tantalor
And now it's reverted back. The new title was much better!

~~~
bitsweet
not sure why, I didn't change it.

------
filipncs
Here's a fiddle with the demo elements from the article:
<http://jsfiddle.net/wut6z/>

~~~
dean
This will get you directly to the HTML frame:
<http://fiddle.jshell.net/wut6z/show/>

I just took a photo with my mobile web browser. Cool.

~~~
talmand
Nice that they fall back to regular file inputs expecting that file type when
the host device doesn't support the hardware.

------
TazeTSchnitzel
The blurry background was distracting and irritated my eyes.

Maybe I'm just tired.

~~~
micampe
Safari Reader is a big reason for it being my preferred browser.

~~~
TazeTSchnitzel
Pity I can't get it on Ubuntu.

~~~
micampe
I used to use Readability’s bookmarklet before it became a service. This is a
good replacement <http://readable.tastefulwords.com>

~~~
TazeTSchnitzel
Thanks! Although I think my HTTPS connection (I use HTTPS Everywhere) is
stopping it working on some sites. :(

------
speg
Is the demo section supposed to be functional? Nothing happens on my device...

------
sv123
Really only one trick, but cool.

