Photobooth with PHP, jQuery and CSS3

Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

HTML

The first step to building our Photobooth is laying down the HTML structure of the main page. We will be using jQuery to fetch a list of the latest photos, so we don’t need to embed any PHP logic here. This means we can leave it as a plain HTML file.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photobooth with PHP, jQuery and CSS3 | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="assets/fancybox/jquery.fancybox-1.3.4.css" />

</head>
<body>

<div id="topBar">
    <h1>jQuery &amp; CSS3 Photobooth</h1>
    <h2>&laquo; Go back to Tutorialzine</h2>
</div>

<div id="photos"></div>

<div id="camera">
	<span class="tooltip"></span>
	<span class="camTop"></span>

    <div id="screen"></div>
    <div id="buttons">
    	<div class="buttonPane">
        	<a id="shootButton" href="" class="blueButton">Shoot!</a>
        </div>
        <div class="buttonPane hidden">
        	<a id="cancelButton" href="" class="blueButton">Cancel</a> <a id="uploadButton" href="" class="greenButton">Upload!</a>
        </div>
    </div>

    <span class="settings"></span>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="assets/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="assets/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="assets/webcam/webcam.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

There are three main divs in the page:

  • #topBar displays the headings;
  • #photos is where the images are inserted after they are requested with jQuery’s $.getJSON method;
  • #camera holds the webcam.swf movie (which we are using to communicate with the web camera). It also holds the control buttons for taking photos and uploading.

The control buttons are divided in two .buttonPane divs. In the jQuery part of the tutorial, we will be making a simple function to toggle between the panes.

At the bottom of the body, we are including a number of JavaScript files. Starting with the jQuery library, we are also adding the fancybox plugin for displaying the photos, the easing plugin (to make fancybox even fancier),  webcam.js – the plugin that enables us to communicate with web cameras through flash, and finally our own script.js to make all this work together.

Note that if you are tweaking your website for high load, you might want to combine all these JS files together. This will make the page load faster as JavaScript files block the page while loading.

jQuery, CSS3 & PHP Photobooth

jQuery, CSS3 & PHP Photobooth

PHP

Although the main page is plain old HTML, we do need PHP to make our photo booth work. To be more exact, there are two features of the app that we need PHP for – receiving the uploaded image from flash, and for listing the uploaded files.

upload.php

/*
	This file receives the JPEG snapshot from
	assets/webcam/webcam.swf as a POST request.
*/

// We only need to handle POST requests:
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit;
}

$folder = 'uploads/';
$filename = md5($_SERVER['REMOTE_ADDR'].rand()).'.jpg';

$original = $folder.$filename;

// The JPEG snapshot is sent as raw input:
$input = file_get_contents('php://input');

if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){
	// Blank image. We don't need this one.
	exit;
}

$result = file_put_contents($original, $input);
if (!$result) {
	echo '{
		"error"		: 1,
		"message"	: "Failed save the image. Make sure you chmod the uploads folder and its subfolders to 777."
	}';
	exit;
}

$info = getimagesize($original);
if($info['mime'] != 'image/jpeg'){
	unlink($original);
	exit;
}

// Moving the temporary file to the originals folder:
rename($original,'uploads/original/'.$filename);
$original = 'uploads/original/'.$filename;

// Using the GD library to resize
// the image into a thumbnail:

$origImage	= imagecreatefromjpeg($original);
$newImage	= imagecreatetruecolor(154,110);
imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370); 

imagejpeg($newImage,'uploads/thumbs/'.$filename);

echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';

As I mentioned earlier, we can’t communicate with web cameras directly from JavaScript. This is why we need flash, which has excellent web camera support, to act as an intermediate layer. This leaves us with two choices:

  • we can have flash export the snapshot and make it available to JavaScript (slow and ineffective);
  • have flash upload the photo directly to a PHP script.

Sensibly, the flash webcam plugin uses the second approach. It also has the benefit of uploading the snapshot as a valid JPEG image, which means we can save it to a file directly with PHP, without having to convert it.

In our upload.php we validate that the uploaded data is a JPEG image, save it to a file in the uploads/original/ directory, and generate a 154 -by- 110 px thumbnail. I chose this thumbnail size out of convenience, as it shares the same width to height ratio as the original image (520 -by- 370 px), which makes the resize easier.

