Wednesday, February 12, 2014

working with webcam.js and php to upload images- learnmore i-visionblog.com

We all guys are fascinated towards uploading images via social networks by applications.Thus introduction of webcam made a lot of changes as such direct upload of images and video calling starting from skype to viber,hangouts in G+ plays a major role in the information sharing and visualizing.and this post will give a start up on the accessing webcam via browser and uploading using PHP and managing them with MySQL database in backend.

webcam.js - resource
                                                           
Let us create a table named images :
create a images folder before trying it.

CREATE TABLE IF NOT EXISTS `image` (
`images` varchar(1200) NOT NULL,
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(1000) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;


Let us Know about javascript functions of webcam.js
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
document.write( webcam.get_html(440, 240) );
</script>
this functions enable to show the cam in your browser.you can mention the size of the cam to present in your browser.
<script  type="text/javascript">
    webcam.set_api_url( 'handleimage.php' );
webcam.set_quality( 90 );
webcam.set_shutter_sound( true ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );

this function set initial value for API url to process our image and save in uploads.and other functions are just attribute such as sound,quality and calling the functions.
function take_snapshot(){
document.getElementById('img').innerHTML = '<h1>upload on progress</h1>';
webcam.snap();
}

This function is initiated when the user triggers the snap button.when the user clicks the button Just show loading status message and call the function webcam.snap() to capture the image through the webcam.

function my_completion_handler(msg) {
// this is used to extract the url php output
if (msg.match(/(http\:\/\/\S+)/)) {
//the above expression is to verify the match url output
document.getElementById('img').innerHTML ='<h3>Upload Successful</h3>'+msg;
    // show JPEG image in page
document.getElementById('img').innerHTML ="<img src="+msg+" class=\"img\">";
//initialize the camera once again
webcam.reset();
}
else {alert(" Error occured! we are right now down to take photoshoot : " + msg); }
}

This function is called to handle the error or success of image upload and helps to display image and initialize the webcam once again.
so now let us code for the backend handleimage.php
<?php
session_start();
$_SESSION['id']="1";
$id=$_SESSION['id'];
include 'connection.php';  //assume you have connected to database already.
$name = date('YmdHis');
$newname="images/".$name.".jpg";
$file = file_put_contents( $newname, file_get_contents('php://input') );
if (!$file) {
print "Error occured here";
exit();
}
else
{
    $sql="insert into image (id,name,images) values ('','$id'.'$newname')";
    $result=mysqli_query($con,$sql);
    $value=mysqli_insert_id($con);
    $_SESSION["myvalue"]=$value;

}
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $newname;
print "$url\n";
?>
This enables to get your image file using the file_get_contents().here is a small explanation php://input -read article here.
and adding the image path to the database table with id,name and path.and we are just printing the url of the image with our environment variables in PHP.
so,now let us design our index.php.
<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="Configure settings" onClick="webcam.configure()" class="shiva">
&nbsp;&nbsp;
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
</div>
<script  type="text/javascript">
    webcam.set_api_url( 'test.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("PHP Error: " + msg); }
}
</script>
  <div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
</div>
</div>
</body>
</html>

let us add some cool CSS code :
<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>

I am leaving on your side to make alteration if need for getting image and rename + uploading and other sorts of make ups.this is the basic to get the image and save it in a folder named images.
report any bugs as comments.share is care, please share it.

14 comments:

ARUN KUMAR said...

nice one ! shiva !
post about cordova.js pls!

Anonymous said...

super da

Unknown said...

Good job, Shiva, tanks

Unknown said...

i have looking webcam to recording video and upload database
please reply me my mail id [email protected]

shivasurya said...

sure i will post it soon! follow my blog constantly!

Unknown said...

its not working online.....after i upload my website...
error occurs, but work nice on localhost....

shivasurya said...

chck my demo ! its on 000webhost! working well !
if u r really interested post ur error as comment or chat with me
www.facebook.com/s.shivasurya1172

Unknown said...

how can i set session_id for a specific user..
this code is not working

Unknown said...

how can i set session_id for a specific user.
this code is not working

shivasurya said...

only you must set unique session id for user and
try uploading to server
try my login system from my blog,may be helpful for you!

thanks for comments!

aniket said...

file is not getting upload to images folder

Recky Suhartanto Lawalata said...

thanks to Mr.Shiva, this script is running well in my notebook. there is a different between file that i have been download and the tutorial. there is a problem when saving a file to mysql. the script wich have error called file handleimage.php. in that script, -> insert into entry (id,images) values ('','$id','$newname') is different from your script in tutorial. so after edit that script, it's running well.

s.shivasurya said...

thanks for the notify! @Recky Suhartanto Lawalata .. i will have a look and correct it soon! i have to upgrade this tutorial,found another webcam javascript does better than this! soon i will post it !

shivasurya said...

You can save the data using the ajax or jquery. Or if you want to use HTML based webcam script than you can go for this http://www.vivekmoyal.in/how-to-use-webcam-in-php-using-html5-and-save-image-to-database/

Post a Comment

feel free to post your comments! Don't Spam here!