html5系列:device's media capture mechanism(设备的媒体捕捉机制)——利用input:file调用设备的照相机/相册、摄像机、录音机

先贴W3C官方文档链接:http://www.w3.org/TR/html-media-capture

HTML Media Capture作为一个候选的建议方案,尚未定稿,即未被W3C完全认可,还处于不断更新的状态,截至目前为止,HTML Media Capture的最新版本是2014年6月版。

html5对input:file作了扩展,使用户可以通过input:file来调用设备(主要是移动设备:手机/平板)的照相机/相册、摄像机、录音机功能

此扩展方案首先是给input:file加了一个属性:capture,这是一个boolean类型的属性,也就是只要有出现就为true,没出现就是false,这跟网上的一些资料有所冲突:

<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–录音。

事实上,capture并不需要有值,直接用 <input type="file" accept="image/*" capture /> 即可。

接下来要说的是跟capture属性搭配使用的accept属性。
accept属性实际上指的就是该input:file接受的文件类型(MIME),如image/jpgimage/png等,另外,也可以用 * 来代替全选,如:image/*video/*audio/*。未试验过是否能直接用accept="*",不过想必也不会有人这么用。
accept属性对于HTML Media Capture来说至关重要,在最新版本的HTML Media Capture候选方案中,规定若要用capture属性启动device's media capture,必须得指定capture control type,这指的是一种针对特定文件类型优化后的选择文件的控制方式,如从照相机/相册里选择图片、从摄像机里选择视频等。而这capture control type,实际上就是通过accept属性(MIME)来进行指定的:accept="image/*" =》 相册/照相机;accept="video/*" => 摄像机;accept="audio/*" =》 录音。换句话说,如果给出的accept属性(MIME)没有相对应的 capture control type ,例如:accept="application/rtf";或是根本没有给出accept属性,那么就无法启动 device’s media capture 了。

当用户成功通过device's media capture选择好图片/视频/音频后,就跟普通的input:file无异,该上传的上传,改用html5 file api 读的就用api读文件,这些内容就与本文无关了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值