Take a photo - Webcam Photobooth

Take a photo - Webcam Photobooth

browse.php

/*
	In this file we are scanning the image folders and
	returning a JSON object with file names. It is used
	by jQuery to display the images on the main page:
*/

// The standard header for json data:
header('Content-type: application/json');

$perPage = 24;

// Scanning the thumbnail folder for JPG images:
$g = glob('uploads/thumbs/*.jpg');

if(!$g){
	$g = array();
}

$names = array();
$modified = array();

// We loop though the file names returned by glob,
// and we populate a second file with modifed timestamps.

for($i=0,$z=count($g);$i<$z;$i++){
	$path = explode('/',$g[$i]);
	$names[$i] = array_pop($path);

	$modified[$i] = filemtime($g[$i]);
}

// Multisort will sort the array with the filenames
// according to their timestamps, given in $modified:

array_multisort($modified,SORT_DESC,$names);

$start = 0;

// browse.php can also paginate results with an optional
// GET parameter with the filename of the image to start from:

if(isset($_GET['start']) && strlen($_GET['start'])>1){
	$start = array_search($_GET['start'],$names);

	if($start === false){
		// Such a picture was not found
		$start = 0;
	}
}

// nextStart is returned alongside the filenames,
// so the script can pass it as a $_GET['start']
// parameter to this script if "Load More" is clicked

$nextStart = '';

if($names[$start+$perPage]){
	$nextStart = $names[$start+$perPage];
}

$names = array_slice($names,$start,$perPage);

// Formatting and returning the JSON object:

echo json_encode(array(
	'files' => $names,
	'nextStart'	=> $nextStart
));

The browse.php file lists the contents of the image folders as a JSON object. It does it with PHP’s glob function, which scans the folder and returns an array with file names. We then sort this array according to the photo upload dates with the array_multisort function, after which we slice it with array_slice to return only 24 photos at a time.

jQuery

As I mentioned earlier, we are using the webcam.js plugin to control the user’s web camera. This plugin exposes a simple API, available as a global object named webcam. It gives us methods for taking and uploading photos, and for generating the necessary embed code for the swf file.

In script.js below, we will be using this api and build our photo booth script around it. First we will define some variables and cache the most commonly used jQuery selectors throughout the code for better performance:

assets/js/script.js – Part 1

