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.
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 !
really thank you so much.
but there is a question:
isn’t there another way to take a picture by webcam without flash?
@Sami Mansour – I really don’t know any other way to make this without flash
thx a lot for this !
i only have one problem, i can’t open the “take_picture.flv” with CS3
.fla not .flv
And yes, that is because it’s saved for CS4
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@****.**
Hi Joshua,
What exactly dose not work for you ?
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?
@Joshua – I don’t think so…
Fantastic post thanks. Is there an easy way to extend this to capture video as well or instead of a picture?
@mark – for video you’ll need a media server and I don’t think the code will be very similar to this one
Great !
Is there any way to compare
the clicked photo and the person in front of cam?
(face detection)
Please
-KK
@kk – not with this app
Hey,
Its awesome.
Please help me to integrate this app for all network systems ( clients ).
Right now system having the webcam can see the images i.e server.
Thanks and Regards,
Pranay
@pranay bhardwaj – Just post a project on GAF with complete details of what you want, and then let me know so I can make my bid.
Hi, the demo booth looks great! Thanks for sharing the source codes! Do I need the Adobe Flash Media server to make it work?
@David Law – You do not need FMS to use this application on your server
Great job vamapaull !
Congratulations !
But for me, don’t work.
The screen in area of photo booth stay white, take a picture and image stil stay white.
Any suggestion?
Thanks and sorry for my bad english.
@Diego Griep – use a webcam
I’m using a iMac vamapaull :S
@Diego Griep – then check your webcam, maybe it’s not working, or maybe you have some fake driver on your mac or something, right click on the flash app and click on settings… see if you have the correct webcam in that list
Thanks vamapaull !
Webcam was incorrect in list.
Hi greatjob, how can i determine name of the saved picture?
for example
images/$_SESSION["user_id"].jpg
hi
really a great application ! thank you for sharing.
little question:
how can i change the size of the two windows ?
i thought it is here:
cam.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, favor area)
but if i change the (videoWidth & videoHeight) there is no change ! (?)
what can i do? i want 640 x 480 sized windows…
best regards from switzerland Alain
Really nice one! Is there a possibility to reach the JPEGencoder outside the SWF? So by clicking a ordinary HTML submit button instead?
You can do that with flash and js
Hi, I have uploaded it and tested but I’ve got this error;
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: save.php
at take_picture_fla::MainTimeline/onSaveJPG()
My server is PHP5 compatible. I tried setting chmod on all files but still not working.
please help,
thanks.
Hi vamapaul,
I was wondering how do i incorporate creating a dynamic watermark at runtime using php?
My code is like this at the moment, but it doesn’t work
(hopefully that appears right>
Thanks,
Paul.
Code can be found here:
http://paul-sproat.co.uk/test/save.php
Just check userbooth.com from time to time…. the UserBooth version will have the watermark feature
Yeah i’ve seen your demo of it. I can’t get my code working!
Would i have to incorporate the php watermark code into the save.php file? or somewhere else?
If you could let me know the code it would be great!
Hi there. Just downloaded your system to use. When i use the index.html page included in the zip the flash loads fine.
So i copied the HTML into a PHP document (and removed the )
Now i get a white box that appears and says movie not loaded when right clicked.
Also i set the SWFObject in the javascript to be 750*325px, and while the height changed the width did not.
the HTML source code of the page.
National Lettings Inventories
This content requires the Adobe Flash Player.
Get Flash
var mainswf = new SWFObject("take_picture.swf", "main", "700", "400", "9", "#ffffff");
mainswf.addParam("scale", "noscale");
mainswf.addParam("wmode", "window");
mainswf.addParam("allowFullScreen", "true");
//mainswf.addVariable("requireLogin", "false");
mainswf.write("flashArea");
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
var pageTracker = _gat._getTracker("UA-3097820-1");
pageTracker._trackPageview();
Copyright © 2010 National Lettings Inventories
Also where do you change the pointer to the php save script, and what are the trackers and google parts for? Can they be removed?
I will be running this on a single computer over localhost and it might not always have internet connection.
etherkye AT hotmail DOT com
Kye Etherton,
What copyright dose National Lettings Inventories have over this code?
Thank you very much for making this cool webcam flash.
I’m not sure if I missed something but how to I make it capture in a higher-res? Use 960×720 on my logitech cam.
Thank you,
Bjorn
None on that bit. But thats the general footer on the bottom of every page of the program
Bjorn,
I don’t know exactly how you can take high resolution images from your specific webcam with a flash based application….
Wonderfull work vamapaull.
It meets my requirement exactly.
It works fine with php.
Thank u very much.
vamapaull,
Is it possible for you to create a new .swf file with live camera and captured image instead of side by side live camera right above the image capture screen?
By the way, can you put the image capture in some kind of look and capture live screen captures to create a video (in mpeg format) instead of just still capture for like 30 seconds or so.
Your help is greatly apprecited.
charles,
please ask all the questions about this product on the UserBooth feedback page: http://userbooth.com/userbooth-demo-feedback.html
Thank you so much for this, it is exactly what I needed.
Just one quick question. I’ve managed to change the video size to 640×480, but when I capture the image, the image appears to be in 320×240. Is there anyway to have the image as 640×480 as well??
I’ve added this in:
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.x = 680;
bitmap.y = 20;
bitmap.width = 640; //added
bitmap.height = 480; //added
addChild(bitmap);
but still, it doesn’t work.
Will appreciate your help! Thanks!!
I’m having problems getting the image to save to the images folder. Every time I do it I just get a question mark box. I’ve messed with the permissions on the files here and still can’t get anything else to work. My php hello worlds are showing me that php is running fine. Any idea what I’m doing wrong. Is there something in my server I have to adjust?
@Jason – The permission of the images folder needs to be 777
“Every time I do it I just get a question mark box.”
Can you please explain this part again ?
Absolutely great work @vamapaull !!
Both your own project as well as UserBooth.
BUT I had major issues working with UserBooth v1.1.
First, it would simply not snap my pic, the camera works i can see it but nothing appears on the right side where the snapshot should appear.
Second, I couldn’t change anything about the config files nor the watermark. It wouldn’t load another lang config file when changing index.html nor would it load a modified watermark image.
Has anyone been succesful configuring it? Would it be possible for you to load a working version, out of the box, please?
I’m working on localhost by the way.
Thank you so much!!
@Francisco – I’m glad you like the project. If you have issues with the UserBooth files you should contact us here or post a message on the feedback page
Thanks,
Paul
@Francisco – I believe the problem is in the html embed code
Please change this line:
mainswf.addVariable(“config_file”, “config_eng”);
With this one:
mainswf.addVariable(“config_file”, “xml/config_en”);
what is the path where I save the pictures…
i’m trying to run this application in my PC…but i cannot find the saved pictures
@stefano – you need to run this application on a server with php support
Beautiful code!
@vamapaull
tnx for your fast response
i loaded here your application
https://meroli.web.cern.ch/meroli/index.html
but i am not able to save the picture in my server
should i change something in your code??
Just make sure your folder has 777 permissions