原创

【HTML】原生属性capture访问相机

前言

最近遇到了一个没听说过的很酷的 HTML 属性;capture。所以我这里翻了资料来介绍下。该属性是input标签下的一个子属性,且typefile的时候,遵循如下的两个变量设置:当使用了User值的时候,会调用用户的摄像头(比如前置摄像头),当使用了environment值的时候,则按照用户环境变量来调用摄像头(比如后置摄像头)

示例

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

代码很简单,两个input元素,一个inputcapture设置为environment,并且accept配置为video,作用就是接受环境变量级别的视频。一个inputcapture设置为useraccept配置为image,用于接受用户摄像头的图像。
实际测试的话,在桌面浏览器中可能看不出来,需要放到手机中进行浏览。因为手机里面系统版本的原因,有可能会不太一样,有的手机会调用文件浏览功能。
我这里建立了一个页面,你可以直接访问看下:https://djc8.cn/reference_resources_html_capture_1.html
点击按钮均会调用起摄像头,第一个按钮,默认选择了录像功能,第二个按钮,选择了拍照功能。(我手机限制,不会自动切换前置/后置摄像头)

兼容性

可以在这里查看capture的兼容性
https://caniuse.com/html-media-capture

最后

可以在html5的标准网站找到capture属性
https://www.w3.org/TR/2018/REC-html-media-capture-20180201/

温馨提示:
本文最后更新于 2023年01月18日,已超过 19 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我
正文到此结束
本文目录