|

Photo Booth – Flash Webcam Image Capture

ByPaul Istoan

UPDATE: HTML5 Webcam Photobooth Web App

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).

PhotoBoothActiveden

The project is now open source and you can find the code and the source files underneath 😉

This open source project is release under the MIT license.

You can download the source files from here:

  Photo Booth (52.8 KiB, 38,386 hits)

[AdSense-A]

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:

EDIT 16/03/2010:
From this little experiment a new project called UserBooth came to life 😉

EDIT 04/12/2011:
I just got the approval notice from ActiveDen for a much better version of this PhotoBooth app. This new version includes lot of options to customize it through XML and it includes both ASP and PHP files for the server-side part of the code. If you have any suggestions to improve it, please contact me though my ActiveDen profile

Similar Posts

285 Comments

  2. 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

  3. Hey, I resolved it! I tried to use it without a server, but now works great 🙂

    Best Regards,
    Cirke

  5. 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.

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

  8. 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?

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

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

  13. 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

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

    Thanks 🙂

  17. 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?

  20. 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.

  21. 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

  22. 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’];

  23. 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

  25. 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

  27. Hello

    Is it possible to change it a little to add a frame do the saved picture? Does anybody knows how to do it? Thanks

  29. Can i edit somehow the actionscript code in the fla file ?
    ( i’m absolute beginner in flash and actionscript, but not in development )

  30. Thank you the great application.

    The issue is: I’m not able to resize the two image fields above the “Capture” and “Save Image” buttons.

    I tried modifying the cam.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, favor area) values, but that didn’t seem to have an effect.

    Thus, my question: where I can find the left and right screen dimensions defined in the code?

    Thank you.

  32. not work on win 7 64 bit -> opera last version and ie last version (is a bug on flash player 10 i think not on aplication)

  34. Hi I tried all the browsers in vista.No Luck.It does not detect the USB webcam . Is there any thing that I am missing.Any settings or opearating system specific. Please help me.

    Thanks
    Raman

  36. Exelent api! thanks you!
    I’ve a problem may be someone could help me. i need to get back de variable $filename to flash, beacause i need to go after that to a page when i will need it.

    Thanks you very much!

  38. I’ve been trying to fix this for days now:
    everything works fine until I click image save.
    (I even edited the php file so it creates a different folder, but it seems the file is not executing, because no new folder is being created). Also on the status bar you says “Waiting for localhost…”
    Hence my broad questions: has anyone faced this problem? Does anyone have suggestions? I already changed the permissions and it doesnt work either, any other ideas?

    Thank you for any help.
    PS: Joomla 1.5 + XAMPP 1.7.3 (PHP Version 5.3.1)

  39. Hi tester,

    Have you checked the file permissions?
    This might help.
    chmod(“/somedir/somefile”, 755);

  40. serra,
    I did try and it didnt work on my XAMPP (Win) testing server. Someone tried it on a live server and it is working, may have something to do with my local settings?

  41. Hi,
    This program works in localhost but when i tried in server save doesn’t work. Can anyone solve my problem

  42. Hi,
    This is good application. I am using it with my educational software in php and its works fine and i have tested it with insertion of data into database.
    But one thing is not work. When i Get student_id with url and try to update photo of any student then student_id is not shown under if statement. Outside the if statement query executed successfully.
    For example,

    In these codes update query does’t get student id under if statement. When i execute this query outside if statement then it work properly.
    Can you give me suggestion how i get student_id within the if statement?

  43. $picid = $_GET[“id”];
    $snaptime = mktime();
    $now = date(“F j, Y, g:i a”);
    $ip = $_SERVER[“REMOTE_ADDR”];
    $student_id = $_GET[“student_id”];

    if(isset($GLOBALS[“HTTP_RAW_POST_DATA”])){
    $jpg = $GLOBALS[“HTTP_RAW_POST_DATA”];
    $txt = “IP: ” . $ip . ” | ” . “Time: ” . $now ;
    $filename = “../../../images/gallery_images/snap_”.$picid.”.jpg”;
    $filetxt = “../../../images/gallery_images/snap_”.$picid.”.txt”;
    //$filename = GALLERY_IMAGES_PATH.snap_$picid.jpg
    file_put_contents($filename, $jpg);
    file_put_contents($filetxt, $txt);

    $get_photo = “snap_”.$picid.”.jpg”;
    update(“UPDATE table_name SET `photo` = ‘$get_photo’ WHERE student_id = ‘$student_id'”);

    } else{
    echo “Encoded JPEG information not received.”;
    }

    In these codes update query does’t get student id under if statement. When i execute this query outside if statement then it work properly.
    Can you give me suggestion how i get student_id within the if statement?

  44. is there any way to get the temporal picture inside a collage of other pictures and save it? maybe using adobe air to have acces to save it locally?? can’t find a way to capture it from memory.

  45. Hi, I tried to compile using adobe flex builder 3, but there’s an error on the following line:

    save_mc. alpha =. 5;

    the error is:

    1084: Syntax error: expecting identifier before dot.

    Can i help me?

  47. save.php converted to save.asp for those classic asp folks out there 😉

    ByteCount = Request.TotalBytes
    BinRead = Request.BinaryRead(ByteCount)

    Set objStream = Server.CreateObject(“ADODB.Stream”)

    with objStream
    .Type = 1
    .Open
    .Write BinRead ‘Error here BinRead
    .SaveToFile server.MapPath(“snapshot_1.jpg”), 2
    .Close
    end with

  48. Thanks for your code it’ll help me on my site
    My registration system was much better.

    Thank you for your help!

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? Please solve:Captcha