先貼W3C官方文檔連接:http://www.w3.org/TR/html-media-capturehtml
HTML Media Capture
做爲一個候選的建議方案,還沒有定稿,即未被W3C徹底承認,還處於不斷更新的狀態,截至目前爲止,HTML Media Capture
的最新版本是2014年6月版。html5
html5對input:file
做了擴展,使用戶能夠經過input:file
來調用設備(主要是移動設備:手機/平板)的照相機/相冊、攝像機、錄音機功能api
此擴展方案首先是給input:file
加了一個屬性:capture
,這是一個boolean類型的屬性,也就是隻要有出現就爲true,沒出現就是false,這跟網上的一些資料有所衝突:app
<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 />
便可。ide
接下來要說的是跟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讀文件,這些內容就與本文無關了。code