$(document).ready(function(){

	var camera = $('#camera'),
		photos = $('#photos'),
		screen =  $('#screen');

	var template = '<a href="uploads/original/{src}" rel="cam" '
		+'style="background-image:url(uploads/thumbs/{src})"></a>';

	/*----------------------------------
		Setting up the web camera
	----------------------------------*/

	webcam.set_swf_url('assets/webcam/webcam.swf');
	webcam.set_api_url('upload.php');	// The upload script
	webcam.set_quality(80);				// JPEG Photo Quality
	webcam.set_shutter_sound(true, 'assets/webcam/shutter.mp3');

	// Generating the embed code and adding it to the page:
	screen.html(
		webcam.get_html(screen.width(), screen.height())
	);

The template variable above holds the markup that will be generated for each photo. It is basically a hyperlink that has the thumbnail of the photo as its background-image, and which points to the full size shot. The {src} attribute gets replaced with the actual file name of the photo (the file names were generated automatically by upload.php in the previous section).

Next we will be binding event listeners for the control buttons. Notice the use of webcam.freeze(), and the webcam.upload() methods. This gives the user the ability to take a shot and decide whether to upload it later. webcam.reset() prepares the web camera for another shot.

assets/js/script.js – Part 2

	/*----------------------------------
		Binding event listeners
	----------------------------------*/

	var shootEnabled = false;

	$('#shootButton').click(function(){

		if(!shootEnabled){
			return false;
		}

		webcam.freeze();
		togglePane();
		return false;
	});

	$('#cancelButton').click(function(){
		webcam.reset();
		togglePane();
		return false;
	});

	$('#uploadButton').click(function(){
		webcam.upload();
		webcam.reset();
		togglePane();
		return false;
	});

	camera.find('.settings').click(function(){
		if(!shootEnabled){
			return false;
		}

		webcam.configure('camera');
	});

	// Showing and hiding the camera panel:

	var shown = false;
	$('.camTop').click(function(){

		$('.tooltip').fadeOut('fast');

		if(shown){
			camera.animate({
				bottom:-466
			});
		}
		else {
			camera.animate({
				bottom:-5
			},{easing:'easeOutExpo',duration:'slow'});
		}

		shown = !shown;
	});

	$('.tooltip').mouseenter(function(){
		$(this).fadeOut('fast');
	});

After this we will need to implement some of the callbacks exposed by the webcam plugin:

assets/js/script.js – Part 3

	/*----------------------
		Callbacks
	----------------------*/

	webcam.set_hook('onLoad',function(){
		// When the flash loads, enable
		// the Shoot and settings buttons:
		shootEnabled = true;
	});

	webcam.set_hook('onComplete', function(msg){

		// This response is returned by upload.php
		// and it holds the name of the image in a
		// JSON object format:

		msg = $.parseJSON(msg);

		if(msg.error){
			alert(msg.message);
		}
		else {
			// Adding it to the page;
			photos.prepend(templateReplace(template,{src:msg.filename}));
			initFancyBox();
		}
	});

	webcam.set_hook('onError',function(e){
		screen.html(e);
	});

This completes the web camera integration. However we still need to display a list with the latest photos (and give users a way to browse through older images as well). We will be doing this with a custom function called loadPics() which will communicate with browse.php:

assets/js/script.js – Part 4

	/*-------------------------------------
		Populating the page with images
	-------------------------------------*/

	var start = '';

	function loadPics(){

		// This is true when loadPics is called
		// as an event handler for the LoadMore button:

		if(this != window){
			if($(this).html() == 'Loading..'){
				// Preventing more than one click
				return false;
			}
			$(this).html('Loading..');
		}

		// Issuing an AJAX request. The start parameter
		// is either empty or holds the name of the first
		// image to be displayed. Useful for pagination:

		$.getJSON('browse.php',{'start':start},function(r){

			photos.find('a').show();
			var loadMore = $('#loadMore').detach();

			if(!loadMore.length){
				loadMore = $('<span>',{
					id			: 'loadMore',
					html		: 'Load More',
					click		: loadPics
				});
			}

			$.each(r.files,function(i,filename){
				photos.append(templateReplace(template,{src:filename}));
			});

			// If there is a next page with images:
			if(r.nextStart){

				// r.nextStart holds the name of the image
				// that comes after the last one shown currently.

				start = r.nextStart;
				photos.find('a:last').hide();
				photos.append(loadMore.html('Load More'));
			}

			// We have to re-initialize fancybox every
			// time we add new photos to the page:

			initFancyBox();
		});

		return false;
	}

	// Automatically calling loadPics to
	// populate the page onload:

	loadPics();

As loadPics() is bound as a handler for the click event of the Load More tile, this function can be called in two ways: the normal one and as a callback. The difference is that the this object of the function points either to window, or to the DOM element. We can check for this and take appropriate action, like preventing double clicks from issuing multiple requests to browse.php.

Lastly, we have the helper functions, used throughout the rest of the code.

assets/js/script.js – Part 5

	/*----------------------
		Helper functions
	------------------------*/

	// This function initializes the
	// fancybox lightbox script.

	function initFancyBox(filename){
		photos.find('a:visible').fancybox({
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'overlayColor'	: '#111'
		});
	}

	// This function toggles the two
	// .buttonPane divs into visibility:

	function togglePane(){
		var visible = $('#camera .buttonPane:visible:first');
		var hidden = $('#camera .buttonPane:hidden:first');

		visible.fadeOut('fast',function(){
			hidden.show();
		});
	}

	// Helper function for replacing "{KEYWORD}" with
	// the respectful values of an object:

	function templateReplace(template,data){
		return template.replace(/{([^}]+)}/g,function(match,group){
			return data[group.toLowerCase()];
		});
	}
});

Now that we’ve discussed all of the code, lets say a few words about the CSS styles.

CSS3

With the recent introduction of Firefox 4, CSS3 transitions can finally become a fully qualified member of our developer toolbox. In our photobooth, we are using CSS3 to add a bit of class to the photo booth.

assets/css/styles.css

/*-------------------
	Photo area
--------------------*/

