You might have seen many websites having an option of for profile pictures. Particularly Facebook has this element, it is possible that you can transfer picture from your PC or you can take photograph utilizing Web Camera.

Today I am going demonstrate to you a content and by utilizing this content you can transfer a picture with webcam.

In this article we will make 3 Files

  1. Html file index.html to display the content.
  2. php script  to process the image saveimage.php.
  3. Connection Script to save the image path into database.

HTML Part (index.html):

This file shows the Web Camera preview and captures the image and pass it to the PHP file with the help of webcam.js.

<div id="results"></div>
<div id="webcam"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.js"></script>
<form>
<input type=button value="Take Snapshot" onClick="captureimage()">
</form>

In the above code we demonstrate the screen and get the picture from webcam. Yet at the same time we need to save it into memory for further use.

Javascript code:

Webcam.set({
width: 600,
height: 460,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#webcam' );
function captureimage() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
Webcam.upload( data_uri, 'saveimage.php', function(code, text) {
document.getElementById('results').innerHTML = 
'<h2>Uploaded image:</h2>' + 
'<img src="'+text+'"/>';
} );    
} );
}

PHP part (saveimage.php):

This file captures the raw image data and saves it to a folder:

First of all create a table to store the image path into database.

CREATE TABLE `webcam_images` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`imgpath` varchar(200) NOT NULL,
`uploaded` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Now you can use the php upload function to upload the images by Webcam.

<?php
//set random name for the image, used time() for uniqueness
require_once('db.php'); 
$filename =  time() . '.jpg';
$filepath = 'uploads/';
if(!is_dir($filepath))
mkdir($filepath);
if(isset($_FILES['webcam'])){	
move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath.$filename);
$sql="Insert into webcam_images(imgpath) values('$filename')";
$result=mysqli_query($con,$sql);
echo $filepath.$filename;
}
?>

Database Connection:

Create a database connection string to executes database queries.

<?php
$host="localhost";
$user="root";
$password="";
$databasename="webcam";
$con=mysqli_connect($host,$user,$password,$databasename);
?>
http://codingbin.com/wp-content/uploads/2018/03/Webcam-image-with-php-and-jQuery.pnghttp://codingbin.com/wp-content/uploads/2018/03/Webcam-image-with-php-and-jQuery-150x150.pngManoj DhimanjavascriptjQueryphpUncategorisedYou might have seen many websites having an option of for profile pictures. Particularly Facebook has this element, it is possible that you can transfer picture from your PC or you can take photograph utilizing Web Camera. Today I am going demonstrate to you a content and by utilizing this...coding, php, wordpress, yii, cakephp, and  jquery

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request