html5系列: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/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讀文件,這些內容就與本文無關了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章