Photo Booth – Flash Webcam Image Capture

EDIT: From this little experiment a new project called UserBooth came to life ;)

Two days ago I made a little flash app that will allow anyone to take a picture with a webcam connected to a computer. Everything worked fine in AS3. It was only when I got to the php part of the project when I felt like I should ask for help. And I did, I asked a friend or mine (Mihai Bojin) who in a few minutes explained to me exactly what I needed to know in order to get this project working as it should (a big part of the php code is made by him).
The project is now open source and you can find the code and the source fines underneath ;)

You can download the source files from here:

  Photo Booth (52.8 KiB, 9,738 hits)

Here you can see the working application:
vamapaull.com/photobooth

Here you can see the ActionScript 3.0 code:

import flash.display.Bitmap;
import flash.display.BitmapData;
import com.adobe.images.JPGEncoder;
 
var snd:Sound = new camerasound(); //new sound instance for the "capture" button click
 
var bandwidth:int = 0; // Maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second.
var quality:int = 100; // This value is 0-100 with 1 being the lowest quality. 
 
var cam:Camera = Camera.getCamera();
cam.setQuality(bandwidth, quality);
cam.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, favor area)
var video:Video = new Video();
video.attachCamera(cam);
video.x = 20;
video.y = 20;
addChild(video);
 
var bitmapData:BitmapData = new BitmapData(video.width,video.height);
 
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.x = 360;
bitmap.y = 20;
addChild(bitmap);
 
capture_mc.buttonMode = true;
capture_mc.addEventListener(MouseEvent.CLICK,captureImage);
 
function captureImage(e:MouseEvent):void {
	snd.play();
	bitmapData.draw(video);
	save_mc.buttonMode = true;
	save_mc.addEventListener(MouseEvent.CLICK, onSaveJPG);
	save_mc.alpha = 1;
}
 
save_mc.alpha = .5;
 
function onSaveJPG(e:Event):void{
	var myEncoder:JPGEncoder = new JPGEncoder(100);
	var byteArray:ByteArray = myEncoder.encode(bitmapData);
 
	var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
 
	var saveJPG:URLRequest = new URLRequest("save.php");
	saveJPG.requestHeaders.push(header);
	saveJPG.method = URLRequestMethod.POST;
	saveJPG.data = byteArray;
 
	var urlLoader:URLLoader = new URLLoader();
	urlLoader.addEventListener(Event.COMPLETE, sendComplete);
	urlLoader.load(saveJPG);
 
	function sendComplete(event:Event):void{
		warn.visible = true;
		addChild(warn);
		warn.addEventListener(MouseEvent.MOUSE_DOWN, warnDown);
		warn.buttonMode = true;
	}
 
}
 
function warnDown(e:MouseEvent):void{
	navigateToURL(new URLRequest("images/"), "_blank");
	warn.visible = false;
}
 
warn.visible = false;

Here you have the php code:

<?php
if(isset($GLOBALS["HTTP_RAW_POST_DATA"])){
	$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];
	$img = $_GET["img"];
	$filename = "images/poza_". mktime(). ".jpg";
	file_put_contents($filename, $jpg);
} else{
	echo "Encoded JPEG information not received.";
}
?>

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

126 Comments »

 
  • Engiblog.com says:

    I will use this script in my Website. Thanks a lot.

  • Cirke says:

    Hi, it looks cool, but doesn’t works for me, the capture works but the save not :( , whats the problem with it?

    Kind Regards,
    Cirke

  • Cirke says:

    Hey, I resolved it! I tried to use it without a server, but now works great :)

    Best Regards,
    Cirke

  • vamapaull says:

    Yep, you need a server with php support in order to make it work ;)

  • Yann says:

    Hello, thx for this work !

    I tried to adapt your code with an external class, i put this online.
    Captures works but save don’t.
    It’s not the same problem than Cirke cause i use it on a server.

    Can you help me ?

    Thx, best.

  • Yann says:

    I tried to put directly your files online and it doesn’t work. Is it a problem with my host ?

  • it works with java?

  • bMac says:

    Hey there, great app!

    I’m trying to update the camera size with no success. I can change the setMode numbers or comment out completely with no effect on the viewing window.

    What am I missing?

  • fag says:

    I need to do the same, but in ASP (not in PHP). Can somebody translate the PHP code to ASP?
    Thank you very much!

  • samanta says:

    Does it work with Java?

  • Jaenard says:

    Nice one.

    Thanks for this! :)

  • Ramesh Babu says:

    Hello!! It seems good. But even if i clicked on allow. I cannot use the cam.

  • mike says:

    Hi,
    is it possible to set cam an pic size to 100 x 100 pixel ?
    can you tell me how does it works ?

    Thanks mike

  • Anuya says:

    how can i use it in asp.net

  • Veronika says:

    Hello,
    this is great.
    Can you tell me if this code is also proper to make video captures not only photos?

    Thanks :-)

  • vamapaull says:

    @Veronika – the code is made to only make photos. if you want to record video you’ll need a media server first ;)

  • marqiz says:

    Hi!
    I used this script and it works great, but I also want to send in the same POST description to this photo (some text). Is this possible to do it in the same POST?

  • vamapaull says:

    Please ask this question on userbooth.com

  • Anonymous says:

    Not working in Opera 10.61

  • marqiz says:

    I asked it on userbooth.com.
    I have another question:
    This line in PHP code:

    $img = $_GET["img"];

    what does it do?
    Somewhere in AS3script we are sending something named “img” ? I didn’t find any place where this img-sending could be hidden, and IMO this line is useless and doesn’t do anything in fact.

  • offcourse says:

    Hi

    How can I make this select a predefined camera, like an IP cam or USB camera attached to the server?

    This would make it amazingly easy for me to create a photo booth controlled by the web, which I would like to do.

    Can it be done?

    Thanks

  • marqiz says:

    Hi again
    I found solution to my problem with sending in the same moment from as3 to php image and other information. The solution is simple:

    var desc = “Me and my family”;
    var saveJPG:URLRequest = new URLRequest(“save.php?desc=”+desc);

    and then on PHP side:

    $description = $_GET['desc'];

  • Raul says:

    Hello, I have realized that the script is not working in Google Chrome. Do you have any explanation? Will be you able to solve this issue?

    Thanks

  • kit says:

    hi , it cool, i really want to use it , but i cant load the webcam cant see any things when i load the swf. how can solve , and i just want to save it at C drive. how can do that.

    and if i want put the Script on my own layout where should i put ?

    many thanks

  • anix says:

    hi, it works fine in chrome for me… also working fine in my local server … hope to play with it :D

    thanks : )

 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">