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