WebCam Take Screenshot with JavaScript

Feri Rimanda Juni 02, 2021

 




Bagimana cara mengaktifkan fungsi WebCam di PC atau laptop untuk take screenshot dengan menggunakan javascript dan HTML? Sebelumnya buatlah sebuah project directory dengan nama sswebcam. Untuk membuat sebuah aplikasi sederhana ini kita hanya perlu membuat 2 buah file yaitu index.html dan index.css

Langkah 1. Buatlah sebuah file dengan nama index.html kemudian isi dengan script berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- link css -->
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>WebCam Screenshot</title>
</head>
<body>
    <h1 style="text-align: center;">WebCam Screenshot</h1>
    
    <div class="buttons">
        <button onclick="startWebcam()">Nyalakan Kamera</button>
        <button onclick="takeScreenshot()">Tangkap Layar</button>
    </div>
    
    <video id="webcam-vid" autoplay="true"></video>
    <div id="screenshots"></div>
    </body>
</html>
<script type="text/javascript">
    // ambil id dari element video
    const videoEl = document.getElementById('webcam-vid')
    // ambil id screenshot
    const screenshotsEl = document.getElementById('screenshots')
    // varibale kosong untuk menyimpan hasil screenshoot
    let imageCapture

    // jika tombol nyalakan kamera di klik, jalankan webCam
    const startWebcam = () => {
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices
                .getUserMedia({ video: true })
                .then(stream => {
                    videoEl.srcObject = stream
                    imageCapture = new ImageCapture(stream.getVideoTracks()[0])
                })
                .catch(err => {
                    console.log('Ada sesuatu yang salah', err)
                })
        }
    }

    // jika tombol tangkap layar di klik, ambil screenshot
    const takeScreenshot = () => {
        imageCapture.takePhoto().then(blob => {
            const img = document.createElement('img')
            img.src = window.URL.createObjectURL(blob)
            screenshotsEl.appendChild(img)
        })
    }
</script>



Langkah 2. Buatlah sebuah file dengan nama index.css kemudian isi dengan script berikut:
.buttons {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

button {
  background-color: #4605ff;
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
}

video {
  width: 525px;
  height: 400px;
  display: block;
  margin: 3rem auto;
}

#screenshots {
  display: flex;
  justify-content: center;
}

#screenshots img {
  max-width: 100%;
  width: 17rem;
  margin-right: 1.5rem;
  border-radius: 4px;
}

Jika sudah, buka browser ketik url: http://localhost/sswebcam/

Demo Program




Tags
Reactions
Feri Rimanda

Diposting oleh Feri Rimanda

Take action miracle happen. No action nothing happen

Posting Komentar

1 Komentar