COOL！仅用 HTML 知识即可开启用户手机摄像头

摘要

一般情况下，想要调用开启移动手机的摄像头，一般需要书写大量的代码，但是，偶然浏览 MDN Web Docs，发现在 HTML 相关知识中，有一个标签 input，它有一个特性为 capture，通过简单设置，竟然能让智能手机的摄像头直接打开，选择是照相还是录像都可以，那么它有什么神奇之处呢？请看本篇文章……

开篇寄语

一般情况下，想要调用开启移动手机的摄像头，一般需要书写大量的代码，但是，偶然浏览 MDN Web Docs，发现在 HTML 相关知识中，有一个标签 input，它有一个特性为 capture，通过简单设置，竟然能让智能手机的摄像头直接打开，选择是照相还是录像都可以，那么它有什么神奇之处呢？请看本篇文章。

前情提要

• 《轻松自制万千样式地图，使用Arcgis智能Api就能搞定》
• 《如何只用html实现重定向》
• 《浏览器竟然也支持运行 Python 代码了？PyScript 了解一下》

文档详解

• Capture

视频讲解

内容详情

可以将 capture 属性放在具有文件类型的 input 标签中，并且可以给它一个值 “user” 或 “environment”。

capture 属性的有趣之处在于用户通过移动设备访问网站。如果需要交互，比如上传照片或者视频，而不是打开默认文件选择器，它实际上会打开设备的摄像头。

可以是前置摄像头或者后置摄像头，具体取决于设定值。

如果您将值设置为 “user”，它将使用面向用户或前置摄像头和/或麦克风。如果将其设置为 “environment”，它将使用外置或后置摄像头和/或麦克风。

引用 MDN 相关列子：

<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/*" />
</p>

实际效果如下：

What does your voice sound like?:

Upload a video:

Upload a photo of yourself:

HTML 唯一相关的部分是 input 标签。它们都具有捕获属性并且它们都具有接受属性。一个设置为使用任何类型的视频捕捉 “environment”。另一个设置为使用任何类型的图像捕获 “user”。

capture 属性在 PC 端上不起作用。

当单击输入时，它只打开了文件选择器。

但是，如果在移动端点击这些按钮，有趣的事情就发生了，手机的相机竟然打开了。

是不是很酷？

根据文档反馈，目前只支持移动端，而且版本也有所限制，具体可以参看下图：

另一件很酷的事情是，即使用户使用不受支持的浏览器访问应用程序，它也会支持默认的文件选择器 UI。

温馨提示

使用这个特性，无需用户开启摄像头使用权限。