仅使用HTML打开用户的相机，被忽略的Capture属性

在文件输入类型中有一个 capture 的可选属性，它可以设置应该使用哪个设备来捕获该accept属性定义的类型的新媒体。值包括user和environment。

Capture 以前是一个布尔属性，如果存在，则请求使用设备的媒体捕获设备（如相机或麦克风）而不是请求文件输入。

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

  1. user: 它将使用面向用户或前置摄像头和/或麦克风
  2. environment: 它将使用外置或后置摄像头和/或麦克风。

编写一个 index.html 测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</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 代码中的两个 input 输入，它们都具有捕获属性并且它们都具有接受属性。一个被设置为 environment 捕捉并且接受任何类型的视频。另一个设置为 user 捕捉并且接受任何类型的图像，如果在手机上打开该页面并单击第一个输入，手机的相机将以视频录制模式打开。单击第二个输入时，手机会以拍照模式打开相机（正常情况下会是前置摄像头）。

演示来源：截取自油管视频

2022-09-11 10.05.02.gif

当拍摄完成照片或视频时，该文件将发送到 HTML 输入，酷😎。

每当我们谈论新的 Web API 或功能时，我们都必须讨论兼容性，乍一看该属性并不好：

image.png

但是不要慌，因为所有这些不受支持的浏览器实际上都是桌面浏览器，它们没有前置或后置摄像头，所以不支持也是有道理的。

但是反过来所有支持的浏览器都是移动浏览器，所以这个功能兼容性并不是看起来那么差。

当然了，即使用户使用不受支持的浏览器访问，它也会退回到默认的文件选择器UI，事实上许多手机系统默认选择器里就包含了拍摄按钮，不过使用该属性还是能为移动网页在上传时拍摄照片、视频或录音时创造更好的用户体验。

参考文章：austingil.com/html-captur…

posted @ 2022-09-11 14:38  茶无味的一天  阅读(92)  评论(0)  编辑  收藏  举报  来源