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
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
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.
let us add some cool CSS code :
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>
<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' );
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.
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 take_snapshot(){
document.getElementById('img').innerHTML = '<h1>upload on progress</h1>';
webcam.snap();
}
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 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.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";
?>
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>
<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 :
<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>
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.
nice one ! shiva !
ReplyDeletepost about cordova.js pls!
super da
ReplyDeleteGood job, Shiva, tanks
ReplyDeletei have looking webcam to recording video and upload database
ReplyDeleteplease reply me my mail id sdhiman493@gmail.com
sure i will post it soon! follow my blog constantly!
Deletechck my demo ! its on 000webhost! working well !
ReplyDeleteif u r really interested post ur error as comment or chat with me
www.facebook.com/s.shivasurya1172
how can i set session_id for a specific user..
ReplyDeletethis code is not working
how can i set session_id for a specific user.
ReplyDeletethis code is not working
file is not getting upload to images folder
ReplyDeletethanks 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.
ReplyDeletethanks 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