整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
切圖網(wǎng)一個(gè)客戶的webapp項(xiàng)目中需要用到 html5調(diào)用手機(jī)攝像頭，找了很多資料，大都是 js調(diào)用api 然后怎樣怎樣，做了幾個(gè)demo測試發(fā)現(xiàn)根本不行， 后來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到j(luò)s ，就可以實(shí)現(xiàn)。代碼如下：
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
capture表示，可以捕獲到系統(tǒng)默認(rèn)的設(shè)備，比如：camera--照相機(jī)；camcorder--攝像機(jī)；microphone--錄音。
accept表示，直接打開系統(tǒng)文件目錄。
其實(shí)html5的input:file標(biāo)簽還支持一個(gè)multiple屬性，表示可以支持多選，如：
<input type="file" accept="image/*" multiple>
加上這個(gè)multiple后，capture就沒啥用了，因?yàn)閙ultiple是專門yong用來支持多選的。
切圖社區(qū)（qietu.cn）原創(chuàng)。
司項(xiàng)目需要調(diào)用攝像頭，看了一下html5文檔，主要是使用html5的getUserMedia()API，寫一個(gè)例子來記錄具體的使用方法。
<html>
<body>
<!-- 用于展示攝像頭視頻流 -->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
<button id="capture" onclick="handleClickCapture()">拍照</button>
</div>
<!-- 展示拍攝的照片 -->
<canvas id="canvas" width="480" height="320"></canvas>
<script>
var video = document.getElementById('video');
var capture = document.getElementById('capture');
var ctx = document.getElementById('canvas').getContext('2d');
/**
* 調(diào)用用戶媒體設(shè)備
* @param constraints 配置信息
* @param success 成功回調(diào)函數(shù)
* @param error 失敗回調(diào)函數(shù)
*/
function getUserMediaToPhoto(constraints,success,error) {
if(navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
}else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(constraints,success,error);
}else if(navigator.mozGetUserMedia){
navigator.mozGetUserMedia(constraints,success,error);
}else if(navigator.getUserMedia){
navigator.getUserMedia(constraints,success,error);
}
}
/**
* 成功回調(diào)函數(shù)
* @param stream 視頻流
*/
function success(stream){
var CompatibleURL = window.URL || window.webkitURL;
try {
video.src = CompatibleURL.createObjectURL(stream);
} catch (e) {
video.srcObject = stream;
}
video.play();
}
/**
* 失敗回調(diào)
* @param error 錯(cuò)誤對象
*/
function error(error) {
console.log('無法訪問媒體設(shè)備', error);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({video:{width:480,height:320}},success,error);
}else{
alert('不支持訪問用戶媒體設(shè)備');
}
/**
* 拍照按鈕點(diǎn)擊事件
*/
function handleClickCapture() {
ctx.drawImage(video,0,0,480,320);
}
</script>
</body>
</html>
實(shí)現(xiàn)了基本的攝像頭調(diào)用和拍照，實(shí)現(xiàn)思路非常簡單，基本上只是在調(diào)用api，唯一惡心的地方在于api版本比較多，不得不多做一些判斷。具體的api介紹、使用和參數(shù)可以查看MediaDevices.getUserMedia()。
兩天發(fā)布了一篇關(guān)于利用html5在手機(jī)端進(jìn)行撥號和發(fā)送短信的教程，今天再說一下利用html5在手機(jī)端調(diào)用攝像頭以及錄音的教程
在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">
input 標(biāo)簽，不僅僅可以調(diào)用起手機(jī)的攝像頭，還可以錄音呢
例：
<input type="file" accept="audio/*" capture="microphone">
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 屬性
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
