親測可用）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

 

 

 

限制只能選擇圖片

 

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

 

限制只能選擇視頻

 

<input type="file" accept="video/*">

 

 

限制只能選擇音頻

 

<input type="file" accept="audio/*">

 

 

直接打開攝像頭拍照

 

<input type="file" accept="image/*" capture="camera">

 

直接打開攝像頭錄像

 

<input type="file" accept="video/*" capture="camera">