js呼叫攝像頭拍照,js呼叫攝像頭線上拍照,js呼叫電腦攝像頭拍照
阿新 • • 發佈：2018-11-16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人臉採集</title>
<script src="jquery.min.js"></script>
</head>
<body>
<video src="" id="video"></video>
<button id="rec">開始錄製</button>
<!--canvs繪製-->
<canvas width="640" height="480" id="outrec"></canvas>
<!--base64繪製-->
<img id="imgvideo" style="display:none;" width="640" height="480" src="" />
<script type="text/javascript">
var video = document.getElementById("video"); //視訊dom元素
$('#rec').click(function() {
//視訊獲取
var Devicestate = navigator.mediaDevices.getUserMedia({
video: true
})
Devicestate.then(function(mediaStream) {
video.src = window.URL.createObjectURL(mediaStream);
console.log(mediaStream)
video.onloadedmetadata = function(e) {
};
});
//使用者拒絕使用,或者沒有攝像頭
Devicestate.catch(function(err) {
console.log(err.name);
});
});
//002.點選拍照按鈕
$('#camera').click(function() {
//視訊轉換到canvs
var outrec = document.getElementById("outrec");
var outreccon = outrec.getContext("2d");
outreccon.drawImage(video, 0, 0, 640, 480);
var img = outrec.toDataURL("image/jpeg", 0.5)
$('#imgvideo').attr('src', img);
// 呼叫方式
// 引數一： 選擇器，代表canvas
// 引數二： 圖片名稱，可選
downloadCanvasIamge('#outrec', 'imgvideo');
//關閉攝像視窗頁面
setTimeout(function(){
custom_close();
},1100);
});
// 下載Canvas元素的圖片
function downloadCanvasIamge(selector, name) {
// 通過選擇器獲取canvas元素
var canvas = document.querySelector(selector)
// 使用toDataURL方法將影象轉換被base64編碼的URL字串
var url = canvas.toDataURL('image/jpeg')
// 生成一個a元素
var a = document.createElement('a')
// 建立一個單擊事件
var event = new MouseEvent('click')
// 將a的download屬性設定為我們想要下載的圖片名稱，若name不存在則使用‘下載圖片名稱’作為預設名稱
a.download = name || '下載圖片名稱'
// 將生成的URL設定為a.href屬性
a.href = url
// 觸發a的單擊事件
a.dispatchEvent(event)
}
//關閉攝像視窗頁面
function custom_close(){
if(confirm("攝像拍照成功，確認是否關閉本視窗")){
//delete_file();
window.opener=null;
window.open('','_self');
window.close();
}else{
}
}
//關閉視窗之後刪除下載的圖片檔案，ActiveXObject物件只能在IE瀏覽器建立
/*function delete_file(){
alert("刪除檔案");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var imgHandle = fso.GetFile("C:\\Users\\yuzhangwei\\Downloads\\imgvideo.jpg");
imgHandle.Delete();
}*/
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>人臉採集</title>
<script src="jquery.min.js"></script>
</head>
<body>
<video src="" id="video"></video>
<button id="rec">開始錄製</button>
<!--canvs繪製-->
<canvas width="640" height="480" id="outrec"></canvas>
<!--base64繪製-->
<img id="imgvideo" style="display:none;" width="640" height="480" src="" />
<script type="text/javascript">
var video = document.getElementById("video"); //視訊dom元素
$('#rec').click(function() {
//視訊獲取
var Devicestate = navigator.mediaDevices.getUserMedia({
video: true
})
Devicestate.then(function(mediaStream) {
video.src = window.URL.createObjectURL(mediaStream);
console.log(mediaStream)
video.onloadedmetadata = function(e) {
};
});
//使用者拒絕使用,或者沒有攝像頭
Devicestate.catch(function(err) {
console.log(err.name);
});
});
//002.點選拍照按鈕
$('#camera').click(function() {
//視訊轉換到canvs
var outrec = document.getElementById("outrec");
var outreccon = outrec.getContext("2d");
outreccon.drawImage(video, 0, 0, 640, 480);
var img = outrec.toDataURL("image/jpeg", 0.5)
$('#imgvideo').attr('src', img);
// 呼叫方式
// 引數一： 選擇器，代表canvas
// 引數二： 圖片名稱，可選
downloadCanvasIamge('#outrec', 'imgvideo');
//關閉攝像視窗頁面
setTimeout(function(){
custom_close();
},1100);
});
// 下載Canvas元素的圖片
function downloadCanvasIamge(selector, name) {
// 通過選擇器獲取canvas元素
var canvas = document.querySelector(selector)
// 使用toDataURL方法將影象轉換被base64編碼的URL字串
var url = canvas.toDataURL('image/jpeg')
// 生成一個a元素
var a = document.createElement('a')
// 建立一個單擊事件
var event = new MouseEvent('click')
// 將a的download屬性設定為我們想要下載的圖片名稱，若name不存在則使用‘下載圖片名稱’作為預設名稱
a.download = name || '下載圖片名稱'
// 將生成的URL設定為a.href屬性
a.href = url
// 觸發a的單擊事件
a.dispatchEvent(event)
}
//關閉攝像視窗頁面
function custom_close(){
if(confirm("攝像拍照成功，確認是否關閉本視窗")){
//delete_file();
window.opener=null;
window.open('','_self');
window.close();
}else{
}
}
//關閉視窗之後刪除下載的圖片檔案，ActiveXObject物件只能在IE瀏覽器建立
/*function delete_file(){
alert("刪除檔案");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var imgHandle = fso.GetFile("C:\\Users\\yuzhangwei\\Downloads\\imgvideo.jpg");
imgHandle.Delete();
}*/
</script>
</body>
</html>