HTML Setup

This page will explain how to set up the webcam HTML code manually on your homepage. TinCam can also create a webpage automatically, if you don't want to make the code yourself. See Webpage for details.

The most simple and effective way to make a webcam webpage is to show the picture with a standart <IMG> (image) tag, and write a little java script that will reload the picture at a regular interval. Use the <IMG> tag like this:

<img src="webcam.jpg" alt="My webcam" name="image1">

The 'src' parameter means 'source' and is the location of the image you want to display.
The 'alt' parameter means 'alternate text' and is a text the browser will display while loading, or if the user has disabled graphics.
The 'name' parameter used by the java script when it reloads the picture.

This javascript will reload a picture at a regular interval:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
 		<script language="JavaScript" type="text/javascript">
<!--
interval = 1000;
imgsrc = "TinCam.jpg";

function Refresh() {
   tmp = new Date();
   tmp = "?" + tmp.getTime();
   document.images["image1"].src = imgsrc + tmp;
   setTimeout("Refresh()", interval);
}

Refresh();
// -->
</script>

You will need to modify three things in the code to make it work:
1) In line 3 set the image reload interval. This value is in milliseconds, so in this example it's 1 second.
2) In line 4 set the source of the image file. This must be the same as the 'src' parameter in your <IMG> tag.
3) In line 9 make sure that "image1" in 'document.images["image1"].src' is the same as the 'name' parameter in your <IMG> tag.

If you want more than one picture on the page you must create an <IMG> tag for each image, and give them different names (name parameter). Likewise, in the java script you must duplicate line 9 and make sure to use the same names.