I previously had my webcams page doing a meta-refresh every 30 seconds to reload the entire page and all the images, but that consumes extra time and bandwidth as non-essential data has to be reloaded. I didn’t have a solution, however, until I saw some JavaScript the other day that Kyle is using on a page. All it is is an ingenious little chunk that resets the source of the webcam image at a certain interval, by virtue of the setTimeOut() function. Since I have more than one cam on my page, however, I wanted it to be extensible to any number of cams and for any combination of update intervals. So, I hacked it up a whole bunch, adding arguments to the update function and the result is this:
<script language="JavaScript" type="text/javascript">
<!--
function runCam(name, address, interval) {
tmp = new Date();
tmp = "?"+tmp.getTime();
document.images[name].src = address+tmp;
setTimeout("runCam('"+name+"', '"+address+"', "+interval+")", interval*1000);
}
function startCams() {
runCam('mike', 'http://www.public.asu.edu/~marodri6/webcam.jpg', 5);
runCam('joey', 'http://themikecam.com/joey/webcam.jpg', 31);
runCam('kyle', 'http://kylesdesktop.com/pics/cam.jpg', 31);
}
// -->
</script>
startCams() is called by the onload= attribute in the body tag, and each cam image is identified by it’s respective name= attribute in the img tag. Simply pass the ID of the cam, it’s URL, and the desired update interval to runCam and voila!
Tags: development