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, 3,924 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.

59 Comments »

 
  • chomb says:

    OK, Image source with “octet-stram” header et the other variable with GET method (“save.php?memberid=123″). It’s Work !!

    Thank you for your job !

  • Sami Mansour says:

    really thank you so much.

    but there is a question:
    isn’t there another way to take a picture by webcam without flash?

  • vamapaull says:

    @Sami Mansour – I really don’t know any other way to make this without flash ;)

  • karim says:

    thx a lot for this !
    i only have one problem, i can’t open the “take_picture.flv” with CS3

  • vamapaull says:

    .fla not .flv ;)
    And yes, that is because it’s saved for CS4

  • Joshua says:

    Hi,
    I bumpped into your fabulous solution by accident. I have allways believed that web tech will overcome classic programming. I am trying to set up a data management web interface and how to snap pics was a stumbling block for me. I tried in vain using your solution. It doesn’t work for me. Is there something I missed.
    PS: I have read all comments without finding how to make it work. Here is my address and I will appreciate a little help from you : ndujosh@****.**

  • vamapaull says:

    Hi Joshua,
    What exactly dose not work for you ?

  • Joshua says:

    Thanks. The bugs were linked to the server I used. All now work ok. Is it possible to have a script that activates a twain scanner?

  • vamapaull says:

    @Joshua – I don’t think so…

 

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="">