Anda di halaman 1dari 6

Cara membuat capture gambar dengang

webcam.js, php, mysql simpan ke


databse+source code
zidni ridwan nul muarif 03.18

Membuat capture gambar dengan js. php dan save ke database


+ sorce kode
Ya udah lama gak posting karena banyak kesibukan nih (sok sibuk hehehe..)

ya kali ini saya kan berbagi tutorial gimana cara mengcapture gambar dengan webca.js pertama anda
download webcam . js kemudian ekstrak filenya di htdocs akan ada file webcam.js, webcam,swf..
oke langsung saja kita buat pertama

1.buat database dengan nama webcam, tabelnya entry dan buat colom 3
*id int(11) auto increment
*name varchar(200)
*images (200)

2.lalu kiat buat folder "images" untuk menyimpan file yang di upload
3.buat index.php, conection.php dan handleimage.php

langsung saja
connencton.php
<?php
$host="localhost";
$user="root";
$password="";
$databasename="webcam";

$con= mysqli_connect($host,$user,$password,$databasename);

?>

index.php
<style type="text/css">
body{
margin:0;
padding:0;
}
.img
{ background:#ffffff;
padding:12px;
border:1px solid #999999; }
.shiva{
-moz-user-select: none;
background: #2A49A5;
border: 1px solid #082783;
box-shadow: 0 1px #4C6BC7 inset;
color: white;
padding: 3px 5px;
text-decoration: none;
text-shadow: 0 -1px 0 #082783;
font: 12px Verdana, sans-serif;}
</style>
<html>
<body style="background-color:#dfe3ee;">
<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
</div>
<div id="main" style="height:800px; width:100%">
<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;"
align="center">
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
document.write( webcam.get_html(440, 240) );
</script>
<form>
<br />

<input type=button value="Ulang" onClick="webcam.reset()" class="shiva">


&nbsp;&nbsp;
<input type=button value="Take Snapshot" onClick="take_snapshot()" class="shiva">

</form>

</div>

<script type="text/javascript">
webcam.set_api_url( 'handleimage.php' );
webcam.set_quality( 90 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot(){
// take snapshot and upload to server
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';

webcam.snap();
}

function my_completion_handler(msg) {
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
// show JPEG image in page

document.getElementById('img').innerHTML ='<h3>Upload Successfuly


done</h3>'+msg;

document.getElementById('img').innerHTML ="<img src="+msg+" class=\"img\">";

// reset camera for another shot


webcam.reset();
}
else {alert("Error occured we are trying to fix now: " + msg); }
}
</script>

<div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">


</div>
</div>
</body>
</html>
handleimage.php

<?php
session_start();
include 'connection.php';
$name = date('YmdHis');
$newname="images/".$name.".jpg";
$file = file_put_contents( $newname, file_get_contents('php://input') );
if (!$file) {
print "ERROR: Failed to write data to $filename, check permissions\n";
exit();
}
else
{
$sql="Insert into entry(images) values('$newname')";
$result=mysqli_query($con,$sql)
or die("Error in query");
$value=mysqli_insert_id($con);
$_SESSION["myvalue"]=$value;
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' .


$newname;
print "$url\n";

?>

jika yang mau sorce code udah lengkap ada. webcam.js, webcam.swf juga uda ada webcam.mysql
bisa :Unduh disini
nama foldernya Alhamdulillah_capture tinggal di ekstrak aja.
sekian moga bermanfaat