<!DOCTYPE html>
<html lang="en">
<head>
<title>js調用攝像頭拍照上傳圖檔</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="openMedia()">開啟攝像頭</button>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button onclick="takePhoto()">拍照</button>
<img id="imgTag" src="" alt="imgTag">
<button onclick="closeMedia()">關閉攝像頭</button>
<script>
let mediaStreamTrack=null; // 視訊對象(全局)
let video ;
function openMedia() {
let constraints = {
video: { width: 500, height: 500 },
audio: false
};
//獲得video攝像頭
video = document.getElementById(\'video\');
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then((mediaStream) => {
// mediaStreamTrack = typeof mediaStream.stop === \'function\' ? mediaStream : mediaStream.getTracks()[1];
mediaStreamTrack=mediaStream.getVideoTracks()
video.srcObject = mediaStream;
video.play();
});
}
// 拍照
function takePhoto() {
//獲得Canvas對象
let video = document.getElementById(\'video\');
let canvas = document.getElementById(\'canvas\');
let ctx = canvas.getContext(\'2d\');
ctx.drawImage(video, 0, 0, 500, 500);
// toDataURL --- 可傳入\'image/png\'---預設, \'image/jpeg\'
let img = document.getElementById(\'canvas\').toDataURL();
// 這裡的img就是得到的圖檔
console.log(\'img-----\', img);
document.getElementById(\'imgTag\').src=img;
//上傳 $.ajax({
url:"/xxxx.do"
,type:"POST"
,data:{"imgData":img}
,success:function(data){
console.log(data);
document.gauges.forEach(function(gauge) {
gauge.value =data.data
});
}
,error:function(){
console.log("服務端異常！");
}
});
}
// 關閉攝像頭
function closeMedia() {
let stream = document.getElementById(\'video\').srcObject;
let tracks = stream.getTracks();
tracks.forEach(function(track) {
track.stop();
});
document.getElementById(\'video\').srcObject = null;
}
</script>
</body>