先貼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讀文件,這些內容就與本文無關了。