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,349 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:

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

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