您现在的位置是:首页 > Javascript
当前栏目
【HTML】原生属性capture访问相机
2023-02-26 09:52:24 时间
前言
最近遇到了一个没听说过的很酷的 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/
相关文章
- 第 1 篇:Vue.js 很高兴认识你
- 0-完全开源的 Vue.js 入门级教程:HelloVue,发车啦!
- 【译】15 个有用的 JavaScript 技巧
- Node.js躬行记(25)——Web自动化测试
- Node.js躬行记(24)——低代码
- Node.js躬行记(23)——Worker threads
- Node.js躬行记(22)——Node环境升级日志
- Node.js精进(11)——Socket.IO
- Node.js精进(10)——性能监控(下)
- Node.js精进(9)——性能监控(上)
- Node.js精进(8)——错误处理
- Node.js精进(7)——日志
- Node.js精进(6)——文件
- Node.js精进(5)——HTTP
- Node.js精进(4)——事件触发器
- Node.js精进(3)——流
- Node.js精进(2)——异步编程
- Node.js精进(1)——模块化
- Node.js躬行记(21)——花10分钟入门Node.js
- Node.js躬行记(20)——KOA源码分析(下)