HTML Media Capture

A. Examples

This section is non-normative.

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.

• To take a picture using the device's user-facing camera, and upload the picture taken using an HTML form:
  Example 1

  <form action="server.cgi" method="post" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" capture="user">
    <input type="submit" value="Upload">
  </form>

• Or alternatively, to capture video using the device's local video camera facing the environment:
  Example 2

  <form action="server.cgi" method="post" enctype="multipart/form-data">
    <input type="file" name="video" accept="video/*" capture="environment">
    <input type="submit" value="Upload">
  </form>

• Or alternatively, to capture audio using the device's local microphone (without preferred facing mode defined, falls back to the implementation-specific default facing mode):
  Example 3

  <form action="server.cgi" method="post" enctype="multipart/form-data">
    <input type="file" name="audio" accept="audio/*" capture>
    <input type="submit" value="Upload">
  </form>

• For more advanced use cases, specify the capture attribute in markup:
  Example 4

  <input type="file" accept="image/*" capture>
  <canvas></canvas>

  And handle the file upload in script via XMLHttpRequest:
  Example 5

  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);
  }

  The image can also be displayed on the client-side without uploading it e.g. for client-side image editing purposes, using the FileReader and a canvas element:
  Example 6

  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);
  }

  Or alternatively, to just display the image, using the createObjectURL() method and an img element:
  Example 7

  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);
  }

When an input element's accept attribute is set to image/* and the capture attribute is specified as in the Example 1 or Example 4, the file picker can be rendered as presented below:

When the attribute is not specified, the file picker can be rendered as represented below: