Wednesday, 12 February 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.

11 comments:

  1. ARUN KUMAR13 February 2014 at 08:18

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

    ReplyDelete
  2. Anonymous14 February 2014 at 05:39

    super da

    ReplyDelete
  3. Unknown27 March 2014 at 05:10

    Good job, Shiva, tanks

    ReplyDelete
  4. Sunny Dhiman2 April 2014 at 23:08

    i have looking webcam to recording video and upload database
    please reply me my mail id sdhiman493@gmail.com

    ReplyDelete
    Replies
    1. SHIVA SURYA4 April 2014 at 00:54

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

      Delete
  5. SHIVA SURYA26 April 2014 at 05:29

    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

    ReplyDelete
  6. টর্চ ব্রাউজার11 June 2014 at 21:38

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

    ReplyDelete
  7. টর্চ ব্রাউজার11 June 2014 at 21:39

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

    ReplyDelete
  8. aniket10 July 2014 at 04:32

    file is not getting upload to images folder

    ReplyDelete
  9. Recky Suhartanto Lawalata6 August 2014 at 17:39

    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.

    ReplyDelete
  10. s.shivasurya6 August 2014 at 17:46

    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 !

    ReplyDelete