兩天發(fā)布了一篇關(guān)于利用html5在手機(jī)端進(jìn)行撥號和發(fā)送短信的教程，今天再說一下利用html5在手機(jī)端調(diào)用攝像頭以及錄音的教程

HTML5 調(diào)用手機(jī)攝像頭

在html5中可以利用type類型為file的input的標(biāo)簽調(diào)起手機(jī)的攝像頭

例：html5調(diào)用手機(jī)攝像頭進(jìn)行拍照

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

例：html5調(diào)用手機(jī)攝像頭進(jìn)行錄像

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

HTML5 進(jìn)行手機(jī)錄音

input 標(biāo)簽，不僅僅可以調(diào)用起手機(jī)的攝像頭，還可以錄音呢

例：

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

input代碼解析

input accept 屬性

accept屬性可以限制可用文件的類型，當(dāng) input 標(biāo)簽的 type 屬性為 file 時(shí)，可以規(guī)定服務(wù)器所接受的文件類型

例如：

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

當(dāng)然你也可以使用文件后綴名的形式

例：

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

input capture 屬性

切圖公司一個(gè)項(xiàng)目中碰到一個(gè)類似蘋果手機(jī)上SIRI 機(jī)器人的項(xiàng)目制作，所以首先想到的是html5 有個(gè)audio標(biāo)簽，于是找到了一個(gè)有用的demo。

最后項(xiàng)目順利完成。附demo

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

---

關(guān)注我們，我們將附送我們工作中的非常多的實(shí)用的demo。

ad~

只教web前端實(shí)戰(zhàn)的切圖學(xué)院（qietu.org）

目中需要用到 html5調(diào)用手機(jī)攝像頭，找了很多資料，大都是 js調(diào)用api ，做了幾個(gè)demo測試發(fā)現(xiàn)根本不行， 后來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到j(luò)s ，就可以實(shí)現(xiàn)。

代碼如下：

capture表示，可以捕獲到系統(tǒng)默認(rèn)的設(shè)備，比如：camera--照相機(jī)；camcorder--攝像機(jī)；microphone--錄音。

accept表示，直接打開系統(tǒng)文件目錄。

其實(shí)html5的input:file標(biāo)簽還支持一個(gè)multiple屬性，表示可以支持多選，如：

加上這個(gè)multiple后，capture就沒啥用了，因?yàn)閙ultiple是專門用來支持多選的。