W3C home > Mailing lists > Public > public-dap-commits@w3.org > March 2013

CVS 2009/dap/camera

From: CVS User akostiai <cvsmail@w3.org>
Date: Wed, 13 Mar 2013 10:46:50 +0000
Message-Id: <E1UFjCs-0006MF-3X@roscoe.w3.org>
To: public-dap-commits@w3.org
Update of /sources/public/2009/dap/camera
In directory roscoe:/tmp/cvs-serv24436

Added Files:
	Overview.src.html 
Log Message:
add Overview.src.html


--- /sources/public/2009/dap/camera/Overview.src.html	2013/03/13 10:46:50	NONE
+++ /sources/public/2009/dap/camera/Overview.src.html	2013/03/13 10:46:50	1.1
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Media Capture</title>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
    <script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
    <script class='remove'>
      var respecConfig = {
          specStatus:           "ED",
          shortName:            "html-media-capture",
          editors: [
              {name: "Anssi Kostiainen", company: "Nokia"},
              {name: "Ilkka Oksanen", company: "Nokia (until May 10, 2012)"},
              {name: "Dominique Hazaël-Massieux", company: "W3C (until May 10, 2012)"}
          ],
          //publishDate:          "2012-05-29",
          previousPublishDate:  "2012-05-29",
          previousMaturity:     "WD",
          edDraftURI:           "http://dev.w3.org/2009/dap/camera/",
          // lcEnd: "2009-08-05",
      };
    </script>
    <script src='../common/config.js' class='remove'></script>
  </head>
  <body>
    
    <section id="abstract">
      The <cite>HTML Media Capture</cite> specification defines an HTML form
      extension that facilitates user access to a device's <a>media capture
      mechanism</a>, such as a camera, or microphone, from within a file upload
      control.
    </section>
    
    <section id="sotd">
      The following changes have been made since the
      <a href="http://www.w3.org/TR/2012/WD-html-media-capture-20120712/">
      W3C Working Draft 12 July 2012</a>:
      <ul>
        <li>
          Changed the type of the <code><a>capture</a></code> attribute from
          an enumerated attribute into a boolean attribute.
        </li>
        <li>
          Clarified use cases and examples.
        </li>
      </ul>
    </section>
    
    <section class="informative">
      <h2>Introduction</h2>
      <p>
        The <cite>HTML Media Capture</cite> specification extends the
        <code><a>HTMLInputElement</a></code> interface with a
        <code><a>capture</a></code> attribute. The <code><a>capture</a></code>
        attribute allows authors to declaratively request use of a <a>media
        capture mechanism</a>, such as a camera or microphone, from within a
        file upload control, for capturing media on the spot.
      </p>
      <p>
        This extension is specifically designed to be simple and declarative,
        and covers a subset of the media capture functionality of the web
        platform. Specifically, the extension does not provide detailed author
        control over capture. Use cases requiring more file-grained author
        control may be met by using another specification, <cite>Media Capture
        and Streams</cite> [[GETUSERMEDIA]]. For example, access to real-time
        media streams from the hosting device is out of scope for this
        specification.
      </p>
    </section>

    <section id="conformance">
      <p>
        This specification defines conformance criteria that apply to a single
        product: the <dfn>user agent</dfn> that implements the interfaces that
        it contains.
      </p>
      <p>
        Implementations that use ECMAScript to implement the APIs defined in
        this specification must implement them in a manner consistent with the
        ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]],
        as this specification uses that specification and terminology.
      </p>
    </section>
    
    <section>
      <h2>Terminology</h2>
      <p>
        The
        <a href="http://www.w3.org/html/wg/drafts/html/CR/forms.html#the-input-element">
        <code><dfn>input</dfn></code> element</a>,
        <a href="http://www.w3.org/html/wg/drafts/html/CR/forms.html#htmlinputelement">
        <code><dfn>HTMLInputElement</dfn></code></a> interface,
        <a href="http://www.w3.org/html/wg/drafts/html/CR/forms.html#attr-input-accept">
        <code><dfn>accept</dfn></code> attribute</a>, and
        <a href="http://www.w3.org/html/wg/drafts/html/CR/forms.html#file-upload-state-(type=file)">
        <dfn>File Upload</dfn></a> <a>state</a> are defined in [[!HTML5]].
      </p>
      <p>
        The term
        <a href="http://www.w3.org/html/wg/drafts/html/CR/infrastructure.html#boolean-attributes">
        <dfn>boolean attribute</dfn></a> and the concept
        <a href="http://www.w3.org/html/wg/drafts/html/CR/infrastructure.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 directly capturing media of a MIME type
        specified by the <code><a>accept</a></code> attribute, using a <a>media
        capture mechanism</a>.
      </p>
      <p>
        The term <dfn>media capture mechanism</dfn> refers to a device's local
        media capture device, such as a camera or microphone.
      </p>
    </section>
    
    <section id="security">
      <h2>Security and privacy considerations</h2>
      <p>
        The user agent SHOULD NOT enable any device for media capture, such as
        a microphone or camera, until a user interaction giving implicit
        consent is completed. A user agent SHOULD also provide an indication
        when such an input device is enabled and make it possible to terminate
        such capture. Similarly, the user agent SHOULD allow the user:
        <ul>
          <li>
            to select the exact media capture device to be used if there exists
            multiple devices of the same type (e.g. a front-facing camera in
            addition to a primary camera).
          </li>
          <li>
            to disable sound capture when in the video capture mode.
          </li>
        </ul>
      <p>
        This specification builds upon the security and privacy protections
        provided by the <code>&lt;input type="file"&gt;</code> [[!HTML5]] and
        the [[!FILE-API]] specifications; in particular, it is expected that
        any offer to start capturing content from the user’s device would
        require a specific user interaction on an HTML element that is entirely
        controlled by the user agent.
      </p>
      <p>
        Implementors SHOULD take care of additional leakage of privacy-sensitive
        data from captured media. For instance, embedding the user’s location in
        a captured media metadata (e.g. EXIF) might transmit more private data
        than the user might be expecting.
      </p>

    </section>
    
    <section>
      <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>, 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 boolean <dfn>capture</dfn></dt>
        <dd>
        </dd>
      </dl>
      <p>
        The <code><dfn>capture</dfn></code> attribute is a <a>boolean attribute</a>
        that, if specified, indicates that the capture of media directly from
        the device's environment using a <a>media capture mechanism</a> is
        preferred.
      </p>
      <p>
        The <code><a>capture</a></code> IDL attribute MUST <a>reflect</a> the
        respective content attribute of the same name.
      </p>
      <p>
        When the <code><a>capture</a></code> attribute is specified, the
        <a>user agent</a> SHOULD invoke a file picker of the specific
        <a>capture control type</a>.
      </p>
      <p>
        If the <code><a>accept</a></code> attribute's value is set 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>
    </section>
    
    <section class="appendix informative">
    <h2>Examples</h2>
    <p>
      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. Both a simple declarative
      example using an HTML form, as well as a more advanced example including
      scripting, are presented.
      
    </p>
    <ul>
      <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;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>
        Or alternatively, to capture video using the device's local video camera:
        <pre class="example sh_html">
          &lt;form action="server.cgi" method="post" enctype="multipart/form-data"&gt;
            &lt;input type="file" name="video" accept="video/*" capture&gt;
            &lt;input type="submit" value="Upload"&gt;
          &lt;/form&gt;
        </pre>
      </li>
      <li>
        Or alternatively, to capture audio using the device's local microphone:
        <pre class="example sh_html">
          &lt;form action="server.cgi" method="post" enctype="multipart/form-data"&gt;
            &lt;input type="file" name="audio" accept="audio/*" capture&gt;
            &lt;input type="submit" value="Upload"&gt;
          &lt;/form&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">
          &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]'); // see Example 4

          input.onchange = function () {
            var file = input.files[0];

            upload(file);
            drawOnCanvas(file);   // see Example 6
            displayAsImage(file); // see Example 7
          };

          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 the
        <code>FileReader</code> and a <code>canvas</code> element:
        <pre class="example sh_javascript">
          function drawOnCanvas(file) {
            var reader = new FileReader();

            reader.onload = function (e) {
              var dataURL = e.target.result,
                  c = document.querySelector('canvas'), // see Example 4
                  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>
        Or alternatively, to just display the image, using the
        <code>createObjectURL()</code> method and an <code>img</code>
        element:
        <pre class="example sh_javascript">
          function displayAsImage(file) {
            var imgURL = URL.createObjectURL(file),
                img = document.createElement('img');

            img.onload = function() {
              URL.revokeObjectURL(imgURL);
            };

            img.src = imgURL;
            document.body.appendChild(img);
          }
        </pre>
      </li>
    </ul>
    <p>
      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
      Capture state (right)." src="capture-api-file-picker-concept.png">
    </p>
  </section>
  
</body>
</html>
Received on Wednesday, 13 March 2013 10:46:56 GMT

This archive was generated by hypermail 2.3.1 : Wednesday, 13 March 2013 10:46:56 GMT