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

";

?> php://input -read article here. file_get_contents().here is a small explanation This enables to get your image file using the

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">



<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 :