Di postingan ini akan saya bagikan full script html dan JavaScript yang berguna untuk menggambil jepretan foto/gambar dari webcam/kamera laptop/pc maupun hp, yang mana hasil jepretan itu akan muncul pada elemen Canvas di halaman web percobaan kita. Kamu bisa klik kanan lalu save untuk mendownloadnya.
Berikut ini source codenya:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial OmPuter</title>
<style>
body{
background-color: gray;
}
</style>
</head>
<body>
<video id="webcamVideo" width="854" height="480" style="border: 1px black solid;" autoplay></video>
<canvas id="webcamCanvas" width="854" height="480" style="border: 1px black solid;"></canvas>
<button onclick="startCamera();">Mulai Kamera</button>
<button onclick="ambilGambar();">Ambil Gambar</button>
<script>
var wVideo = document.querySelector("#webcamVideo");
var wCanvas = document.querySelector("#webcamCanvas");
async function startCamera(){
var stream = null;
try{
stream = await navigator.mediaDevices.getUserMedia({ video : true, audio : false });
}catch(error){
alert(error.message);
return;
}
wVideo.srcObject = stream;
}
function ambilGambar(){
wCanvas.getContext("2d").drawImage(wVideo, 0, 0, 854, 480);
var imageData = wCanvas.toDataURL("image/jpeg");
console.log(imageData);
}
</script>
</body>
</html>