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

百度已收录   阅读次数: 307
2022-09-2613:30:11 发表评论
摘要

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

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

开篇寄语

一般情况下,想要调用开启移动手机的摄像头,一般需要书写大量的代码,但是,偶然浏览 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 端上不起作用。

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

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

是不是很酷?

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

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

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

温馨提示

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

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: