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 & 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:
hi,
I downloaded the file & try capture the image, i get error message “Movie is loaded yet.”
Can you guide me..
I’ve the same problem
You need to install flash player for that…
open with localhost
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.
i need to save the image into mysql database can you help me please
in local network this is working but when I upload it to my live server the image is not uploaded
Thank you so much, it really works and a great help for my project.
Loved it!!
Thank you!
Everything since to be working but it is not capturing any image. It saves an empty picture in the image folder
good site for visiting.
for single pic its very good
showing get_movie()._snap is not define error. How to solved it.
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?
showing this.get_movie()._snap is not a function
Thanks for help with a code, because I have plenty of problems with it. Regards.
code updated to the latest version. please check now
desktop is fine but when i’m using in mobile camera “this plugin is not supported” please help.
throwing this error “ERROR: Failed to write data to $filename, check permissionsn”
you might have to check folder permission
I want to save an image into MySql Database can you help me, please.
If you want to save the image in the database only than you have to convert your image into the base64 than you can only do that.
Thank you man it helped me a lot
How to save file information like filename, path , type, size in mysql by this webcam coding
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.
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 ?
Yes, you can reduce the image size in the PHP script.
Check this link, you may get some idea.
https://theonlytutorials.com/convert-image-to-jpg-png-gif-in-php/
thanks simple solution to capture image ….good one
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
this is so wonderful! Thanks much for this. Very helpful.