两天发布了一篇关于利用html5在手机端进行拨号和发送短信的教程,今天再说一下利用html5在手机端调用摄像头以及录音的教程
在html5中可以利用type类型为file的input的标签调起手机的摄像头
例:html5调用手机摄像头进行拍照
<input type="file" accept="image/*" capture="camera">
例:html5调用手机摄像头进行录像
<input type="file" accept="video/*" capture="camera">
input 标签,不仅仅可以调用起手机的摄像头,还可以录音呢
例:
<input type="file" accept="audio/*" capture="microphone">
input accept 属性
accept属性可以限制可用文件的类型,当 input 标签的 type 属性为 file 时,可以规定服务器所接受的文件类型
例如:
accept="audio/*" 表示所有音频文件 accept="video/*" 表示视频文件 accept="image/"* 表示图片文件
当然你也可以使用文件后缀名的形式
例:
accept="image/png* 表示只接收后缀名为 png 的图片 accept="image/jpg* 表示只接收后缀名为 jpg 的图片 accept=".png, .jpg, .jpeg" 表示可以同时接收 png jpg jpeg 后缀的文件
input capture 属性
切图公司一个项目中碰到一个类似苹果手机上SIRI 机器人的项目制作,所以首先想到的是html5 有个audio标签,于是找到了一个有用的demo。
最后项目顺利完成。附demo
http://developer.qietu.com/html/f3/html5audio/
---
关注我们,我们将附送我们工作中的非常多的实用的demo。
ad~
只教web前端实战的切图学院(qietu.org)
目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api ,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input file="" ,纯html5,并且不涉及到js ,就可以实现。
代码如下:
capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。
accept表示,直接打开系统文件目录。
其实html5的input:file标签还支持一个multiple属性,表示可以支持多选,如:
加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。
*请认真填写需求信息,我们会在24小时内与您取得联系。