Cara membuat capture gambar dengang webcam.js, php, mysql simpan ke databse+source code

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.
 
  


 

Share this

Related Posts

Previous
Next Post »

1 komentar:

komentar
hsa
23 November 2017 16.09 delete

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?

Reply
avatar

Berita Unik

loading...