HTML 媒体捕获

A. 示例

本节是非规范性的。

以下示例演示如何给出提示，表明 首选让用户使用主机设备的媒体捕获能力来捕获特定 MIME 类型的 媒体。这里同时给出了使用 HTML 表单的简单 声明式示例，以及一个包含脚本的更高级 示例。

• 使用设备的用户朝向 摄像头拍照，并使用 HTML 表单上传所拍摄的图片：
  示例 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>

• 或者，使用设备面向环境的本地视频 摄像头捕获视频：
  示例 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>

• 或者，使用设备的本地 麦克风捕获音频（未定义首选朝向模式时，会回退到 实现特定的默认朝向模式）：
  示例 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>

• 对于更高级的 用例，在标记中指定 capture 属性：
  示例 4

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

  并通过脚本使用 XMLHttpRequest 处理文件上传：
  示例 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);
  }

  也可以在客户端显示图像而不 上传它，例如为了客户端图像编辑目的，使用 FileReader 和 canvas 元素：
  示例 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);
  }

  或者，也可以只显示图像，使用 createObjectURL() 方法和 img 元素：
  示例 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);
  }

当 input 元素的 accept 属性设置为 image/*，并且 capture 属性如 示例 1或示例 4中那样被指定时，文件选择器可以 渲染为 如下所示：

当未指定该属性时，文件选择器可以渲染为 如下所示：