Why would you want to create a multi-camera Web page of your own? You may want to be able to check on your summer home from another location. If you run a business, you may want to use images from your restaurant, ski lodge, or beauty salon on your Web page to attract attention and customers. You could desperately want to share with the world your cat’s cute antics. Lastly, if you use cameras for surveillance and security, it can be very useful to put all your camera feeds on a single Web page so that you can see all the images at a glance.

Streaming live video is more difficult than setting up a page that regularly displays images, because live video uses many times the amount of Internet bandwidth that uploading and viewing still pictures does. Especially if you want to monitor multiple cameras at the same time, it will usually be either too expensive or simply impossible to stream all of them.

In this article, we will show you how to create a Web page that displays six regularly updated camera images on the same page, using only some simple HTML (Hypertext Markup Language) and one program on your PC.

There are several programs that can handle the task of putting Web cam images on your Web site, including DeskShare’s Security Monitor Pro ($189.95; www.deskshare.com), CoffeeCup WebCam ($34; www.coffeecup.com/webcam), and Evinco’s CamShot ($24.95; www.evinco.com.hk/eng/camshot.html). To create a multi-camera Web page, we chose to use Security Monitor Pro; the program can handle both snapping still pictures from each camera on a schedule and uploading them to your Web site. Setting up the program takes only a few minutes using the built-in wizards. To download a free trial of the program, go to DeskShare’s Web site, click Downloads, and scroll to Security Monitor Pro. Click the Down arrow icon to the far right. On the next page, click Download Now. Install the program and then choose to Continue Free Trial. (In evaluation mode, the program will only upload photos continuously for two hours at a time; to remove these limitations, you’ll need to register the product’s full version.)

Create A One-Camera Web Page

We’ll first create a page that displays and updates the image from one camera. We’ll begin by configuring Security Monitor Pro to take the pictures and upload them. After installing the program, any USB cameras that are connected to your PC will automatically appear in the program’s video device list. To add any networked IP (Internet Protocol) cameras, click the Add Camera Wizard button (the first button on the left side of the program’s toolbar) and follow the instructions. Install at least one camera now. Each camera in Security Monitor Pro appears in its own window preview.

Select the camera by clicking its preview window. Click the Tools menu and select Camera Monitoring Options. The Settings window for the camera appears. Switch to the Monitoring tab and select the Take Photo checkbox. Now, click the Configure button for the Take Photo option. The Take Photo Settings window appears.

Create a unique File Name Prefix. You will be using multiple cameras later, so choose a name that will distinguish this particular camera from all the others. In our example, we named the images “Cam1” through “Cam6.”

Select the Overwrite Existing File radio button. This means that whenever Security Monitor Pro takes a photo, it deletes the previous picture (from this camera) and replaces it with the new one. Because only one image from each camera will be used on the Web site, there is no need to store older ones. Set the Number Of Photos to 1.

Click OK to close the Take Photo Settings window. At the top of the Settings window, under the Run Alerts heading, select the After Every radio button and set the time to one minute. Click OK. Click Tools and Application Settings. We need to configure Security Monitor Pro to automatically upload pictures to the Web server. Select the Remote Monitoring tab and click the Configure button under Upload.

First, configure the FTP Server Settings. The details of this will vary. If you are not familiar with FTP uploading, contact your ISP (Internet service provider) for assistance. The key setting is the FTP Folder. You must be sure to upload the images directly into a folder that is part of your Web site. Upload the photos into the same directory that you store your HTML files.

Select the Photos checkbox under Upload What. Do not select the option to Overwrite Photo Files With The Name, because this will cause problems when using multiple cameras by making all photos from all cameras have the same name. You should also select Enable Automatic Upload When Alerts Trigger Immediately After Media File Creation. This means that as soon as a snapshot is taken, it is uploaded to your Web site. When you have changed these settings, click OK. You have configured Security Monitor Pro to create and upload the snapshots. Now, it’s time to create your Web page.

We’ll create a very simple Web page that does nothing but display the photo and a caption. If you are not familiar with HTML code, here’s a bit of an explanation to what we are creating: All HTML files start with <HTML> and end with </HTML>. Whatever text is between the <Title> and </Title> tags appears in the window title of the browser when this page is loaded. <meta http-equiv=“refresh” content=“60”> tells the browser that every 60 seconds, it should reload this page. Because we will be uploading new images, this means that every minute, the page will update to show the new images. <p> and </p> mark the beginning and end of paragraphs. <img src=“name”> tells the browser to place an image on the page here. <br> tells the browser to include a blank line. Here’s how the HTML code will appear:

