Ok, so it’s not just Flash, but a combination of Flash, PHP, html and (in my case) some javascript. You can see this in action on my Say Cheese page. As I say on that page, this project was directly inspired by Brendan’s Dawes’s Say Hello feature on his website. I fell in love with the concept the first time I saw it and wanted to recreate it for this site – mainly as a learning experience, and I had a couple of enhancements I wanted to try.
Here’s how it works (assuming the user has a webcam):
- 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.
- 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.
- 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.
- 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.
- 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)
Hi that a great script you made!
I like it, i hae download it, and try so edit the fla file, i have Flash Professional 8, working great, but i can;t load the cam-capture.fla, he said: Unexpected file format. Wich program have you made it? Or better, wich program can i edit it best with the fla file?
Thanks, keep going.
Kind Regards
Marcel
This piece is actually built with Flash CS4, so I’m not sure if it’ll work with earlier versions. You could download the 30-day trial and experiment. Something tells me you’ll need at least CS3 or CS4 to make changes because of the AS3 stuff.
Oke Marc
Thanks, i gonna try to download the trail version to see what happens. Thanks again and its you have a great site. Are you prgram more with flash? I have a intrest fla/swf with some troubles (video chat cannels)
Kind regards
Amsterdam Netherlands
Oh Marc
What the name of the tables or table in the database?
Only one table for the db. Here’s the sql to re-create the one I’m using:
CREATE TABLE ‘cam_shots’ (‘id’ mediumint(9) NOT NULL auto_increment, ‘filename’ varchar(255) NOT NULL default ”, ‘dateadded’ timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP, PRIMARY KEY (‘id’)) ENGINE=MyISAM DEFAULT CHARSET=latin1;
oke thanks, db name is ?
i have localhost, db user and us pas, but the name from database?
thanks again
#1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘â€
thats query results i run
You’d have to check with your web host about the real database information. Same thing with that query. You probably can’t just copy/paste it, but it should give you a reference for when you create your own table in your database.
Marcel – I just emailed you some info. Probably easier to hammer it out there.
Hello all,
I have downloaded all the files. also downloaded swfobject.js and jquery.min.js from google.
But when I click on “Take a shot with your webcam now »” this link nothing happen.
is there any flash installation require to run this?
Please help me on same.
thanks
Hiraman Patil
Hrm – could be a couple of things. First I’d check the css/js. It’s possible that the flash piece is there, but not showing when when you click the link. That text link should trigger a jquery function to display the div containing the video.
The file should run on any client with flash 9 installed. You do need as3corelib installed on your machine to successfully compile the final swf file (if you re-exported it from flash).
If you put your files up on at url somewhere I can take a look and see if I notice anything.
Hi Marc,
Thank you very much for your quick reply.
As per your reply I have downloaded “as3corelib-.93.zip”
and got 4 folders in it (docs, lib, src, tests and two files also).
so what can I do next?
as per you comment – ‘You do need as3corelib installed on your machine to successfully compile’.
What can I do for this?
please reply me.
thanks,
Hiraman Patil
This should tell you how to install the as3corelib library for use in Flash: http://www.actionscript.org/forums/showthread.php3?t=157388
Basically, you can either put the .swc file in a certain folder (see link above) or define the path to it in your preferences: Preferences > ActionScript > ActionScript 3 Settings.
One more thing please.
In your zip folder I found .fla file. but I want .swf file.
.fla not supporting here. can you give me .swf file?
please also give reply on my above comment.
thanks
The swf file won’t really do you much good because you need to define the url to the jpeg encoding php script (on your server) within the fla file and then export your swf file.
Hi Marc,
http://techmodi.com/demo/myauto/say-cheese.php
please check this url
/**********************
$(document).ready(function() {
// nav scripts
$(“#cam-toggle”).click(function(event) {
event.preventDefault();
$(“.cam-taker”).slideToggle();
});
});
Take a shot with your webcam now »
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF(“http://techmodi.com/demo/myauto/cam-capture.fla”, “camSWF”, “670″, “290″, “9.0.0″,”expressInstall.swf”, flashvars, params, attributes);
**********************/
till I can’t see swf or player to detect webcam.
I just want to run above code when
I don’t have knowledge about webcam process. please help me here.
Thanks again
Maybe you’re in the process of working on that page (http://techmodi.com/demo/myauto/say-cheese.php), but it looks like you’ve got some problems in your references to the swf files. First, this isn’t a valid url: http://vibha/myauto/cam-capture.fla and you need to reference the .swf file, not the raw flash file.
I’m afraid if you don’t have the ability to compile the flash file into a swf file, there’s not much else I can do to help.
Hi Marc here is marco =)
please can you help me?!
this is i cool script but can you me mail a step by step install instruction who include all steps for the installation. and what i want to run this script.
please mail me or also give reply on my above comment.
sorry for my bad english i,am german holic =)
First thing to do is check the comments within the files (php, html and flash). That should get you started. I answered a few questions in the comments on this post above. Your question about as3corelib is probably answered here: http://www.actionscript.org/forums/showthread.php3?t=157388
It’s really easy to install. It’s a lot less complicated than it sounds.
I can try to answer specific questions, but I’m afraid I don’t have time to outline the step-by-step instructions any more than what I’ve already done. Thanks again.
Oh sorry Marc i forget a question but give a mode for a pagination by more images to jump or switch
in a style like this pagination
first more?
thank you
regards marco
Pagination is a good idea. Maybe I’ll try to add that in an updated version for the future. I don’t really have the time to tear this page apart and rebuild it at the moment. Thanks.
Thanks Marc
But one question I still would have =)
rather how and where do I adjust the paths in the. fla file. I use adobe flash cs4 recent and still not know me as exactly that.
Now try the first corelib in adobe flash integrate. would be great if you could even give a few tips for the relevant path changes.
and I have to return policy for full you do not you can take care of everything =)
and when the paths in the. fla vote, but what do I have to spend the swf when I have the corelib involved. swf as a movie or image?
mfg marco
Again, sorry – not sure what you mean here:
“and when the paths in the. fla vote, but what do I have to spend the swf when I have the corelib involved. swf as a movie or image?”
You can just export the .swf file as a standard Flash Player 10 / ActionScript 3.0 swf file.
In the fla file, you only need to adjust one line. You need to put in the full url to the jpg-encode-db.php file. Look for this line in the “actions” layer of frame 1 of the fla file:
var jpgURLRequest:URLRequest = new URLRequest(“http://www.yourwebsite.com/jpg-encod-db.php?name=cam.jpg”);
I’m not sure I understand your question about corelib. Check that url at actionscript.org for more info. All I did was download as3corelib, unzipped it and put it in a folder on my computer (you can put it anywhere), and then set the preferences:
1. In Flash CS4, go to Preferences > ActionScript > ActionScript 3.0 settings
2. Under the “Library Path” section, you can add folders containing Flash class. Click the ‘add’ icon and choose the folder where you unzipped the as3corelib file.
That should setup your as3corelib.
thank you if I got it right =) I’ll make a screencast to it and others to provide for disposal. Next let’s see if I get to run it
Hi Marc
it does almost everything =)
now I only have one are not the problem on the localhost XAMMP the images displayed.
see my screenshot here
http://www5.pic-upload.de/27.08.10/q2ftcazgzxmy.jpg
again on a free test server e.g. square7.ch it works without problems.
can you possibly help me again or do you have a tip on what to do could not see the thumbs?
mfg marco
Based on that screenshot, it looks like either the php code isn’t running (maybe you have it as a .html page instead of .php) or there’s a small typo in the html.
My guess is there’s a typo in the html somewhere. It looks like the page is trying to render three images, so the php and db stuff is probably working. If it’s not a typo, it might be something with the image paths in your local environment versus your test server.