你可以用HTML访问用户的相机

有一天，我发现了一个很酷的HTML属性，我以前从来没有听说过；捕获。所以我决定做一个视频和博文来介绍它。

有一天，我发现了一个很酷的HTML属性，我以前从来没有听说过。 [capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture).所以我决定做一个关于它的视频和博文。

如果你喜欢，这里有一个视频格式。

你可以把capture 属性放在带有文件类型的输入上，你可以给它一个 "user" 或 "environment" 的值。

捕获属性的有趣之处在于，用户通过移动设备访问你的网站。如果他们与该输入交互，而不是打开默认的文件选择器，它实际上会打开他们的一个摄像头。它可能是前置摄像头或后置摄像头，取决于该值。

如果你把这个值设置为 "user"，它将使用面向用户的或正面的摄像头和或麦克风。而如果你把它设置为"environment"，它将使用面向外部或面向背面的摄像头和/或麦克风。

为了测试它，我创建了一个index.html文件，看起来像这样。

HTML

<!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">Capture environment:</label>
  <br>
  <input
    type="file"
    id="environment"
    capture="environment"
    accept="video/*"
  >
  <br><br>
  <label for="user">Capture user:</label>
  <br>
  <input
    type="file"
    id="user"
    capture="user"
    accept="image/*"
  >
</body>

</html>

该HTML的唯一相关部分是两个输入。它们都有一个捕获属性，都有一个接受属性。一个被设置为捕获任何类型的视频的"environment"。另一个被设置为捕获任何类型的图像的 "user"。

捕获属性在桌面上并没有真正做任何有趣的事情。当我点击输入时，我看到它打开了文件选择器。

但有趣的部分是...

如果我在我的手机上调出该页面并点击第一个输入，我的相机就会以视频录制模式打开。当我点击第二个输入时，我的手机在图像捕捉模式下打开相机（由于某些原因，我的手机不区分正面或背面的相机）。

当你真正拍下照片或视频时，该文件会被发送到HTML输入。

这有多酷啊！！？

现在，无论何时我们谈论新的网络API或功能，我们都必须讨论兼容性，如果我们看一下caniuse.com上的支持，它看起来并不好......

但这实际上是有道理的，因为所有这些不支持的浏览器实际上都是桌面浏览器，那里没有正面或背面的摄像头。所以只打开文件选取器是有意义的。

但所有支持的浏览器都是移动浏览器。所以这个功能很好用。

另一件很酷的事情是，即使用户使用不支持的浏览器来访问你的应用程序，它也会退回到默认的文件选取器用户界面。

渐进式增强FTW!!!

这就是HTML捕获属性。如果你知道你的移动用户在上传时要拍摄照片、视频或语音记录，这是一个相当酷的方法，可以增加更好的用户体验。

非常感谢您的阅读。如果你喜欢这篇文章，请分享它。这是支持我的最好方式之一。

你可以只用HTML访问用户的相机（附代码）

你可以用HTML访问用户的相机

有一天，我发现了一个很酷的HTML属性，我以前从来没有听说过；捕获。所以我决定做一个视频和博文来介绍它。