【HTML】原生属性capture访问相机
前言
最近遇到了一个没听说过的很酷的 HTML 属性；capture。所以我这里翻了资料来介绍下。该属性是input标签下的一个子属性，且type为file的时候，遵循如下的两个变量设置：当使用了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元素，一个input的capture设置为environment，并且accept配置为video，作用就是接受环境变量级别的视频。一个input的capture设置为user，accept配置为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/
本文来自：【HTML】原生属性capture访问相机-小码农，转载请保留本条链接，感谢！
温馨提示：
本文最后更新于 2023年01月18日，已超过 673 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。
正文到此结束
- 本文标签： html capture input
- 本文链接： https://djc8.cn/archives/html-native-property-capture-accesses-the-camera.html
- 版权声明： 本文由小码农原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
关于我
小码农
猫的一生在打哈欠中度过
