Kevy Kam Technical Notes

Some people have asked about my setup, and how I did my web pages, so here's the details.


I'm using a black and white Connectix Quickcam which a friend at the office lent me. This plugs into the parallel port and keyboard port on my office computer

The office computer has a 100baseT internet connection.


I'm using the default Quickcam software for the quickcam.

The video capture software is a program called WebCam 2000. It sets up a web server on my computer. When people connect to that web server, they get the current picture.

Web Page Details

Main "frames" page

The main web page sets up the frames for the other pages. I chose frames for several reasons, but mainly so that I can update the "camera" frame and the "chat" frame without having the overhead of updating the other information as well.

Camera page

The top left (camera) frame is just a regular web page with an <img...> tag that displays the picture uploaded by the QuickPict program. I used the <img> tag option "width="100%"" so the picture always takes up the full width of the frame. That allows you to resize the frame and get larger or smaller versions of the picture. Give it a try, it's cool.

I also used the <meta> tag to tell the camera page to automatically reload itself every 30 seconds. Each time it reloads itself, it grabs the latest version of the image (which happens to be uploaded every 30 seconds).

If you click on the camera page, you get my work calendar. This is done using "Now up To Date" and the web-interface for it. The calendars actually reside on one of the Macintosh computers in our office. We can all modify the calendars using our Macintosh computers, and people can read the calendars using the web interface and any web browser. Neat-o!

Welcome page

The bottom left frame is the "Welcome to Kevy Kam" page. It's just your basic web page except for one thing. You can select the "Remote Kevy Cam" and get a small window with no menus or anything that just contains the file displayed in the "camera" frame. This was done using some javascript code in the "welcome" page to open a new window.

Chat Form page

The chat form in the top right is where you can enter a nickname and a message and have it displayed in the Chat Window (see below). This form uses javascript to save the "status" of the form (your nickname and the "sound" checkbox) as "cookies" in your web browser. This means you can leave the form, and when you come back later it will still remember the nickname and whether or not you want sound enabled. I also used javascript to clear the message box after you hit the "send" button so you don't have to remove that text yourself.

When you "send" your message, a perl script on adds your nickname, the time, and your message to the TOP of a table in the "chat window"'s .html file. This script also removes any messages that are more than 30 minutes old (to make sure this file doesn't grow forever).

The perl script also makes use of "server side includes" to get the last modified date of the file, and the current time. This combined with javascript in the "chat window" page, lets me calculate how old the page is without having to worry about clocks on people's computer not matching mine, or being in a different time zone, etc.

The Chat Window

In the bottom right corner is the chat window. The .html file for this window uses the <meta> tag to automatically reload itself every 15 seconds. It also compares the "current time" with the "last modified" date on the file to see if it is less than 15 seconds.

If the file is less than 15 seconds old, the Javascript writes the "New Message" flashing text. It then examines the "sound" cookie to see if sound is enabled, and if so adds the <embed> tag to the HTML so that it will use the appropriate plug-in to play the "bleep" sound.

The end result is that if someone enters a message, everyone viewing this page should see this new message within 15 seconds (when the page reloads). Since the page is less than 15 seconds old at this point (because it was changed) there is a visual notification of the new message, and if sound is enabled, an audio notification as well. That way, if I have the window hidden behind other windows, or if I'm not sitting right at the computer, I'll still know someone left a mesage and wants to chat.

The reason for the "sound" checkbox is that not everyone wants sound, and some computers do not have the proper plugins installed to play the sound and instead display nasty error boxes. I wanted a way for those people to turn sound off, but still let me use sound if I wanted to.