Cara Capture Gambar dari Webcam HTML

Selamat datang di sistemit.com sebelumnya saya telah membuat tutorial mengenai Cara Mengakses Webcam di Web PHP HTML JAVASCRIPT. Kali ini saya akan kembali share bagaimana mengcapture gambar dengan webcam melalui web html dan javascript. Namun kali ini dengan kode yang lebih simple dibanding sebelumnya.

Capture image dengan php dan javascript sangat penting untuk keperluan penyimpanan data gambar.

Baik langsung saja kita menuju tutorial nya

Langkah 1
Download dan include library js.
jangan lupa download library bernama webcam.min.js
Download melalui link berikut :

GITHUB

Langkah 2

Buatlah file bernama index.php atau index.html sebagai berikut :

<!-- CSS -->
<style>
#my_camera{
    width: 320px;
    height: 240px;
    border: 1px solid black;
}
</style>

<!-- -->
 <div id="my_camera"></div>
 <input type=button value="Configure" onClick="configure()">
 <input type=button value="Take Snapshot" onClick="take_snapshot()">
 <input type=button value="Save Snapshot" onClick="saveSnap()">
 
 <div id="results" ></div>
 
 <!-- Script -->
 <script type="text/javascript" src="webcamjs/webcam.min.js"></script>

 <!-- Kode untuk snapshot dan menampilkan picture -->
 <script language="JavaScript">
 
 // Konfigurasi dan pengaturan kamera
 function configure(){
    Webcam.set({
       width: 320,
       height: 240,
       image_format: 'jpeg',
       jpeg_quality: 90
    });
    Webcam.attach( '#my_camera' );
 }
 // Tombol untuk menangkap

 // preload shutter audio clip
 var shutter = new Audio();
 shutter.autoplay = false;
 shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

 function take_snapshot() {
    // play sound effect
    shutter.play();

    //  snapshot dan mendapatkan data gambar
    Webcam.snap( function(data_uri) {
       // display results in page
       document.getElementById('results').innerHTML = 
           '<img id="imageprev" src="'+data_uri+'"/>';
     } );

     Webcam.reset();
 }

function saveSnap(){
   // Get base64 value from <img id='imageprev'> source
   var base64image = document.getElementById("imageprev").src;

   Webcam.upload( base64image, 'upload.php', function(code, text) {
        console.log('Save successfully');
       //console.log(text);
   });

}
</script>

Note : Jangan lupa sesuaikan akses link library sesuai dengan posisi webcam.min.js berada.

Langkah 3
buatlah file bernama upload.php dengan kode sebagai berikut :

<?php

// new filename
$filename = 'pic_'.date('YmdHis') . '.jpeg';

$url = '';
if( move_uploaded_file($_FILES['webcam']['tmp_name'],'upload/'.$filename) ){
   $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/upload/' . $filename;
}

// Return image url
echo $url;

?>

Catatan : sesuaikan protokol apakah http atau https

Selesai

LIHAT DEMO DISINI

Kode diatas hanya support untuk browser terupdate. Jika tidak berjalan kemungkinan kode javascript tidak cocok dengan browser yang anda gunakan.

Bagi anda yang berminat untuk memesan sistem informasi berbasis website dapat menghubungi kontak berikut :

Related posts