Cara Mengakses Kamera Smartphone dan Webcam Pada Web dengan HTML 5 JS

Satria Perwira    6/09/2018    Programming   

Artikel kali ini kita akan membahas bagaimana mengakses kamera webcam dan smartphone pada aplikasi berbasis web dengan HTML5 dan javascript. Saat ini aplikasi berbasis website sudah berkembang sangat pesat, fitur-fitur yang disediakan sangat interfaktif dan menarik untuk digunakan. Misal saja sistem absensi sekaligus mencapture/mefoto seseorang yang melakukan absensi agar tidak terjadi kecurangan dan masih banyak aplikasi-aplikasi web yang membutuhkan fitur pengaksesan kamera.

Sehingga, sekarang kita akan mencoba menerapkan penggunakan kamera pada sistem aplikasi berbasis web dengan menggunakan HTML5 dan javascript.

Pertama, kita akan menambahkan tag video (HTML5) sebagai media merekam aktivitas didepan kamera, yaitu dengan menggunakan kode berikut :

<video id="video" width="425" height="300" autoplay></video>
<button id="snap">Ambil Gambar</button>

Kedua, kita akan menangkap hasil capture (hasil foto) dari kamera kedalam canvas (HTML5) menggunakan kode berikut :

<canvas id="canvas" width="425" height="300"></canvas>
<img src="" id="gambare">
<button id="save">Simpan Gambar</button>

Ketiga, kita akan menambahkan javascript sebagai pengeksekusi dari setiap aktivitas capturing gambar, berikut ini script dari javascriptnya tambahkan diatas kode </body> :

<script type="text/javascript">
   
    // Grab elements, create settings, etc.
    var video = document.getElementById('video');

    // Get access to the camera!
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Not adding `{ audio: true }` since we only want video now
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });
    }

    // Elements for taking the snapshot
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');

    // Trigger photo take
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 425, 300);
    });
    document.getElementById("save").addEventListener("click", function() {
            var canvas = document.getElementById('canvas');
            var dataURL = canvas.toDataURL();
            $.ajax({
              type: "POST",
              url: "pengguna/simpangambar.php", // ini adalah fungsi file php simpan gambar
              data: {
                 imgBase64: dataURL
              }
            }).done(function(o) {
                window.location.replace("pengguna.php");
              console.log('saved');
            });
    });
</script>

Keempat, menangkap hasil pengiriman data pada method post fungsi simpangambar.php :

<?php
        // requires php5
        define('UPLOAD_DIR', 'assets/images/');
        $img = $_POST['imgBase64'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $namafile = uniqid() . '.png';
        $file = UPLOAD_DIR . $namafile;
        $success = file_put_contents($file, $data);
       
        print $success ? $file : 'Unable to save the file.';
        echo $namafile;
?>

Selesai, gambar telah disimpan kedalam folder assets/images/ (sesuaikan aplikasi anda), dengan nama yang telah ditampilkan pada variabel $namafile

Demikian tips Cara Mengakses Kamera Smartphone dan Webcam Pada Web dengan HTML 5 JS, semoga bermanfaat bagi anda. Sampai ketemu di artikel selanjutnya dan jangan lupa KLIK IKLAN DIBAWAH atau DIATAS sehingga penulis lebih bersemangat dalam mengupdate artikel menarik. Terima kasih

oleh Dafizara