Using a Webcam

Uploading an image using a web browser (as shown in this recipe) may be useful in some cases, but most WATCHOUT cases call for even more interactive methods. This example shows how you can use a computer’s webcam to take a snapshot and upload it to the image server. The example consists of two parts:

  • A “client” part, which takes the picture using the webcam and uploads it to the server.
  • A “server” part, which receives the image and stores it in the folder watched by the WATCHOUT Dynamic Image Server.

The ingredients used in this recipe is almost identical to those used in “Uploading with a Browser”:

webserverandwebcam.jpg

Webcam Client Application

In general, web browsers don’t support accessing a webcam directly. That means you’ll need a separate application to take the photo and upload it to the image server. Fortunately, this can be done quite easily using, for example, Adobe AIR, which has excellent camera and communications support. For this recipe, we started out with the project described here:

This includes both client and server side code. After a few minor modifications to the code, we came up with a client AIR application that works equally well on Mac or Windows. To run the application, first install Adobe AIR, which you can get here:

Then download and unpack the attached “WebcamClient.zip” file, and double-click the “Webcam.air” file to install the client application. Do this on a computer that has a working webcam. This zip file also contains the full source code for the application, in case you want to change it (changing it requires Adobe Flash Professional CS5 or later). This Flash project also uses the “as3corelib” which you have to download and make available to Flash Professional if you want to change the webcam client application. It’s available here:

Using the Webcam Application

Start the Webcam application. If it can find your webcam, a live preview image will appear in the window (as shown below). Click the “Shoot” button to take a picture. Click “Discard” if you’re unhappy with the result. Do not click the “Send” button until you have configured the web server to receive the image.

WebcamApp.jpg

Webcam client application running on a MacBook.

Web Server Configuration

This recipe uses the same web server as the one titled “Uploading with a Browser”, but adds a new PHP file that handles the image uploaded by the webcam application. Download the attached “WebcamUpload.zip” file, unpack it, and copy the resulting “webcamUload.php” file to c:\wamp\www. This PHP file receives the file uploaded by the webcam client application, and stores it in “C:\DynImages\WebcamImage.jpg”.

CAUTION: The PHP code used in this example is deliberately kept as simple as possible. It doesn’t perform any error handling, or verification of the file supplied by the user. Do not use this on a publicly accessible network as is, as doing so may pose a security risk.

Once the server is configured properly, enter its IP address in the “Upload to” field in the webcam application (in the example above, the address is 192.168.0.48). If you run the webcam app on the same computer as the image server, you can enter localhost instead of the IP address. Finally, click the “Send” button to send the captured image to the server. The image should appear in the “C:\DynImages" folder.

Configuring the Dynamic Image Server

The WATCHOUT Dynamic Image Server needs to be configured exactly as in the “Uploading with a Browser” recipe. Make sure the image server is running before proceeding. Remember to start it using a shortcut that points the image server to the “C:\DynImages" folder.

WATCHOUT Show

Download and extract the attached “WebcamUploadShow.zip” file. Open the resulting “WebcamUpload.watch” show file in WATCHOUT. Make sure the “Webcam” media item is configured with the IP address of the image server. Then click the single cue on the main timeline to display the image.

Files attached to this recipe: