Display Updated Web Cam Images with Javascript

Have you ever wanted to display static images from your computers web cam that automatically update after a certain number of seconds or minutes? Sort of like a security system so you can monitor say your bedroom remotely?

Recently I have had this idea and went about finding a way to accomplish this and now I have it. However for this tutorial you will need a third party application so be forewarned.

Things you Need

First of all, you will need a web cam. Obviously. The second thing you will need is a software package that you can program to read the web cams information and take a snapshot from it at a specified interval, and one that is capable of uploading files via FTP. One program I found for this that was free was called ‘Easy Web Cam’ but it was packed with SpyWare so I was forced to write my own, (See project SecuCam).

Once you have these items you are all set!

Step 1: Setting up the program

The first thing you need to do is configure your web cam capture application accordingly. Set up the required time delay between snapshots to something like 30 seconds, or as high as you want it. It is inadvisable to do it anything less than 30 seconds because your computer would be constantly uploading.

Once you have configured that aspect, you will need to configure the program with your FTP details so that the snapshot it takes can be automatically uploaded to the web server upon capturing the cams image.

You should also configure the resolution and settings of the output image so that they are not high and you can keep your image file sizes down to avoiding hogging bandwidth and to avoid conflicts with users currently using the file.

Step 2: Creating the Web Page

The next step is to create the web page that will display the updated image. This web page will need a named image component, and a Meta tag that specifies that the page will not be cached. Create a new blank web page and do the following:

Add the following to the head section of your new document:

<meta http-equiv="Pragma" content="no-cache">

Add the following to the <body> tag of your document, where 8000 represents the delay in mili-seconds that the page will wait before refreshing:

onLoad="setTimeout('updateCamImage()', 8000)
Add an Image to your page and set its name and ID attribute to camimg:

<img name=”camimg” id=”camimg” src=””>
Add the following Javascript to the head of your document:

<script language="JavaScript">
function updateCamImage () {
if (!document.images) return;
document.images['camimg'].src = 'youruploadedimage.jpg?' + Math.random();
setTimeout('updateCamImage ()',8000);
}
</script>

You will need to modify the above script to point to your uploaded web cam image. Make sure that you leave the ‘?’ on the end of the url as a random number is inserted here to trick the browser into thinking it’s a new image and to reload it as opposed to using the cached version. Without this the script will not work.

You will also need to set the delay. It is advised that you set the delay to about 20 seconds longer than that of the interval you set in the web cam capturing program to allow time for the program to upload the next captured image.