4 ms·

New HTML Trick for Web Developers in Apple’s iOS

25 points by bitsweet 14y ago

sv123 14y ago
Really only one trick, but cool.
speg 14y ago
Is the demo section supposed to be functional? Nothing happens on my device...
jonny_eh 14y ago
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 14y ago
  agreed, I've updated the title
  - tantalor 14y ago
    And now it's reverted back. The new title was much better!
    - bitsweet 14y ago
      not sure why, I didn't change it.
filipncs 14y ago
Here's a fiddle with the demo elements from the article: http://jsfiddle.net/wut6z/ http://jsfiddle.net/wut6z/
- dean 14y ago
  This will get you directly to the HTML frame: http://fiddle.jshell.net/wut6z/show/ http://fiddle.jshell.net/wut6z/show/ I just took a photo with my mobile web browser. Cool.
  - talmand 14y ago
    Nice that they fall back to regular file inputs expecting that file type when the host device doesn't support the hardware.
TazeTSchnitzel 14y ago
The blurry background was distracting and irritated my eyes. Maybe I'm just tired.
- angry-hacker 14y ago
  The font was blurry and distracting for me... really hard to read. Windows 7 64bit + Chrome.
  - TazeTSchnitzel 14y ago
    Tweak your ClearType settings. There's a wizard in the control panel somewhere.
- micampe 14y ago
  Safari Reader is a big reason for it being my preferred browser.
  - TazeTSchnitzel 14y ago
    Pity I can't get it on Ubuntu.
    - micampe 14y ago
      I used to use Readability’s bookmarklet before it became a service. This is a good replacement http://readable.tastefulwords.com http://readable.tastefulwords.com
      - TazeTSchnitzel 14y ago
        Thanks! Although I think my HTTPS connection (I use HTTPS Everywhere) is stopping it working on some sites. :(
talmand 14y ago
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/ http://www.w3.org/TR/html-media-capture/
- dean 14y ago
  I just tried this. I went to http://fiddle.jshell.net/wut6z/show/ 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.

25 points by bitsweet 14y ago

sv123 14y ago

Really only one trick, but cool.

speg 14y ago

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

jonny_eh 14y ago

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 14y ago
agreed, I've updated the title
- tantalor 14y ago
  And now it's reverted back. The new title was much better!
  - bitsweet 14y ago
    not sure why, I didn't change it.

filipncs 14y ago

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

dean 14y ago
This will get you directly to the HTML frame: http://fiddle.jshell.net/wut6z/show/ http://fiddle.jshell.net/wut6z/show/ I just took a photo with my mobile web browser. Cool.
- talmand 14y ago
  Nice that they fall back to regular file inputs expecting that file type when the host device doesn't support the hardware.

TazeTSchnitzel 14y ago

The blurry background was distracting and irritated my eyes. Maybe I'm just tired.

angry-hacker 14y ago
The font was blurry and distracting for me... really hard to read. Windows 7 64bit + Chrome.
- TazeTSchnitzel 14y ago
  Tweak your ClearType settings. There's a wizard in the control panel somewhere.
micampe 14y ago
Safari Reader is a big reason for it being my preferred browser.
- TazeTSchnitzel 14y ago
  Pity I can't get it on Ubuntu.
  - micampe 14y ago
    I used to use Readability’s bookmarklet before it became a service. This is a good replacement http://readable.tastefulwords.com http://readable.tastefulwords.com
    - TazeTSchnitzel 14y ago
      Thanks! Although I think my HTTPS connection (I use HTTPS Everywhere) is stopping it working on some sites. :(

talmand 14y ago

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/ http://www.w3.org/TR/html-media-capture/

dean 14y ago
I just tried this. I went to http://fiddle.jshell.net/wut6z/show/ 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.