1. Computing

Discuss in my forum

How to Set up a Webcam Web Page

Basics for Webcam Web Pages

By

Webcams are one of the oldest tricks on the Internet. Back when Netscape was young, my friends and I used to wander by the Amazing FishCam all the time. It is said to be one of the oldest live cameras on the Internet, starting on or before September 13, 1994.

If you want to set up a webcam of your own, you'll need to get a webcam and some webcam software.

I use a Logitech QuickCam (compare prices), but you can use any type of webcam you would like.

Most of the cameras you buy on the market right now come with webcam software, but if they don't you'll need to get software that will both capture the picture and FTP it to your website. I use w3cam for Linux.

Setting Up the Webcam Web Page

Many people, when they decide to build a webcam, focus all their time and energy on getting the webcam and the software. But the web page it's on is nearly as important. If you don't have certain things set correctly, your webcam can become a "webcan't".

First there's the image. Make sure:

  • The image should have a generic filename - no timestamps - I recommend something like webcam.jpg
  • Know what size image your camera takes, and use that in the HTML. Don't resize your camera images with the HTML - they are usually fairly grainy and hard to view and browser resizing will make that worse.
  • Check your FTP settings and know where the image will be uploaded to.
  • Write your image tag, the way you would any valid XHTML image tag. Include height and width and don't forget the alt text:
    <img src="webcam.jpg" width="200" height="200" border="0" alt="my cam pic" />

Then there's the web page itself. Your page should automatically reload and it should not be cached. This will insure that your cam viewers get a new image every time. Here's how you do that:

In the <head> of your HTML document, place the following two lines:

<meta http-equiv="refresh" content="30" />
<meta http-equiv="expires" content="0" />

In the meta refresh tag, if you want your page to refresh less often than every 30 seconds, change the content="30" to something other than 30: 60 (1 minute), 300 (5 minutes), etc. The expires tag is important because it affects the cache of web browsers, so that the page is not cached but rather pulled from the server on every load.

With these simple tips you can have a webcam up and running quickly and easily.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. About.com Web Design A to Z
  5. Web Design/HTML Articles H
  6. Webcams - How to Set Up a Webcam Page - How to Set Up a Live Web Camera Web Page

©2014 About.com. All rights reserved.