Web Design / HTML

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

How to Set up a Webcam Web Page

Basics for Webcam Web Pages

By Jennifer Kyrnin, About.com

Suni-Cam

Jennifer Kyrnin's Cat Cam

Jennifer Kyrnin

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

If you want to set up a Web cam of your own, you'll need to get a camera and some software. I use a Logitech QuickCam, but you can use any type of camera 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 Web site. I use w3cam for Linux, but the Internet Conferencing site has many other lists of Webcam software.

Setting Up the Page

Many people, when they decide to build a Webcam, focus all their time and energy on getting the camera 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 snaps, and use that in the HTML. Don't resize your camera images with the HTML - they are usually fairly grainy and hard to view in the best of times.
  • 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 refresh meta 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.

Explore Web Design / HTML

About.com Special Features

Web Design / HTML

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

©2009 About.com, a part of The New York Times Company.

All rights reserved.