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

 

原文地址：https://segmentfault.com/a/1190000004084757