Capture Webcam dan Simpan ke Database dengan PHP

Saat ini Aplikasi-Aplikasi keren rata-rata sudah dilengkapi dengan utilitas yang mampu melakukan Capture pada webcam. Sebut saja Facebook dan beberapa aplikasi chating seperti Line ataupun Instagram. Oleh karena itu pada postingan ini saya ingin berbagi bagaimana melakukan capture Webcam dengan JQuery dan menampilkan hasilnya serta menyimpannya kedalam tabel database mysql. Sebagai gambaran, hasilnya adalah sebagai berikut

Source Code Capture Webcam dan Simpan ke Database dengan JQuery

Langkah Membuat Capture Webcam dengan PHP

1.  Buat Sebuah Database dengan Struktur Sebagai berikut 

Capture Webcam dan Simpan ke Database dengan PHP

2. Download Shockwave Flash Object disini kemudian Extrack kedalam folder projek anda. 

3. Buat sebuah file untuk melakukan koneksi kedatabase berinama koneksi.php 

4. Berikut adalah contoh script index.php yang saya gunakan
<?php include "koneksi.php"; ?>

<html>
 <head>
  <title>Capture Webcam dengan JQuery</title>
 </head>
 
<body>
<!--Camera-->
<div style="margin-left:35%;">
<object width="300" height="200" data="croflash.swf" type="application/x-shockwave-flash">
<param name="data" value="croflash.swf" /><param name="src" value="croflash.swf" />
<embed src="croflash.swf" type="application/x-shockwave-flash"  width="300" height="300"></embed>
</object>
</div >
<!--Tampilkan data-->
 <div style="margin-left:25%; margin-top:20px">
 <table border="1" style="text-align:center;">
  <tr style="background-color:#ccc;"><td width='10px'>No</td><td width='250px'>Nama</td><td width='250px'>Gambar</td><td width='50px'>Aksi</td></tr>
  <?php $sql=mysql_query("select * from hasil"); 
     while($tampilkan = mysql_fetch_array($sql)){
  ?>
  <tr>
  <td><?php echo $tampilkan['id']; ?></td>
  <td><?php echo $tampilkan['nama']; ?></td>
  <td><img src="<?php echo $tampilkan['gambar']; ?>.png" width="150px" height="100px"/></td>
  <td><a href="hapus.php?id=<?php echo $tampilkan['id']; ?>">Hapus</a></td>
  </tr>
  <?php } ?>
 </table>
 </div>
</body>
</html>

5. Buat sebuah file dengan nama saveimg.php akan digunakan Untuk Menyimpan Gambar hasil capture saya menggunakan source code berikut
<?php
error_reporting(0);
$url = 'http://localhost/webcam';
/**
 * Get the width and height of the destination image
 * from the POST variables and convert them into
 * integer values
 */
$w = (int)$_POST['width'];
$h = (int)$_POST['height'];

// create the image with desired width and height

$img = imagecreatetruecolor($w, $h);

// now fill the image with blank color
// do you remember i wont pass the 0xFFFFFF pixels 
// from flash?
imagefill($img, 0, 0, 0xFFFFFF);

$rows = 0;
$cols = 0;

// now process every POST variable which
// contains a pixel color
for($rows = 0; $rows < $h; $rows++){
 // convert the string into an array of n elements
 $c_row = explode(",", $_POST['px' . $rows]);
 for($cols = 0; $cols < $w; $cols++){
  // get the single pixel color value
  $value = $c_row[$cols];
  // if value is not empty (empty values are the blank pixels)
  if($value != ""){
   // get the hexadecimal string (must be 6 chars length)
   // so add the missing chars if needed
   $hex = $value;
   while(strlen($hex) < 6){
    $hex = "0" . $hex;
   }
   // convert value from HEX to RGB
   $r = hexdec(substr($hex, 0, 2));
   $g = hexdec(substr($hex, 2, 2));
   $b = hexdec(substr($hex, 4, 2));
   // allocate the new color
   // N.B. teorically if a color was already allocated 
   // we dont need to allocate another time
   // but this is only an example
   $test = imagecolorallocate($img, $r, $g, $b);
   // and paste that color into the image
   // at the correct position
   imagesetpixel($img, $cols, $rows, $test);
  }
 }
}

$waktu = date("H-i-s");
$nama = 'gambar-'.$waktu;
// print out the correct header to the browser
header("Content-type:image/jpeg");
imagejpeg($img,$nama.".png", 90);

include "koneksi.php";
$gambar = $nama;
// Simpan Data ke Database
$sql = "INSERT INTO hasil (nama,gambar) VALUES ('".$nama."','".$gambar."')";
$simpan = mysql_query($sql);

header("location:".$url);

?>

6. Sedangkan untuk menghapus gambar script yang saya gunakan sebagai berikut
<?php 
 include "koneksi.php";
 // Hapus Gambar
 $query = mysql_query("select * from hasil where id = '".$_GET['id']."'"); 
  $hapus = mysql_fetch_array($query);
  $file = $hapus['gambar'].'.png';
  unlink($file);
  
 // Hapus Dari Tabel
 $sql = "DELETE FROM hasil WHERE id = '".$_GET['id']."'";
 $hapus = mysql_query($sql);
 if ($sql){
 echo "<script>alert('Data Berhasil di Hapus'); window.location = 'http://localhost/webcam';</script>";
 } else {
 echo "<script>alert('Gagal di Hapus'); window.location = 'http://localhost/webcam';</script>";
 }
?>

Post a Comment

18 Comments

  1. flash sama button di pisah gimana caranya gan.?
    ada nggak.?

    ReplyDelete
  2. maaf gan numpang nanya ini ada file flanya gk ya?
    makasih

    ReplyDelete
  3. ga bermutu kurang complete tutorialnya

    ReplyDelete
  4. tq bro.. mantap

    ReplyDelete
  5. saya coba tidak bisa jalan, atau ada contoh script lain?

    ReplyDelete
  6. kalau diambil gambarnya lewat button bisa gk gan ? gmna caranya?

    ReplyDelete
  7. sya sdah tapi kok tdak bisa ya

    ReplyDelete
  8. Cara memperbesar imgae hasil capturenya bagaimana bos?

    ReplyDelete
  9. gambar yg di capture gak masuk ke database gan. gimana ya?

    ReplyDelete
  10. mas bagi tutorialnya yang complete donk.

    ReplyDelete
  11. Shockwave Flash Object nya gk bisa dibuka min

    ReplyDelete
  12. maaf min, udh di coba dan berhasil.
    kalau mau ngatur lokasi penyimpanan gambarnya di mn ya ?

    ReplyDelete
    Replies
    1. boleh kirim link file projectnya yang sudah jadi?

      Delete
  13. link nya udah gk bisa gan ? mau download error shockwavenya

    ReplyDelete
  14. Salam kenal gan, gan mau tanya gemana caranya menyimpan gambarnya dari webcam berikut data seperti nama kedalam database dan juga tersimpan kedalam folder penyimpanan gambarnya?

    ReplyDelete
  15. http://sasmedia-indonesia.blogspot.com/

    ReplyDelete
  16. http://sasmedia-indonesia.blogspot.com/

    ReplyDelete

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.