- From: CVS User akostiai <cvsmail@w3.org>
- Date: Thu, 29 Nov 2012 15:27:26 +0000
- To: public-dap-commits@w3.org
Update of /sources/public/2009/dap/camera
In directory roscoe:/tmp/cvs-serv22370
Modified Files:
unofficial.html
Log Message:
make capture type of boolean and rework the spec accordingly; add new examples
--- /sources/public/2009/dap/camera/unofficial.html 2012/11/29 15:25:25 1.1
+++ /sources/public/2009/dap/camera/unofficial.html 2012/11/29 15:27:26 1.2
@@ -6,7 +6,7 @@
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
<script class='remove'>
var respecConfig = {
- specStatus: "ED",
+ specStatus: "unofficial",
shortName: "html-media-capture",
editors: [
{name: "Anssi Kostiainen", company: "Nokia"},
@@ -25,9 +25,9 @@
<body>
<section id="abstract">
- The <cite>HTML Media Capture</cite> specification defines HTML form
- extensions that facilitate user access to media capture capabilities of
- the hosting device. These form extensions enable the upload of still
+ The <cite>HTML Media Capture</cite> specification defines an HTML form
+ extension that facilitates user access to media capture capabilities of
+ the hosting device. This form extension enables the upload of still
images, video, and audio directly from a device capture mechanism but
capture the default offered by the device, providing limited control
over what is captured. More detailed control, including management of
@@ -63,10 +63,9 @@
This specification extends the <code><a>HTMLInputElement</a></code>
interface with a new <code><a>capture</a></code> attribute. The
<code><a>capture</a></code> attribute enables content authors to
- indicate the media to be captured and uploaded, specifically still
- images, video, and audio. Conformant user agents provide their users a
- more seamless access to the above-mentioned media capture capabilities
- of the hosting device.
+ indicate the media to be captured and uploaded. Conformant user agents
+ provide their users a more seamless access to the above-mentioned media
+ capture capabilities of the hosting device.
</p>
</section>
@@ -89,28 +88,26 @@
<p>
The
<a href="http://dev.w3.org/html5/spec/the-input-element.html#the-input-element">
- <code><dfn>input</dfn></code> element</a> and the
+ <code><dfn>input</dfn></code> element</a>,
<a href="http://dev.w3.org/html5/spec/the-input-element.html#htmlinputelement">
- <code><dfn>HTMLInputElement</dfn></code></a> interface are defined in
- [[!HTML5]].
- </p>
- <p>
- The
+ <code><dfn>HTMLInputElement</dfn></code></a> interface,
+ <a href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#attr-input-accept">
+ <code><dfn>accept</dfn></code> attribute</a>, and
<a href="http://dev.w3.org/html5/spec/states-of-the-type-attribute.html#file-upload-state-(type=file)">
- <dfn>File Upload</dfn></a> <a>state</a> is defined in [[!HTML5]].
+ <dfn>File Upload</dfn></a> <a>state</a> are defined in [[!HTML5]].
</p>
<p>
- The
- <a href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#enumerated-attribute">
- <dfn>enumerated attribute</dfn></a> microsyntax, and associated terms
- and concepts <dfn>keyword</dfn>, <dfn>state</dfn>, <dfn>invalid value
- default</dfn>, and <dfn>missing value default</dfn>, are defined in
- [[!HTML5]].
+ The term
+ <a href="http://dev.w3.org/html5/spec/common-microsyntaxes.html#boolean-attributes">
+ <dfn>boolean attribute</dfn></a> and the concept
+ <a href="http://dev.w3.org/html5/spec/common-dom-interfaces.html#reflect">
+ <dfn>reflect</dfn></a> are defined in [[!HTML5]].
</p>
<p>
In this specification, the term <dfn>capture control type</dfn>
refers to a specialized type of a file picker control that is
- optimized, for the user, for capturing media of a specified type.
+ optimized, for the user, for directly capturing media of a MIME type
+ specified by the <code><a>accept</a></code> attribute.
</p>
</section>
@@ -153,73 +150,37 @@
<h2>The capture attribute</h2>
<p>This section is normative.</p>
<p>
- When an <code><a>input</a></code> element's <code>type</code> attribute is in
- the <a>File Upload</a> <a>state</a>, the rules in this section apply.
+ When an <code><a>input</a></code> element's <code>type</code> attribute
+ is in the <a>File Upload</a> <a>state</a>, and its
+ <code><a>accept</a></code> attribute is specified, the rules in this
+ section apply.
</p>
<dl title="partial interface HTMLInputElement" class="idl">
- <dt>attribute DOMString <dfn>capture</dfn></dt>
+ <dt>attribute boolean <dfn>capture</dfn></dt>
<dd>
</dd>
</dl>
<p>
- When the <code><dfn>capture</dfn></code> attribute is specified, the
- <a>user agent</a> SHOULD invoke a file picker of the specific
- <a>capture control type</a>.
+ The <code><a>capture</a></code> attribute is a <a>boolean attribute</a>
+ that, if specified, indicates that the capture of media directly from
+ a device capture mechanism is preferred.
</p>
<p>
- The <code><a>capture</a></code> attribute controls the capture
- <a>state</a> (and associated <a>capture control type</a>) of the
- element. It is an <a>enumerated attribute</a>. The following table
- lists the <a>keyword</a>s, <a>state</a>s, and corresponding <a>capture
- control type</a>s for the attribute. The <a>keyword</a>s
- <code><dfn>camera</dfn></code>, <code><dfn>camcorder</dfn></code>,
- <code><dfn>microphone</dfn></code>, and <code><dfn>filesystem
- </dfn></code> map to the corresponding <a>state</a>s:
- <dfn>Image Capture</dfn>, <dfn>Video Capture</dfn>, <dfn>Sound
- Capture</dfn>, and <a>File Upload</a> respectively.
- </p>
- <table class="simple">
- <tr>
- <th><a>Keyword</a></th>
- <th><a>State</a></th>
- <th><a>Capture control type</a></th>
- </tr>
- <tr>
- <td><code><a>camera</a></code></td>
- <td><a>Image Capture</a></td>
- <td>A still image capture device</td>
- </tr>
- <tr>
- <td><code><a>camcorder</a></code></td>
- <td><a>Video Capture</a></td>
- <td>A video camera</td>
- </tr>
- <tr>
- <td><code><a>microphone</a></code></td>
- <td><a>Sound Capture</a></td>
- <td>A sound recorder</td>
- </tr>
- <tr>
- <td><code><a>filesystem</a></code></td>
- <td><a>File Upload</a></td>
- <td>A generic file picker</td>
- </tr>
- </table>
- <div class="note">
- A future version of this specification may define other keywords.
- </div>
+ The <code><a>capture</a></code> IDL attribute MUST <a>reflect</a> the
+ respective content attribute of the same name.
+ </p>
<p>
- The <code><a>capture</a></code> attribute's <em><a>invalid value
- default</a></em> and <em><a>missing value default</a></em> is the
- <a>File Upload</a> <a>state</a>.
+ When the <code><dfn>capture</dfn></code> attribute is specified, the
+ <a>user agent</a> SHOULD invoke a file picker of the specific
+ <a>capture control type</a>.
</p>
<p>
The <code>HTMLInputElement</code> interface's <code>accept</code>
attribute takes precedence over the <code><a>capture</a></code>
attribute. That is, if the <code>accept</code> attribute's value is set
- to a MIME type that is not accepted in a defined capture <a>state</a>,
- the <a>user agent</a> MUST act as if there was no <code><a>capture</a>
- </code> attribute.
+ to a MIME type that has no associated <a>capture control type</a>,
+ the <a>user agent</a> MUST act as if there was no
+ <code><a>capture</a></code> attribute.
</p>
<div class="note">
Use of the <code>capture</code> attribute as defined in
@@ -239,40 +200,96 @@
<section class="appendix informative">
<h2>Examples</h2>
<p>
- The following examples demostrate how to give hints that it is preferred
+ The following examples demonstrate how to give hints that it is preferred
for the user to capture media of a specific MIME type using the media
- capture capabilities of the hosting device. To give a hint that it is
- preferred for the user:
+ capture capabilities of the hosting device. Both a simple declarative
+ example using an HTML form, as well as a more advanced example including
+ scripting, are presented.
+
</p>
<ul>
- <li>
- To take a picture using the device's local camera, and upload the
- picture taken:
+ <li id="example-1">
+ To take a picture using the device's local still image capture device,
+ such as a camera, and upload the picture taken using an HTML form:
<pre class="example sh_html">
- <input type="file" accept="image/*" capture="camera">
+ <form action="server.cgi" method="post" enctype="multipart/form-data">
+ <input type="file" name="image" accept="image/*" capture>
+ <input type="submit" value="Upload">
+ </form>
</pre>
</li>
<li>
- To capture video using the device's local video camera, and upload the
- video file captured:
+ To capture video using the device's local video camera:
<pre class="example sh_html">
- <input type="file" accept="video/*" capture="camcorder">
+ <input type="file" accept="video/*" capture>
</pre>
</li>
<li>
- To capture audio using the device's local microphone, and upload the
- audio file captured:
+ To capture audio using the device's local microphone:
<pre class="example sh_html">
- <input type="file" accept="audio/*" capture="microphone">
+ <input type="file" accept="audio/*" capture>
+ </pre>
+ </li>
+
+ <li id="example-4">
+ For more advanced use cases, specify the <code>capture</code> attribute
+ in markup:
+ <pre class="example sh_html sh_javascript">
+ <input type="file" accept="image/*" capture>
+ <canvas></canvas>
+ </pre>
+ And handle the file upload in script via <code>XMLHttpRequest</code>:
+ <pre class="example sh_javascript">
+ var input = document.querySelector('input[type=file]');
+
+ input.onchange = function () {
+ upload(input.files[0]);
+ draw(input.files[0]);
+ };
+
+ function upload(file) {
+ var form = new FormData(),
+ xhr = new XMLHttpRequest();
+
+ form.append('image', file);
+ xhr.open('post', 'server.php', true);
+ xhr.send(form);
+ }
+ </pre>
+ The image can also be displayed on the client-side without uploading
+ it e.g. for client-side image editing purposes, using
+ <code>FileReader</code> and <code>canvas</code> element:
+ <pre class="example sh_javascript">
+ function draw(file) {
+ var reader = new FileReader();
+
+ reader.onload = function (e) {
+ var dataURL = e.target.result,
+ c = document.querySelector('canvas'),
+ ctx = c.getContext('2d'),
+ img = new Image();
+
+ img.onload = function() {
+ c.width = img.width;
+ c.height = img.height;
+ ctx.drawImage(img, 0, 0);
+ };
+
+ img.src = dataURL;
+ };
+
+ reader.readAsDataURL(file);
+ }
</pre>
</li>
</ul>
<p>
- When an <code><a>input</a></code> element's <code><a>capture</a></code>
- attribute is in the <a>Image Capture</a> <a>state</a>, the file picker
- may render as presented on the right side. When the attribute is in the
- <a>File Upload</a> <a>state</a>, the generic file picker may render as
- represented on the left side.
+ When an <code><a>input</a></code> element's <code>accept</code> attribute
+ is set to <code>image/*</code> and the <code><a>capture</a></code>
+ attribute is specified as in the <a href="#example-1">Example 1</a> or
+ <a href="#example-4">Example 4</a>, the file picker may render as
+ presented on the right side. When the attribute is not specified, the
+ file picker may render as represented on the left side.
</p>
<p>
<img alt="A File picker control in the File Upload (left) and Image
Received on Thursday, 29 November 2012 15:27:28 UTC