整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
切圖網(wǎng)一個客戶的webapp項目中需要用到 html5調(diào)用手機攝像頭，找了很多資料，大都是 js調(diào)用api 然后怎樣怎樣，做了幾個demo測試發(fā)現(xiàn)根本不行， 后來恍然大悟，用html5自帶的 input file="" ，純html5，并且不涉及到j(luò)s ，就可以實現(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)默認的設(shè)備，比如：camera--照相機；camcorder--攝像機；microphone--錄音。
accept表示，直接打開系統(tǒng)文件目錄。
其實html5的input:file標(biāo)簽還支持一個multiple屬性，表示可以支持多選，如：
<input type="file" accept="image/*" multiple>
加上這個multiple后，capture就沒啥用了，因為multiple是專門yong用來支持多選的。
切圖社區(qū)（qietu.cn）原創(chuàng)。
兩天發(fā)布了一篇關(guān)于利用html5在手機端進行撥號和發(fā)送短信的教程，今天再說一下利用html5在手機端調(diào)用攝像頭以及錄音的教程
在html5中可以利用type類型為file的input的標(biāo)簽調(diào)起手機的攝像頭
例：html5調(diào)用手機攝像頭進行拍照
<input type="file" accept="image/*" capture="camera">
例：html5調(diào)用手機攝像頭進行錄像
<input type="file" accept="video/*" capture="camera">
input 標(biāo)簽，不僅僅可以調(diào)用起手機的攝像頭，還可以錄音呢
例：
<input type="file" accept="audio/*" capture="microphone">
input accept 屬性
accept屬性可以限制可用文件的類型，當(dāng) input 標(biāo)簽的 type 屬性為 file 時，可以規(guī)定服務(wù)器所接受的文件類型
例如：
accept="audio/*" 表示所有音頻文件 accept="video/*" 表示視頻文件 accept="image/"* 表示圖片文件
當(dāng)然你也可以使用文件后綴名的形式
例：
accept="image/png* 表示只接收后綴名為 png 的圖片 accept="image/jpg* 表示只接收后綴名為 jpg 的圖片 accept=".png, .jpg, .jpeg" 表示可以同時接收 png jpg jpeg 后綴的文件
input capture 屬性
著web功能越來越強大，我們很多時候需要在web頁面來獲取攝像頭進行操作，原生html5提供了對攝像頭的支持，需要用戶的同意授權(quán)，下面是一個基于 HTML5 的調(diào)用攝像頭拍照并上傳后臺的示例代碼：
html復(fù)制代碼<!DOCTYPE html>
<html>
<head>
<title>拍照上傳</title>
</head>
<body>
<video id="video" style="width:300px;height:200px;"></video>
<br>
<button id="btn-start">啟動攝像頭</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');
// 啟動攝像頭
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("啟動攝像頭失敗：" + err);
});
});
// 停止攝像頭
document.getElementById('btn-stop').addEventListener('click', function() {
video.pause();
video.srcObject.getTracks()[0].stop();
video.srcObject = null;
});
// 拍照，并上傳到后臺
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 請求
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>
上述代碼主要分為以下幾個部分：
最后，需要注意的是，在本地調(diào)試和開發(fā)時，特別是在 Windows 操作系統(tǒng)下使用 Chrome 瀏覽器訪問時，可能會遇到攝像頭不能正常運行的情況。這時可以打開地址欄，在目標(biāo)請求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 參數(shù)（其中端口號需替換成實際的本地服務(wù)端口），即可獲得權(quán)限，進行攝像頭使用。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
