html5 調用手機攝像頭以及錄音

兩天發布了一篇關于利用html5在手機端進行撥號和發送短信的教程，今天再說一下利用html5在手機端調用攝像頭以及錄音的教程

HTML5 調用手機攝像頭

在html5中可以利用type類型為file的input的標簽調起手機的攝像頭

例：html5調用手機攝像頭進行拍照

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

例：html5調用手機攝像頭進行錄像

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

input 標簽，不僅僅可以調用起手機的攝像頭，還可以錄音呢

例：

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

input accept 屬性

accept屬性可以限制可用文件的類型，當 input 標簽的 type 屬性為 file 時，可以規定服務器所接受的文件類型

例如：

accept="audio/*" 表示所有音頻文件
accept="video/*" 表示視頻文件
accept="image/"* 表示圖片文件

當然你也可以使用文件后綴名的形式

例：

accept="image/png* 表示只接收后綴名為 png 的圖片
accept="image/jpg* 表示只接收后綴名為 jpg 的圖片
accept=".png, .jpg, .jpeg" 表示可以同時接收 png jpg jpeg 后綴的文件

input capture 屬性

切圖公司一個項目中碰到一個類似蘋果手機上SIRI 機器人的項目制作，所以首先想到的是html5 有個audio標簽，于是找到了一個有用的demo。

最后項目順利完成。附demo

http://developer.qietu.com/html/f3/html5audio/

---

關注我們，我們將附送我們工作中的非常多的實用的demo。

ad~

只教web前端實戰的切圖學院（qietu.org）

目中需要用到 html5調用手機攝像頭，找了很多資料，大都是 js調用api ，做了幾個demo測試發現根本不行，后來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到js ，就可以實現。

代碼如下：

capture表示，可以捕獲到系統默認的設備，比如：camera--照相機；camcorder--攝像機；microphone--錄音。

accept表示，直接打開系統文件目錄。

其實html5的input:file標簽還支持一個multiple屬性，表示可以支持多選，如：

加上這個multiple后，capture就沒啥用了，因為multiple是專門用來支持多選的。

*請認真填寫需求信息，我們會在24小時內與您取得聯系。