在切圖網一個客戶的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

限制只能選擇圖片

[html] view plain copy

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

限制只能選擇視訊

[html] 

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

限制只能選擇音訊

[html] view plain copy

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

直接開啟攝像頭拍照

[html] view plain

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

直接開啟攝像頭錄影

[html] view plain copy

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