【HTML】原生属性capture访问相机

前言

最近遇到了一个没听说过的很酷的 HTML 属性；capture。所以我这里翻了资料来介绍下。该属性是input标签下的一个子属性，且type为file的时候，遵循如下的两个变量设置：当使用了User值的时候，会调用用户的摄像头（比如前置摄像头），当使用了environment值的时候，则按照用户环境变量来调用摄像头（比如后置摄像头）

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    * {
      font-size: 1.5rem;
    }
  </style>
</head>

<body>
  <label for="environment">environment:</label>
  <br>
  <input
    type="file"
    id="environment"
    capture="environment"
    accept="video/*"
  >
  <br><br>
  <label for="user">user:</label>
  <br>
  <input
    type="file"
    id="user"
    capture="user"
    accept="image/*"
  >
</body>
</html>

代码很简单，两个input元素，一个input的capture设置为environment，并且accept配置为video，作用就是接受环境变量级别的视频。一个input的capture设置为user，accept配置为image，用于接受用户摄像头的图像。
实际测试的话，在桌面浏览器中可能看不出来，需要放到手机中进行浏览。因为手机里面系统版本的原因，有可能会不太一样，有的手机会调用文件浏览功能。
我这里建立了一个页面，你可以直接访问看下：https://djc8.cn/reference_resources_html_capture_1.html
点击按钮均会调用起摄像头，第一个按钮，默认选择了录像功能，第二个按钮，选择了拍照功能。(我手机限制，不会自动切换前置/后置摄像头）

兼容性

可以在这里查看capture的兼容性
https://caniuse.com/html-media-capture

最后

可以在html5的标准网站找到capture属性
https://www.w3.org/TR/2018/REC-html-media-capture-20180201/