Using "JavaScript WebCam"

This page uses JavaScript to automatically update the image.



The image will update every 30 seconds.
(At least it will update every 30 seconds when I'm live on the Internet.)

home.jpg (1434 bytes)

How JavaScript WebCam works ...

The EasyFreeWebCam software has been set up to automatically upload graphic images to a file called: easywebcam.jpg.

JavaScript WebCam automatically downloads easywebcam.jpg every 30 seconds and inserts it onto the page, without changing the rest of the page. The effect is similar to using JavaCam.class.

Line 1
Line 2
Line 3
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
Line 21

Line 22
Line 23

Line 24
<html>
<head>
<title>JavaScript WebCam</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
</head>
<body>
<p align="center"><strong><big><big>Using JavaScript WebCam</big></big></strong></p>
<p align="center">This page uses JavaScript to automatically update the WebCam.</p>
<p align="center"><img src="easywebcam.jpg" name="myImageName" width="320" height="240">
<script language="JavaScript">
// With thanks to the resources at: http://www.irt.org
function reloadImage() {
if (document.images) {
document.images.myImageName.src = 'easywebcam.jpg?' + (new Date()).getTime();
}
setTimeout('reloadImage()',30000);
}
setTimeout('reloadImage()',30000);
</script> </p>
<p align="center"><small>The image will update every 30 seconds.</small></p>
<p><a href="webcam.htm"><img src="home.jpg" width="55" height="64" border="0" alt="home.jpg"></a></p>
</body>
</html>

The key is Line 15.This line compares the Date and Time fields of the file easywebcam.jpg on the server with the one in cache. If they are different the new file (from the server) is downloaded.

Lines 17 and 19 set the delay. In this example it is set to 30 seconds (ie 30 x 1000 milliseconds)

home.jpg (1434 bytes)