Capture Webcam dan Simpan ke Database dengan PHP

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
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>";
 }
?>

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

14 comments

comments
11 October 2014 at 17:13 delete

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

Reply
avatar
16 February 2015 at 09:18 delete

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

Reply
avatar
Anonymous
6 March 2015 at 15:25 delete

ga bermutu kurang complete tutorialnya

Reply
avatar
Anonymous
22 April 2015 at 17:39 delete

tq bro.. mantap

Reply
avatar
4 May 2015 at 16:26 delete

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

Reply
avatar
28 July 2015 at 16:40 delete

kalau diambil gambarnya lewat button bisa gk gan ? gmna caranya?

Reply
avatar
Anonymous
7 October 2015 at 06:02 delete

sya sdah tapi kok tdak bisa ya

Reply
avatar
10 November 2015 at 08:55 delete

Cara memperbesar imgae hasil capturenya bagaimana bos?

Reply
avatar
6 January 2016 at 14:39 delete

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

Reply
avatar
22 January 2016 at 10:53 delete

mas bagi tutorialnya yang complete donk.

Reply
avatar
13 July 2016 at 09:05 delete

Shockwave Flash Object nya gk bisa dibuka min

Reply
avatar
7 September 2016 at 15:50 delete

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

Reply
avatar
12 October 2016 at 14:34 delete

link nya udah gk bisa gan ? mau download error shockwavenya

Reply
avatar

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.