<!--
--  Uploaded on : https://haxor.my.id/open/Photo.html
--  Official Web : https://prinsh.com
--  script-deface-generator.prinsh.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webcam App</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <br />
    <button id="snap">Ambil Foto</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
      const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');

// Untuk meminta izin pengguna untuk mengakses webcam
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
    video.srcObject = stream;
    video.play();
});

// Ketika tombol "Ambil Foto" diklik, gambar dari video diambil dan ditampilkan pada elemen canvas
snap.addEventListener("click", function() {
    canvas.getContext("2d").drawImage(video, 0, 0, 640, 480);
});
    </script>
</body>
</html>