<HTML>
<HEAD><Title>One Camera</Title>
<meta http-equiv=“refresh” content=“60”>
</HEAD>
<BODY>
<p>
<img src=“cam1.jpg”><br>
This is my camera.
</p>
</BODY>
</HTML>

Create a file named OneCamera.html that includes this HTML and place it on your Web server in the same directory to which you are uploading your images. Be sure that the name in “img src=” matches the prefix that you set for the camera that is taking the photos. If you are using a UNIX or UNIX-like server, be sure that OneCamera.html is world-readable.

Now, in Security Monitor Pro, click the Start Monitoring With Alerts button for the camera. The event log for your camera (located at the bottom of the preview window) will show photos being taken and uploaded.

Open your Web page in a browser. The exact address will depend on how you set up your site, but generally it would look like this: yoursitesurl.com/OneCamera.html. If everything is set up correctly, you now have a functioning live Web cam page.

Create A Multiple Camera Web Page

Now, we’ll move on to create the multi-camera page. If you have not already done so, install and configure the rest of your cameras. Configure their settings to be the same as the first, except that they each use a different File Name Prefix for the photo file names. Make a copy of OneCamera.html and rename it AllCameras.html. Change the title in the HTML code to say “All Cameras” and the body to include an <img> tag for each of your cameras so that it looks like this:

<HTML>
<HEAD><Title>All Cameras</Title>
<meta http-equiv=“refresh” content=“60”>
</HEAD>
<BODY>
<p>
<img src=“cam1.jpg”><br>
<img src=“cam2.jpg”><br>
<img src=“cam3.jpg”><br>

These are my cameras.
</p>
</BODY>
</HTML>

Again, upload this to your server. Now, in Security Monitor Pro, click Monitor and select Start Monitoring With Alerts. (If a camera is already monitoring, you may have to stop it first.) Configure all the cameras to start monitoring. You now have a working multi-camera page.

However, it probably looks a little odd (see Figure 1). The pictures are all displayed in a single column, they’re different sizes, and they don’t all fit on the screen. We can fix that by creating an HTML table. For this example, we’ll create a table that is three columns wide. The HTML code would look like this:

<HTML>
<HEAD><Title>All Cameras</Title>
<meta http-equiv=“refresh” content=“60”>
</HEAD>
<BODY>
<table>
<tr>
<td><img src=“cam1.jpg” height=“240” width=“320”></td>
<td><img src=“cam2.jpg” height=“240” width=“320”></td>
<td><img src=“cam3.jpg” height=“240” width=“320”></td>
</tr>
</table>
</BODY>
</HTML>

Here is an explanation of the HTML code that we used to create the table: <table> and </table> mark the beginning and end of the table. <tr> and </tr> mark the beginning and end of a table row. <td> and </td> mark the beginning and end of table cells.

Within each cell, we have added height and width parameters. These numbers, in pixels, resize the image (if necessary) to the given size, either stretching or squeezing it to fit. By making all the images the same size on the Web page, we give it a more professional look and also make it easier to fit all the camera images on one page. Figure 2 shows a three-Web cam page with proper formatting.

Polish Your Web Cam Page

There are a few things you can do to make your Web cam page look even better. We can add some text explaining the nature of the page at the top and add a caption for each camera so viewers know what they are seeing. At the top of the page, just before the <table> tag, add:

<p>
This page shows 6 camera images.
</p>

Of course, you can use whatever text fits your purpose. Now, change each <td> tag to <td align=center> and after each <img> tag, add this: <br>Camera Name<br><br>. Replace “Camera Name” with an actual name for your camera, for instance, “Front Door” or “Camera 3.” The <br> tags add a little spacing between the rows of images for readability.

Figure 3 shows a live, six-camera page. Now, we can check all six locations at a glance. One other tip: You’ll notice that Security Monitor Pro is configured to add the date and time to each image. If you see that the date and time are not current, you know that there is probably a problem with uploading, so older images are still on the server and have not been overwritten.

Endless Possibilities

Use the code shown here to make your own Web pages. You can use these techniques for almost any purpose: surveillance, marketing, or fun. Of course, you can do many more things with your multi-camera Web page. You could, for instance, change the background color of the page, make each image a link to a live video stream, or anything else your cleverness can come up with.

by Carl Fink