W3C home > Mailing lists > Public > public-dap-commits@w3.org > November 2012

CVS 2009/dap/camera

From: CVS User akostiai <cvsmail@w3.org>
Date: Thu, 29 Nov 2012 15:27:26 +0000
Message-Id: <E1Te61O-0005p5-N7@roscoe.w3.org>
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">
-          &lt;input type="file" accept="image/*" capture="camera"&gt;
+          &lt;form action="server.cgi" method="post" enctype="multipart/form-data"&gt;
+            &lt;input type="file" name="image" accept="image/*" capture&gt;
+            &lt;input type="submit" value="Upload"&gt;
+          &lt;/form&gt;
         </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">
-          &lt;input type="file" accept="video/*" capture="camcorder"&gt;
+          &lt;input type="file" accept="video/*" capture&gt;
         </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">
-          &lt;input type="file" accept="audio/*" capture="microphone"&gt;
+          &lt;input type="file" accept="audio/*" capture&gt;
+        </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">
+          &lt;input type="file" accept="image/*" capture&gt;
+          &lt;canvas&gt;&lt;/canvas&gt;
+        </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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 29 November 2012 15:27:28 GMT