Capture Webcam Image with PHP and jQuery!

You might have seen many websites having an option of capturing web camera image for profile pictures. Especially Facebook has this feature, either you can upload image from your computer or you can take photo using Web Camera.

Today’s script is about Capturing Image from Web Camera using jQuery and PHP. To do that we are going to use a JavaScript called webcam.js which is developed and uploaded in https://github.com/jhuckaby/webcamjs

The above link also has a Flash file which helps us to connect Web Camera and show it on Webpage.

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.

<!doctype html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Capture Web camera image using WebcamJS and PHP - Theonlytutorials.com</title>
	<style type="text/css">
		body { font-family: Helvetica, sans-serif; }
		h2, h3 { margin-top:0; }
		form { margin-top: 15px; }
		form > input { margin-right: 15px; }
		#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
	</style>
</head>
<body>
	<div id="results">Your captured image will appear here...</div>
	
	<h1>Capture Web camera image using WebcamJS and PHP - Theonlytutorials.com</h1>
	<h3>Demonstrates simple 600x460 capture &amp; display</h3>
	
	<div id="my_camera"></div>
	
	<!-- First, include the Webcam.js JavaScript Library -->
	<script type="text/javascript" src="webcam.js"></script>
	
	<!-- Configure a few settings and attach camera -->
	<script language="JavaScript">
		Webcam.set({
			width: 600,
			height: 460,
			image_format: 'jpeg',
			jpeg_quality: 90
		});
		Webcam.attach( '#my_camera' );
	</script>
	
	<!-- A button for taking snaps -->
	<form>
		<input type=button value="Take Snapshot" onClick="take_snapshot()">
	</form>
	
	<!-- Code to handle taking the snapshot and displaying it locally -->
	<script language="JavaScript">
		function take_snapshot() {
			// 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>Here is your image:</h2>' + 
					'<img src="'+text+'"/>';
				} );	
			} );
		}
	</script>
	
</body>
</html>


PHP part (saveimage.php):

 

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

<?php

//set random name for the image, used time() for uniqueness

$filename =  time() . '.jpg';
$filepath = 'saved_images/';

move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath.$filename);

echo $filepath.$filename;
?>

And that’s it you can easily understand the script by reading the comments given in both the scripts.

For your convenience, here is the DEMO and DOWNLOAD:

demo download

30 thoughts on “Capture Webcam Image with PHP and jQuery!

  1. hi,
    I downloaded the file & try capture the image, i get error message “Movie is loaded yet.”
    Can you guide me..

    1. at Karthik: you have to place the downloaded folder “php-webcamera” into document root.i faced the same problem when i double clik the index.html.

  2. in local network this is working but when I upload it to my live server the image is not uploaded

  3. Everything since to be working but it is not capturing any image. It saves an empty picture in the image folder

  4. I have included webcam.js in right way and every thing was loaded perfectly but when i try to snap the photo return get_movie()._snap undefined . How to solved it?

  5. desktop is fine but when i’m using in mobile camera “this plugin is not supported” please help.

  6. Hi. Thank you for this code, it worke very well on my laptop.
    I would like to it on cell phones but I always get this error message: “webcam.js error: could not access webcam. NotSupportrdError: Only secure origins are allowed”. Do you know how to fix this issue? I think by having a SSL certificate (https) I can do it but I am asking myself if there is an easier way.

  7. hy whenever i take a picture it saves a picture atomatically to my folder,now my problem is the pictures are big in size anyway i can resize the picture automaticaly before saving them to my folder ?

  8. Webcam.upload( data_uri, ‘https://192.0.0.216:81/webcam-in-php-html5-master/newEmptyPHP.php’, function(code, text) {
    document.getElementById(‘results’).innerHTML =
    ‘Here is your image:’ +
    ”;

    I pass the Php File But cannot upload image are broken and not showing

Leave a Reply

Theme: Overlay by Kaira
Agurchand