Cam Javascript Tutorial

You'll notice here the Restil cam, assuming it's operational. We'll go through the code step by step to explain what it does.

<SCRIPT LANGUAGE="JavaScript">
<!--

bName = navigator.appName;
var isopen2=Math.round(1000000+(Math.random() * 1000000));
var camurl2="http://24.119.15.210:8092/singleframe.jpg?";
tmpimage2 = new Image();var first2=1;

function seturl2(txt)
{ camurl2 = txt; }

function doimage2()
{
isopen2++;
document.images.webcam2.src=tmpimage2.src;
tmpimage2.src=camurl2+isopen2;
}

function firstimage2()
{
if (first2 == 1) {
first2 = 0;
isopen2++;
tmpimage2.onload=doimage2;
tmpimage2.src=camurl2+isopen2;
} }

document.write('<IMG border=0 src="http://24.119.15.210:8092/singleframe.jpg" name=webcam2 onload="firstimage2()" height="240" width="320" ismap>');
//-->
</SCRIPT>

The first block of code initializes some variables. isopen2 is a random number. camurl2 is the url of the cam image. tmpimage2 is a temporary image variable.

The last block of code is the image tag which displays the cam image. It's important to specify the height and width since we'll be replacing this image with new ones. The name variable allows us to specify this image to replace. The onload variable tells the javascript engine which function to call when this image is finished loading.

The firstimage2 function sets the onload variable of the image to always call the doimage function anytime an image has been loaded. It also loads an image in the temporary image variable. The +isopen2 variable adds the random number to the end of the url.

The doimage function increments the random number, copies the temporary image into the image on the page, and loads the next image. The isopen2 variable makes sure that the url to the image is always different, at least as far as the browser is concerned. This makes sure that the browser won't think the image is already cached. If the browser thinks the image is cached, it won't grab a new one.

This routine will run until stopped, a new page is loaded, or a broken image is returned.

To use this code for your own site, the only thing you need to change is the camurl2 variable and the url in the image tag. If you're using your cam on drivemeinsane.com, this code is generated automatically when the page is displayed.