Here’s how it works (assuming the user has a webcam):

1. User visits the page and sees a “Take a shot…” link, along with a gallery of previously submitted photos. In my case, this is a db query that pulls back all the photos, ordered by date.
2. Clicking “Take a shot…” uses jQuery to slide a Flash app into view where the user is asked to allow Flash to communicate with their webcam.
3. Clicking “allow” shows a live feed from the user’s webcam. Click “snap” and a preview of the captured image is shown next to the live feed. Click “save” to upload the photo or “snap” again to preview a new shot.
4. The saved image is uploaded to the server and then its filename and timestamp are recorded to the database. I also have the script email me letting me know someone’s uploaded a photo.
5. Next jQuery hides the capture app, then uses ajax to fetch the latest photo from the database and write it to the gallery.

Sounds more complicated than it is. There are several pieces working together, but I’ve tried to comment the code as best as I could. It basically just involves changing the server paths and the references to each file.

A quick rundown of the components in the zip file*:

• cam-capture.fla: The flash file to create the swf. You only need to change the path to the jpg-encode-db.php
• jpg-encod-db.php: The php script that takes the image data from the swf, creates a jpg, saves it to the server and records the entry in the database (and sends an email)
• say-cheese-loader.php: The php script called via ajax from your html page. It retrieves the latest photo from the database and returns a snippet of html to embed on the page.
• say-cheese.php: The html/php page containing the embedded swf. It contains all the javascript – to toggle the display of the swf and to call the say-cheese-loader.php (which retrieves the latest photo and outputs some html to update the gallery)

So there you have it. Drop a comment on this page if you get it running on your site or have any additions to the code. Looking forward to seeing your enhancements.

*Important: for the jpeg encoding, you will need to download the as3corelib library from its Google code repository. See the project site for details. The code in the fla imports this in the first line of the actionscript in the ‘actions’ layer.

Download Cam-Capture-Files.zip (14k)

Surprisingly, this latest version also seems to be running a little faster than the last couple releases. That could just be my imagination. I still can’t tell if I’ve f’d up my server by mucking around with php.ini files and such. Time will tell, I guess.