【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日,已超过 687 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
正文到此结束
- 本文标签: html capture input
- 本文链接: https://djc8.cn/archives/html-native-property-capture-accesses-the-camera.html
- 版权声明: 本文由小码农原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权