在切图网一个客户的 webapp 项目中需要用到 html5 调用手机摄像头, 找了很多资料, 大都是 js 调用 api 然后怎样怎样, 做了几个 demo 测试发现根本不行, 后来恍然大悟, 用 html5 自带的 input file="" , 纯 html5, 并且不涉及到 js , 就可以实现. 代码如下:
html 代码
- <input type="file" accept="image/*" capture="camera">
- <input type="file" accept="video/*" capture="camcorder">
- <input type="file" accept="audio/*" capture="microphone">
capture 表示, 可以捕获到系统默认的设备, 比如: camera-- 照相机; camcorder-- 摄像机; microphone-- 录音.
accept 表示, 直接打开系统文件目录.
其实 html5 的 input:file 标签还支持一个 multiple 属性, 表示可以支持多选, 如:
html 代码
<input type="file" accept="image/*" multiple>
加上这个 multiple 后, capture 就没啥用了, 因为 multiple 是专门 yong 用来支持多选的.
内容切图社区 (qietu.cn) 首发, 注明来源可转载.
来源: http://www.qdfuns.com/article/26716/2d4fea81a990f8532ce7fa43af286add.html