
开篇寄语
一般情况下,想要调用开启移动手机的摄像头,一般需要书写大量的代码,但是,偶然浏览 MDN Web Docs,发现在 HTML 相关知识中,有一个标签 input,它有一个特性为 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>
实际效果如下:
HTML 唯一相关的部分是 input 标签。它们都具有捕获属性并且它们都具有接受属性。一个设置为使用任何类型的视频捕捉 “environment”。另一个设置为使用任何类型的图像捕获 “user”。
capture 属性在 PC 端上不起作用。
当单击输入时,它只打开了文件选择器。
但是,如果在移动端点击这些按钮,有趣的事情就发生了,手机的相机竟然打开了。
是不是很酷?
根据文档反馈,目前只支持移动端,而且版本也有所限制,具体可以参看下图:

另一件很酷的事情是,即使用户使用不受支持的浏览器访问应用程序,它也会支持默认的文件选择器 UI。
温馨提示
使用这个特性,无需用户开启摄像头使用权限。
- 我的微信
- 微信扫一扫加好友
-
- 我的微信公众号
- 扫描关注公众号
-