整合營(yíng)銷服務(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測(cè)試發(fā)現(xiàn)根本不行， 后來(lái)恍然大悟，用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表示，直接打開(kāi)系統(tǒng)文件目錄。
其實(shí)html5的input:file標(biāo)簽還支持一個(gè)multiple屬性，表示可以支持多選，如：
<input type="file" accept="image/*" multiple>
加上這個(gè)multiple后，capture就沒(méi)啥用了，因?yàn)閙ultiple是專門(mén)yong用來(lái)支持多選的。
切圖社區(qū)（qietu.cn）原創(chuàng)。
兩天發(fā)布了一篇關(guān)于利用html5在手機(jī)端進(jìn)行撥號(hào)和發(fā)送短信的教程，今天再說(shuō)一下利用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 屬性
著web功能越來(lái)越強(qiáng)大，我們很多時(shí)候需要在web頁(yè)面來(lái)獲取攝像頭進(jìn)行操作，原生html5提供了對(duì)攝像頭的支持，需要用戶的同意授權(quán)，下面是一個(gè)基于 HTML5 的調(diào)用攝像頭拍照并上傳后臺(tái)的示例代碼：
html復(fù)制代碼<!DOCTYPE html>
<html>
<head>
<title>拍照上傳</title>
</head>
<body>
<video id="video" style="width:300px;height:200px;"></video>
<br>
<button id="btn-start">啟動(dòng)攝像頭</button>
<button id="btn-stop">停止攝像頭</button>
<button id="btn-capture">拍照上傳</button>
<br>
<canvas id="canvas"></canvas>
<form id="form-upload" method="post" enctype="multipart/form-data">
<input type="file" id="input-file" name="file"/>
</form>
<script type="text/javascript">
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 啟動(dòng)攝像頭
document.getElementById('btn-start').addEventListener('click', function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
}).then(function(stream) {
video.srcObject = stream;
}).catch(function(err) {
console.log("啟動(dòng)攝像頭失敗：" + err);
});
});
// 停止攝像頭
document.getElementById('btn-stop').addEventListener('click', function() {
video.pause();
video.srcObject.getTracks()[0].stop();
video.srcObject = null;
});
// 拍照，并上傳到后臺(tái)
document.getElementById('btn-capture').addEventListener('click', function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
canvas.toBlob(function(blob) {
var formData = new FormData();
formData.append('file', blob, 'photo.jpg');
postRequest('/upload', formData, function(res) {
alert(res.message);
});
}, 'image/jpeg');
});
// 發(fā)送 POST 請(qǐng)求
function postRequest(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
callback(res);
}
};
xhr.send(data);
}
</script>
</body>
</html>
上述代碼主要分為以下幾個(gè)部分：
最后，需要注意的是，在本地調(diào)試和開(kāi)發(fā)時(shí)，特別是在 Windows 操作系統(tǒng)下使用 Chrome 瀏覽器訪問(wèn)時(shí)，可能會(huì)遇到攝像頭不能正常運(yùn)行的情況。這時(shí)可以打開(kāi)地址欄，在目標(biāo)請(qǐng)求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 參數(shù)（其中端口號(hào)需替換成實(shí)際的本地服務(wù)端口），即可獲得權(quán)限，進(jìn)行攝像頭使用。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
