先贴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/jpg
,image/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读文件,这些内容就与本文无关了。