device's media capture mechanism,利用input:file调用设备的照相机/相册、摄像机、录音机

706 查看

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