device's media capture mechanism,利用input:file調用設備的照相機/相冊、攝像機、錄音機

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

相關文章
相關標籤/搜索