Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building the Flash-based Webcam Delivery
To start, you will need some sort of webcam. I happened to get a free Logitech Quickcam Express from Verizon when I signed up for its DSL service. This is actually what inspired me to devise this project. It made me ask, "What could I do with this freebie to keep it from collecting dust?" This particular model of camera works only with Microsoft Windows-based PCs, so rather than figuring a way to get it to work with one of my Macs, I brought it into work and popped it into a Windows 2000 workstation on my desk. I spend most of my time during the day at the office, and because it was near the holidays, I decided that my friends and family might get a kick out of staring into the glare reflecting off of my cranium.
My first step, after popping the camera into one of my free USB ports, was to make sure I had the right drivers for the camera. This was accomplished with a quick visit to Logitech's website. The drivers installed like a snap. The next part of the process was to accomplish my goal of integrating the webcam into my website, and particularly delivering it in .swf or Flash format. I did a few minutes' worth of digging on Google, and found half of the solution. Surveyor.com's WebCam32 is a very popular, inexpensive piece of software. It has a raft of features and functionality, but the reason I purchased it was because it can upload a snapshot of the webcam's view to a remote FTP server at regularly defined intervals. It was quick and easy to set up, and it has been quite stable for me—running without a hitch for months now. I set the software up so that every 15 seconds, a new snapshot from the camera was uploaded from my Windows 2000 workstation to my remote web server.
TIP
If you have a way to filter out specific items in your server's FTP logs, or rotate them on a regular basis, familiarize yourself with that procedure now. This will save you from headaches later—after you have uploaded a file every 15 seconds to your web server for a month and you need to wade through your log files.
With WebCam32 set up, I was halfway to my goal. The next step was finding a way to get the resulting JPEG into .swf format. I use Macromedia Generator extensively for a lot of projects, and was going to use it or Jgenerator to handle the on-the-fly image conversion to .swf. I wanted to come up with a more portable solution, however. This was when I stumbled upon Stefan Scheussler's PHP script for converting JPEGS to .swfs dynamically. I am a big fan of PHP, so this was fantastic. I quickly got to work adapting the script to my needs, and within an hour or so I had a functioning webcam being delivered via Flash that automatically updates itself for viewers every few seconds. It functioned fine this way for months.
Once Flash MX was released, I realized that I could replace Stefan's PHP to .swf conversion script with a few keystrokes of ActionScript by utilizing several new features of the Flash 6 Player. This would reduce the load on my server, and increase the responsiveness of the display. The new ability to dynamically load JPEGS with the existing loadMovie command and the new setInterval action for calling functions at specified intervals were the deciding factors. These two features, available in Flash MX and the Flash 6 Player, allowed me to also decrease the complexity of the container Flash file to just a few symbols and these few lines of Actionscript:
// Define our timer updater and logic for loading the webcam jpeg
function webcam() {
seconds-=1;
if(seconds<0) {
loadMovie("http://www.impossibilities.com/webcam/feed.jpg", "webcamClip");
seconds=17;
status="REFRESHING...";
}
}
// Load up the image one time to get it going.
loadMovie("http://www.impossibilities.com/webcam/feed.jpg", "webcamClip");
// Every 1000 milliseconds, or whole second, call the webcam function
// this updates the timer display and when its less than zero, update the image.
setInterval(webcam,1000);
stop();
What I have done here is define a function that does two things. First, it decreases a counter, in this case the variable seconds that we use to display the remaining time before the next image refresh. Second, it refreshes the image each time our counter "seconds" dips below 0.
I used the new SetInterval Action to call the webcam function every 1000 milliseconds, or every whole second. The SetInterval Action has got to be one of the handiest new features of Flash MX. From the built-in dictionary, description of SetInterval: "Action; calls a function or a method or an object at periodic intervals while a movie plays. You can use an interval function to update variables from a database or update a time display."
For comparison with Flash 5, when I was connecting to the PHP JPEG to .swf conversion, I used the following code attached to a movieClip to accomplish the same thing:
OnClipEvent (load) {
this.pauseAmount = 17;
this.pauseDuration = pauseAmount*1000;
}
onClipEvent (enterFrame) {
if (this.startTime == null) {
this.startTime = getTimer();
} else {
this.lapsedTime = getTimer()-this.startTime;
parent.seconds = (this.pauseAmount-(int(this.lapsedtime/1000)));
if (this.lapsedTime>=this.pauseDuration) {
parent.status = "REFRESHING...";
loadMovie("http://www.impossibilities.com/webcam/feed.php", "this");
}
this.startTime = null;
}
}
}
Not nearly as efficient or as simple as just using setInterval.
This new approach worked like a charm, and did in fact increase the responsiveness and reduce the load on my server. The job of pulling in the image no longer had an intermediate step handled by middleware, it was now offloaded to the capabilities of the client's Flash 6 player, which from my tests, is noticeably faster. The SetInterval action in Flash MX also has performance benefits over the Flash 5 method I outlined above.