|

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! i want to use this with a python code for uploading the “.jpg” to the server, but i don’t know how to read the “HTTP_RAW_POST_DATA”, i have tried with stdin, but actionscript crashes. Somebody can help me? nice post vamapaull 😉

  5. Yes, but in the code you check “HTTP_RAW_POST_DATA”, wich it seems to be the stdin like-file on python.

    Anoter question, if i can do that witch the cgi protocol:

    dataYouWant = form[“enter_your_field_name_here”]
    enter_your_field_name_here is the bytearray? wich actionscript variable is the jpg information?

    Thanks for the help, Mihai Bojin 😉 And sorry for my bad english

  6. Sorry for the repost, but i can’t see the “img” variable and the GET method to send to php.. so why ths line: $img = $_GET[“img”];
    ? It confuses me :S

  7. Yes, you are right… that line was used in the initial php code made by me and I forgot to delete it in the final code made with Mihai Bonjin’s help 😉

  8. Ok i’ve running, but flash print this error when load “save.cgi”, i’ve changed on .fla “save.php” to “save.cgi” nothing more and flash player give me this error: “Error #2044: ioError no controlado: text=Error #2032: Error de secuencia. URL: save.cgi
    at take_picture_fla::MainTimeline/onSaveJPG()”
    Php don’t give me this error and the codes are doing the same :S

    My python code:

    #!/usr/bin/env python

    #import os
    #import cgi
    import sys

    im = sys.stdin.read()

    f = open(“images/name.jpg”, “wb”)
    f.write(im)
    f.close()

    Some suggestion about the error?

  9. Very Useful, Thanks,

    I just want to redirect my page after saving the image to another page.. How can i do it.. i don’t want to go gallery after saving image.

    also wan to remove the text comes after images saved “click here….”

    Regards,
    Prashant

  10. Hellos, thanks for code.

    I’m from brazil, I try using, image as captured ok, when I click on save, message show ok, but image are don’t save in directory … I set permitions 777 for folder, for php, try in 2 dofferents servers, and image don’t save… there are any settings on server or folder to work ? php 4, 5 ? .. thanks, André from brazil, sorry bad english, Regards.

  11. Hi Andre,

    try using chmod 777 * and chmod 777 images/ and then go to images folder and again run command chmod 777 *

    refresh browser and it will work 🙂 huh!

  12. Thx Prashant

    All as 777 but don’t work yet.

    I have a flash upload on server that’s work … it’s possible I test php script only to confirm that it as writing on server ? Any other recomendation ?

    Regards,

    André Matos

  16. guys … It’s working fine now ! thanks for code and help

    The last problem are a mod_security firewall on server that now is disable.

    vamapaull

    If possible, complement your post with this requeriments.
    – php 5
    – always_populate_raw_post_data set to ON
    – mod_security set to OFF

    Thanks for all

    Best regards,

    André Matos

  17. Just a small question… In the Action Script, how can i pass a value to save.php and get it?

    Great script! Thanks a lot!

  18. Thanks for the write-up. In general or if $GLOBALS[“HTTP_RAW_POST_DATA”] does not exist (e.g. because always_populate_raw_post_data is set to OFF), an alternative is

    $data = file_get_contents(“php://input”);
    file_put_contents(‘output.jpg’, $data);

    Kind regards,
    Melle

  19. Hi,

    i have tried with this code, its capturing photo and when i press save image, it shows the image is saved, click here to open gallery. but i could not find where its saved. i saw in photo/images too. but image is not there.please help me

  21. Hi, i install this code in my website. it captures video ,after click on save button , the image is saved successfully msg is coming. After that click here to open to view image,iam clicked on that one it is showing this error:
    PHP Warning: Unknown(): Unable to load dynamic library ‘C:\Program Files\Parallels\Plesk\Additional\Php\extensions\php_sqlsrv_ts.dll’ – The specified module could not be found. in Unknown on line 0

    what is the problem ? plz help me out on this…..its very urgent for me…

    Regards
    Suma.

  23. Hi Vamapaull,

    FLA file is not editable, throwing errors while editing with flash 8. can you please upload the new file please.

    Regards,
    Prashant

  26. @Prashant – First you have to understand that ActionScrpt 3 was introduced in Flash CS3. You can’t compile AS3 code with Flash 8.

  29. Hi vamapaull,

    I posted one comment earlier, if u know the solution for that please tell me.

    Thanks in Advance

    Regards
    Suma.

  30. This looks like it should work great. i downloaded, explored, and then uploaded it to my server. http://www.baldypal.com//6118/Project/photo_booth/

    However, i dont see that it uploaded any jpgs on my server location
    http://www.baldypal.com//6118/Project/photo_booth/images

    i didnt change a thing to the files, just wanted to see how they worked.

    Can anyone explain to me what i might have missed to make this work properly? try the link, are you seeing the same thing i am?

    Thanks,
    BaldyPal

  31. I wanted to add some more to help with the answers. i found this line commented out in index.php which lies in the “images” folder:
    $mydir_list.=”\n”;
    should this remain commented out?

    also, when i view source on my index.php after supposedly saving the captured pic, i see this:

    instead of this which is from your index.php view source:

    if i can get this to work, that’d be great!

  32. Cool script, but Raw post data shouldn’t be used, as it doesn’t work with all hostings that implement application firewalls. Someone should try to format properly the POST encoding to follow w3c standards.

  33. Hi
    I run it locally to test how it works and after I press capture and then go the gallery, I am transferred to the index page where I get this:
    n”; array_multisort($times, SORT_NUMERIC, SORT_DESC, $files); } } } } } foreach($files as $file) { $mydir_list.=”n”; } echo $mydir_list; ?>
    instead of the image.
    How can I fix that?

  34. OK, I uploaded it to my server and it works great, but I wanna do some modifying. How can I change the link Gallery URL:  http://vamapaull.com/photobooth/images/ at the capture page to the address of my gallery?

  35. Hi,I ‘m from Baku
    I use this code in localhost.It works good. But I installed it in my webpage, captures , but doesn’t save image.(CHMOD set to 777.)
    Could you help me why?
    thanks

  41. Great script work here. But I have one question. I am trying to change the video size both what is on the screen and what is saved.

    I have change the value (320×240) at…

    cam.setMode(320,240,30,false);

    … I have noticed that it changes the actual image size but not the size that is displayed on the flash screen. How can I change the default image size that shows in flash?

    Thanks!

  45. Hi everybody
    this script it’s amazing
    but i need to save the photo name in a database. how could i do this?

    thnxs!

  46. Hi,

    The Script is dazzling, thanks for that…

    Need a Help

    1. how to place the Bitmap image over the cam
    2. After capturing the image
    4. it should show the image over the cam
    3. Save button clicked it should hide and cam should be visible
    4. how to store it through binary method in the server

    can anybody help in this??

    Thanks in advance

  48. Hi,
    I have got the script to work on Apache Server. but when it comes IIS, photos aren’t uploaded to the ‘images’ folder.
    Any idea how I can solve this isssue.

  49. First, congratulations for the great script.
    I would like to know how to pass a variable to embed the swf and swf to the php.
    I say this because I would go right through embed the name of the picture and swf to the php variable that contains the name of the picture.
    Sorry if it’s asking too much, it still does not do it.
    Success friend!
    Big hug.
    Felipe (Brazilian)

  50. Hello,

    That’s exactly what I looking for, thank you!

    How can you send many data like image source AND member id (for exemple) tu a PHP script.

    I can send only image source (like you)
    I can send only member id (without header in octet-stream)

    By I can’t send image source and member id… I try different method (POST or HTTP_RAW_POST_DATA), but I don’t know how treat the data in PHP script…

    Can you help me ?

    Thank you for your work !

Leave a Reply

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

Are you human? Please solve:Captcha