#photos{
	margin: 60px auto 100px;
	overflow: hidden;
	width: 880px;
}

#photos:hover a{
	opacity:0.5;
}

#photos a,
#loadMore{
	background-position: center center;
	background-color: rgba(14, 14, 14, 0.3);
	float: left;
	height: 110px;
	margin: 1px 1px 0 0;
	overflow: hidden;
	width: 145px;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#photos a:hover{
	opacity:1;
}

#loadMore{
	cursor: pointer;
	line-height: 110px;
	text-align: center;
	text-transform: uppercase;
	font-size:10px;
}

#loadMore:hover{
	color:#fff;
	text-shadow:0 0 4px #fff;
}

In the fragment above, you can see that we’ve defined a 0.25s transition on the photo anchors (these hold our images). This will animate every change to the styles of these elements, including those applied by :hover definitions. This in effect makes all the photos fade out to 50% when we hover over the #photos div, except the one directly beneath the mouse pointer.

With that same transition definition, we also affect the #loadMore span. It has a text shadow rule applied on hover, which gets animated into a smooth glow effect.

CSS3 Effects

CSS3 Effects

With this our photo booth is complete!

Conclusion

You can use this app as a fun addition to a community forum or other social networking website. You can optionally build in a comment field to go with the photo, or integrate it more deeply with your site.

Did you like this week’s tutorial? Share you thoughts in the comment section.

Join our newsletter and get our PSDs!18,435 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

