1. 程式人生 > >(親測可用)html5 file呼叫手機攝像頭

(親測可用)html5 file呼叫手機攝像頭

在切圖網一個客戶的webapp專案中需要用到 html5呼叫手機攝像頭,找了很多資料,大都是 js呼叫api  然後怎樣怎樣,做了幾個demo測試發現根本不行, 後來恍然大悟,用html5自帶的 input file=""  ,純html5,並且不涉及到js ,就可以實現。程式碼如下:


(親測可用)html5呼叫手機攝像頭




html 程式碼效果預覽





123
    <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--錄音。
accept表示,直接開啟系統檔案目錄。


其實html5的input:file標籤還支援一個multiple屬性,表示可以支援多選,如:


html 程式碼效果預覽





1
    <input type="file" accept="image/*" multiple>






加上這個multiple後,capture就沒啥用了,因為multiple是專門yong用來支援多選的。


內容切圖社群(qietu.cn) 首發,註明來源可轉載。

http://www.qdfuns.com/notes/26716/2d4fea81a990f8532ce7fa43af286add.html

限制只能選擇圖片

  1. <inputtype="file"accept="image/*">


限制只能選擇視訊

  1. <inputtype="file"accept="video/*">

限制只能選擇音訊

  1. <inputtype="file"accept="audio/*">

直接開啟攝像頭拍照

  1. <inputtype="file"accept="image/*"capture="camera"
    >


直接開啟攝像頭錄影

  1. <inputtype="file"accept="video/*"capture="camera">