117 Comments

  1. Arnau says:

    Always with high level!
    Great Job!!

    Thanks for your teaching!

  2. aMOEBa says:

    Great tut! very informative. I love the JS wrapper for flash API, webcam.js. Thanks man

  3. Goatie says:

    I've just skimmed through the article and the codes quickly but oh man, so many possibilities with this! As you mention in the conclusion it would be a great addition to a community site. Easy to integrate so people just can take a picture and save it directly to their profile. No need to install a program on your computer and no hassle with uploading.
    I like how you put the your codes together, they're making a lot of sense and the additional comments in the codes also helps a lot.

    Thumbs up for another great tutorial. Thanks Martin :D
    Note: I'm the dude with all the crazy facial hair and a pirate flag in the background in the photobooth ;P

  4. Nick Plekhanov says:

    Super, super awesome tutorial. Martin, you should do video tuts!!!

    Idea for the follow-up tut. - Videobooth ....

    Any chance?

    Huge thanks to you man.

  5. As usual another rocking post from you. I have a little doubt, how to close the Camera window? I don't see any close button if a person doesn't have a cam.

  6. This is the reason why I love web. The idea is brilliant! Things like this makes web more enjoyable place :]

    Also a great tutorial.. as always :)

    Thank you, for all that effort you put in this stuff.

  7. Nikhil says:

    Awesome and really informative tutorial. I have read nearly all of your tutorials. Each tutorial you write is with highest quality. Really superb!
    Thanks for this one!
    Although nice idea by @Nick, you should post Video tuts.

  8. e11world says:

    This is a really nice tutorial! Great idea!

  9. J.F. Herrera says:

    Excellent tutorial! How about a video booth?

  10. this is insane, in a good way! I have no use for it as of now but I'm sure I can figure out a function for it eventually. Awesome as always

  11. Fazreen says:

    The output is awesome!. Thanks for the tutorial! Instead using the camera to shoot, can we upload another picture that we already have?

  12. conectado says:

    I can not make this great demo run :(

    1. NICO says:

      Maybe you forgot to set your uploads folder to allow to write the images... >> CHMOD << !?

      Works fine here, amazing work, Martin!

  13. Ashish says:

    Wow, this is gr8!

  14. Христо Панайотов says:

    If you're using OSX make sure that the flash player preferences for "video" are "USB Video Class Video". If you selected other option (Google camera adapter 0/1, CamTwist etc.) turn it to USB Video Class Video, or you'll see only black screen. This is Mac OSX Specific. Great tutorial as usuall

  15. mikesh says:

    great tutorial (...as always)! thanks alot tutorialzine!

  16. Vladimire says:

    Awesome, it gives ideas..

  17. djar says:

    very nice tutorial.
    i'm more semi-pro with html/php.
    what's the best way to implement photobooth into a wordpress site?

  18. christian says:

    oh men. this is going to be a trend.!!!!

  19. Really interesting tutorial, Very easy to follow and relating to what Goatie said, it has so may possibility's. I like the idea of being able to take a photo to upload and save it as a profile picture for a community website. Overall a really neat application to have on a site if used in the right way. I can see this being used in many websites to come.

    Excellent tutorial, thanks for sharing

  20. Gavin says:

    That Gundam is amazing!

  21. luis says:

    Super Cool ""

  22. krypto says:

    I love you Martin! :)

  23. Abbas says:

    This is great ! fantastic ....Tutorialzine is the best !

  24. Kevin says:

    Wow, now that is cool. Really great idea. Well done guys =)

  25. Lughino says:

    Hi,
    I have the problem with the quality video in Linux.
    On Windows the quality of the webcam is great, on the same PC on Linux is awful!
    Any chance?

    Thanks

  26. david says:

    Thanks, good article !
    Just a note: in browse.php, line 59, I had to replace
    if($names[$start+$perPage]) by if(count($names)>$perPage) to get the pictures to load correctly in the gallery if there is less than 24 pictures.

    1. deprohoang says:

      or : if(isset($names[$start+$perPage])){...}

  27. SWEET! mate, this is truly amazing. You know I contacted you about that work, this is actually very close to the idea I was having. Maybe if you email me again i will tell you my idea... ;-p

  28. Yourheadfor says:

    Awesome tutorial and jpegcam rocks too!

    If only I had found your article BEFORE I built my own site. I would like to create a personalized but very simple voting site. It is still in beta but if you would like to check it out it is: http://yourheadfor.com. Comments and suggestions are highly appreciated.

  29. Webdesigner says:

    Nice Tutorial. What's about the functionality on the ipad2 ?

    1. Martin Angelov says:

      Unfortunately the photobooth depends on flash for taking pictures. This means that it will not work on iPads nor iPhones.

      Until support for external devices is built into the web browser, the only solution would be native applications.

  30. Kenan says:

    What to say... I love you :))))

  31. Sharun Kumar says:

    This is fun!!!

  32. Edgars says:

    Hello, can anybody tell me, how to hide a "Shoot!" button in photobooth, while flash permissions window is dispayed? This feature is very important.

    1. Martin Angelov says:

      Unfortunately it is not possible. Flash does not notify you when it is displaying the permissions window. The best thing you can do is instruct users how to permanently allow your site.

  33. Leon says:

    BAD....ASS!!!!

    You know, that's why I love about you guys. People would charge for stuff like this and here it is...free.

  34. JJ-DR says:

    Great tutorial. Is there a way to approve photos before posting. I have the need to censor pornography on a religious website.

    Thanks for this great work

    1. Martin Angelov says:

      To be able to approve / disapprove images, you will need to set up an admin system and keep all the photos in a database. On the front end it will be pretty much the same, but the PHP part would need a significant rewrite.

  35. Edmilson says:

    Excelente tutorial! Parabéns...

  36. Wayne says:

    Thisis great but when I try the demo in explorer (8 and 9). It will not snap after a page refresh.

    Try the demo in explorer, refresh the page and then click shoot! and see what happends.

    GREAT JOB!

  37. Wayne says:

    I love this but it's not working well in IE

  38. bcmoney says:

    Martin, this is amazing work!

    For iPhone support, do you think something like this would work:
    http://code.google.com/p/iphone-photo-picker/

  39. JohN says:

    By far the best I came across for a long time. Chapeau!

  40. Pin says:

    Thank you for this useful script.

    We wish to add a 3,2,1 delayed shotting pictures, and a preview & save button. Is there a script for this? Or if we can do that on the source file of the flash?

    Pin

  41. stephane says:

    Don't mention it's using Flash (it basically couldn't be made without), @html5douche wouldn't be happy.

  42. Alex says:

    Great ! Thanks a lot for this tutorial.
    What do I have to change to display all the pictures on the homepage ? because right now it display only pictures I take, but if I refresh the page, nothing...
    Thanks !

  43. Christoffer says:

    The same question as Pin ... a delayed shutter function.

    I've tried
    setTimeout("webcam.freeze()",3000)
    In the script.js file, which work, but my very limited javascript skills can't work around delaying the switching of the camera buttons (cancel & upload) nor making a 3-2-1 counter.

    Othervise really great script ... love it! :-)

  44. Wagner says:

    Does anyone know how to include an option to upload from your computer?

  45. Frank says:

    This so great. Please can you write about designing a wall or facebook like wall.

    Thank you.

  46. Great ! Thanks a lot for this tutorial.

  47. Nicolo' says:

    Great tutorial! used it to build my website The World Smiling
    Thanks a lot!!! :)

  48. Giovanni says:

    Hi, using your script my friend and me just create this website! check this out ;-)

    http://theworldsmiling.com/

    I hope you like the way we modified and used your idea :-)

    Greetings

    1. Jauwh says:

      Giovanni > It's really great what you've done :)

    2. David says:

      Hi,
      Do you know of a way to shut down the webcam completely, once it is started and be able to restart it later without having to redirect to a different page?

      Thanks.

  49. Dj Bustout says:

    :D Lol. You may want to delete some of the spam images on the demo.
    Neat tutorial

  50. David says:

    AWESOME! I have been craving for a long time now to actually do this, but in terms of video. Nevertheless, this would be a great start. Thank you so much for being so kind to share such lovely code with all of us.

    BTW, I did check out the code. Unless I have missed it, I am unable to find an option to completely shut down the webcam, once it is started. The only way, as of now, seems to be do navigate to a completely different page. So am I missing the option to shut off the webcam when needed or is it really absent in this code? It would really help us all if you could please throw some light on this at. If it is missing altogether, then is there any way to add that feature to this marvelous code?

    Thanks again for your generous contribution.

  51. ktalin says:

    This is awesome!! Very great work..
    I wanted to ask you .. how can i build in a comment field to go with the photo ?

    1. Mike M. says:

      I just asked the same question. did you ever get an answer of figure this out! I rally need to figure this out. You're help is greatly appreciated. Thanks.

  52. ming says:

    Thank you! But if i refresh the demo page,the shoot will be can not use,why?

    1. Wayne says:

      Are you using internet explorer, if yes, try using FireFox

  53. carlos says:

    Hi,

    The demo works well (great work btw) but I can't make it work on my computer, the photos won't be taken...
    I could use some help here!

    Thanks

    1. Martin Angelov says:

      It is probably security related. Make sure that you are accessing the script through localhost (you will need to be running xampp or another apache+php package for that).

  54. ClaasicExplore says:

    Hi Martin
    This is of course a great solution to a long term problem. Works fine without hiccups. Appreciate you for sharing the code. Meanwhile, there is no option for closing the camera window if you do not want to use it and seconding redirecting another page after uploading a snap shot. Please any help will be appreciated. Thanks.

  55. Carthagian Traveler says:

    Thanx. This was such a great help!!!! :-))))

  56. Phlp says:

    If someone would hide the shoot button when no Camera was detected. This is the easy way to hide the shoot Button:

    webcam.set_hook('onError',function(e){
         screen.html(e);
         if(e == "No camera was detected.") {
             $("#shootButton").hide();
         }
    });
    
  57. Paulon says:

    nice api it works great on my localhost.

    but when i put it on my hosting the photos appears to be damage or corrupted... what seems to be the problem, and how can i trap it?

    1. Paulon says:

      does any1 have the same issue as mine? i cannot resolve the problem of having the image damage or corrupted.. :(

  58. Peter says:

    how would one add a comment field? I'd love to use this but the comment field would be very useful. Thanks

  59. cpepz says:

    This doesn't work on Internet Explorer. Has anybody figured out how to fix this for IE?

  60. Kizmo says:

    It's not on firefox as well. I have the latest version of flash player installed. It works great on Chrome.

  61. soumitra says:

    Hi,nice output of taking photo from webcam.but one problem i am getting for IE8,7.
    problem : first time its working fine but if i refresh the page then not working in IE.
    showing error "object doesnot support thesse property" for line this.get_movie()._snap().How i overcome this.
    Thanks.

  62. Hi there,

    is there any way to modify where it looks for the video source? ive a webcam conected to a php, mysql apache server and want the webcam.js to look at the machine locally rather then the machine its being loaded from???

    Alan

  63. WOW Martin Great Tut!

    Any one know an easy way for me to add a Facebook Share button to each picture after they enlarge them???

    Thanks again Martin!

  64. Justin Gilliam says:

    Also does anyone know a way to get this to work on cell phones? A way to detect the browser and prompt to use the phones camera?

    1. Wayne says:

      Hello Justin, did you find a solution to make this work on your phone? I need similar use but for an android tablet.

      Please let me know if you have a solution
      Thank you

  65. Zatax says:

    Hello! Thank you for your work! I wonder if it's possible to insert an image on the shooting and also add a button to download the photo? Thank you!

  66. Wayne says:

    I have similar question as Justin.

    Is there a way to make the browser and a android tablet detect the camera and take the pictures.

    I really need to know because I bought the tablet just for that purpose but so far no luck.

    Trying to make it work on this tablet
    http://www.amazon.com/Acer-Iconia-A100-07U08U-7-Inch-Tablet/dp/B00548QAPC

  67. D3X says:

    Wonderfull tutorial is there possible to add timer to take picture?

    thx

  68. Andy says:

    Great tutorial! Just one question.

    Is it possible to delete taken photos after page is refreshed or revisited? I meant delete previous photos so users can only see their own once is taken?

  69. Man8 says:

    Woah! This is the best online photobooth I came across. I'm trying to add masks to it and merge the mask and the snapshot with php imagecopymerge. Yes it involves div over flash but that's taken care of. I'm stuck where I have to get the mask ID along with the snapshot for the merge process... Maybe prefixing filenames with the div's ID? Dunno. First one who finds out posts here? Oh, here my github repo (you'll have to create /uploads/original & /uploads/thumbs folders with write access).

    1. Input says:

      Im trying to do the same thing, maybe it have something to do with merging the Snap of the JPG with the PNG after the SWF took the photo.. Let us now if you progress with it..

      1. Rodrigo says:

        Finally I did it with PHP Merging

        Here is the result:

        www.maculiculkin.com

  70. Matt says:

    Works perfectly! But only on when the window is bigger than 210x210 .. I need mine 180x180, and as I've tried - not possible :(

  71. Rameshor says:

    thanks for great work.
    I was trying to save the file directly to mysql database in blob format but couldn't do it. what should I do ? please help me.
    And please tell how to debug the code in upload.php. I was trying to write database insertion code in upload.php but could not follow the server request.
    Should the flash script be changed??
    I am new to action script

    1. Ricahrd says:

      Hi Rameshor

      The best way to debug is to use a proxy service, something like Charles is a good one. The Webcam or JQuery does not really upload it the PHP that Handel all the server side stuff so adding it to a database should be done the normal way you would Handel that.

      Hope that helps good luck

  72. allan says:

    Thank you very much.

    nice nice!

  73. Abel says:

    I would like to put a frame around the camera. is this possible? the frame will be pulled from a DataBase

  74. spark says:

    I have to say, it's AMAZING!.

    I love it so much!

    but Martin, I was wondering does this pretty support submit some text with the image together please? I read the source and seems I didn't find where to change it.

    Could you please show me some tips ?

    Thank you.

  75. Pat says:

    Hi,

    awesome job mate!!!

    Is it possible to get the .fla file so it will be possible to add an image overlay?

    thanks for your time...

  76. Hi, Thank you for an awesome tut.

    But I'm getting a problem in the script. Code works well almost, but when I'm opening the main page, images are not getting loaded into it by default which are already taken.

    Plz help me out in this.

  77. Alan says:

    I have this installed and it seems to be working,but when I hit the upload you do not get the browse to open. all permissions have been set and the mods I did have no effect on the script either. I've even tried it with the stock script. Can someone please assist me? Thanks,Alan

  78. Bryan says:

    Hi, is it normal that after u took a picture , you refresh the page ,the picture all gone ? but in the folder have the picture.
    How to make the stay on the page ,even after refreshing the page ,it still there.

  79. Rafael says:

    how can I put imputs to save to a db a name, email, etc of the user that upload the photo? I can't handle to get the imputs with $_POST on upload.php...can some one helpme?

  80. john elder says:

    Perfect this tutorial, fascinating ... I wonder if it is to make a similar application with the instagram, mobile, remove her picture on android phone and sent automatically to this system, is?
    I am Brazilian and I loved this tutorial.

  81. Sergio Daza says:

    Hello, good job, thanks a lot.

    But i have a question, on mozilla firefox doesn't works, anybody know what happen?, Thanks.

  82. Man8 says:

    My likkle contrib to dis excellent script. Code is ugly but it works.
    (I added png masks over flash - dat waz phun)
    Man8 photobooth ghpage

  83. Just fantastic.... thank for this tutorial.

  84. Sam says:

    Easy fix for anyone wondering why it's not working in IE.
    Open script.js and find the line: var shootEnabled = false;

    This var is being set which doesn't allow clicks within the shootbutton or the settings button if it's set to false. (I'm assuming it's for when the image is at a still but doesn't work that way.

    Simply set the var to true and your button clicks should work properly. Tested in IE8,IE9 and FF and works well.

    Thanks to the author

    1. keith says:

      @Sam I tried this. Still doesn't work. In webcam.js, this line is throwing up:

      this.get_movie()._snap( this.api_url, this.quality, this.shutter_sound ? 1 : 0, this.stealth ? 1 : 0 );

      Error: Object doesn't support this property or method

      The click returns True then the page is refreshed. Image is never saved.

      You sure it's working? I'm using IE8.

  85. Florian says:

    Great script! Is it possible to watermark the image with the actual date and a png image? Can someone help me?

  86. Sam says:

    Hi, I use this script and I'm using cloudflare on my site. I always get a 500 internal server error everytime I upload the captured image. I hope someone can help me with this.

  87. Panna says:

    Excellent Tutorial. It really helps me a lot... Good job

  88. Soooo, My only issue is that the upload script is not re-sizing the images and putting them in the thumbs folder.

    All folders and subfolders are set to file permissions of 777

    Any fix for this?

  89. imghoster says:

    when re-booting does not work click shot in IE. The reason for caching webcam.swf

  90. imghoster says:

    Bugfix for all IE browsers:
    create file assets/webcam/webcam.php with code:
    <?
    header("Content-type: application/x-shockwave-flash");
    $filename = "webcam.swf";
    $handle = fopen($filename,"r");
    $contents = fread ($handle, filesize ($filename));
    print $contents;
    fclose($handle);
    ?>

    file: assets/js/script.js
    find: webcam.set_swf_url('assets/webcam/webcam.swf');
    replace to: webcam.set_swf_url('assets/webcam/webcam.php?uniq=' + new Date().getTime());

    file: assets/webcam/webcam.js
    find:
    swf_url: 'webcam.swf', // URI to webcam.swf movie (defaults to cwd)
    replace to:
    swf_url: 'webcam.php', // URI to webcam.swf movie (defaults to cwd)

    it worked!
    Demo: http://up-image.ru/cam.html
    Good luck! Happy Christmas!

  91. ced says:

    Do I need to create database for this one? I try to put up all the file in the server and it work except for some function when upload after taking the picture, I couldnt find the image anywhere can you help me how to do this? thank you.

  92. andre says:

    Before the webcam image, I wanted to put 2 fields for name and email. How do I?

  93. sumit says:

    hey the code works great but i was looking to be able to view the captured video stream live on the local network. can anyone help how to start with that?? if anyone has already written the code for the same i would highly appreciate sharing that code with me. thanks

  94. zero says:

    Hi.
    Great tutorial!

    I've like to name the files according to a variable set in the URL using "get". How can I do that?

  95. diokey says:

    Thank you so much for this wondeful tutorial. I was so much in need of this.

    Keep up with the good Job man!!! I appreciate it.

  96. Krxon says:

    Hello
    Is it possible to make it work without need for folders to be 777?
    Most of hosting firms are highly discourage users to have any folder of file CHMOD 777 because of security risks.

    1. Raul says:

      Great tutorial. Thank you. The upload folder has 755.

  97. Codears says:

    I have a problem, I've installed it in my own domain but when I take a picture it doesn't show immediately I have to refresh page to see it... how can I solve it? please help me.

  98. Gobind says:

    can anybody give me C# code of upload.php

  99. Wagner says:

    How to add name to photo, before send? Or add sender name before shoot photo?

    1. Nia says:

      Hi Wagner, have u found the way to add the image name before send? Can u share the script if you have done that?
      Thanks.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links