Webcam First

Webcam
Purchasing One can find webcams from 20$ which are connected to the USB port of your PC. According to the price, the quality of the image will be +/- good. Even with a camera at 20$ you can film the traffic in your street .... Do not to look for a too important resolution of image, it will make jpg files too long to upload. A resolution max of 640*380 pixels is sufficient.	Connection If you opt for a USB model , the cable will be long enough to put the webcam on your PC and photograph you. If it does not correspond to your plan, there are extension leads of USB cable but it's limited (theorically) to 5m. If you wish to put your camera at more than 5m from your PC, buy a USB HUB 4 inputs / 1 output fed by a small transformer. It will allow you to restart for 5m USB cable or ven more.
Webcam Installation If you wish to put your webcam outside you need to protect it from bad weather. Take an outside lamp (ex halogenous spotlight) remove the inside stuff and put there your webcam. The problem is that the USB connector will not certainly get through . Take out the sharp crowbar and split the thread. Later, with a soldering iron re-connect the 4 wires.	Software Installation With your Webcam the manufacture supplied you the software to make it run in your PC. Install this software, it will set up the compatible Windows drivers . Once being tested the good functioning of the Webcam , install the Webcamfirst software and launch it. If you have only a single video driver, it will start directly . Should the opposite occur, open the tab option and choose the video source. Then select the format and source of your camera. Configuration of Webcamfirst See the special page on the subject

HTML page on your site.

Webcamfirst supplied 2 images for every recording. An image in the resolution of your camera and a typical image stamps which can serve as clickable zone in a web page . These images are in the JPG format and are passed on via FTP to your server of web pages.
The difficulty with a web page is to make sure that when an Internet user calls your page there is indeed the last photo on the server and not an old one in the hidden memory from its computer. With IE5 (Internet Explorer 5) if your page set is of the "popup" type without button of navigation, it will not go to the hidden pages but on the server. Another solution is to put the meta tag hereafter:

<meta http-equiv="Pragma" content="no-cache">

If you refresh your image for example every 20 seconds using webcamfirst, it supposes that your image in the page should be refreshed at the same rate. 3 solutions exist.

Refresh of the complete page

Put the following meta tag:
<meta http-equiv="refresh" content="20">

The whole with an image downloaded by webcamfirst in the same directory as the HTML page and called image.jpg will be as such:

<html>
<head>
<title>Document sans-titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="refresh" content="20">
<meta http-equiv="Pragma" content="no-cache">
</head>

<body bgcolor="#FFFFFF">
 <div align="center"><img src="image.jpg"    width="320" height="240"> </div>
</body>
</html>

Refresh of the picture only within a page using a Java Applet

Many applets to refresh only the picture can be find on the web. One of them is called "JavaCam.class".

In the following example put the applet and the picture (camera.jpg to be refreshed every 20s ) in a sub-directory called java on your website.
<html>
    <head>
         <title>Untitled Document</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" text="#000000">

                 <p>
                 <APPLET code="JavaCam.class" codebase="http://www.mysite.com/java/"    
                 width="320" height="240">
                 <PARAM name="url" value="http://www.mysite.com/java/camera.jpg">
                 <PARAM   name="interval" value="20"></APPLET>
                 </p>

    </body>
 </html>
               
You can download the applet here.

Refresh of the picture only within a page using DHTML

With some line of Javascript you can refresh the picture. The code is a little bit complex. Refer to Javascript websites

Rotating picture over 24h (We use Webcamfirst possibility to store one picture every hour on the server. Tick "hour_index" in the prog.setting page)

Simple code in  javascript


<html>
<head>
<script language=JavaScript>
tableau=new Array;
tableau[0]="Photo_h00.jpg";
tableau[1]="Photo_h01.jpg";
tableau[2]="Photo_h02.jpg";
tableau[3]="Photo_h03.jpg";
tableau[4]="Photo_h04.jpg";
tableau[5]="Photo_h05.jpg";
tableau[6]="Photo_h06.jpg";
tableau[7]="Photo_h07.jpg";
tableau[8]="Photo_h08.jpg";
tableau[9]="Photo_h09.jpg";
tableau[10]="Photo_h10.jpg";
tableau[11]="Photo_h11.jpg";
tableau[12]="Photo_h12.jpg";
tableau[13]="Photo_h13.jpg";
tableau[14]="Photo_h14.jpg";
tableau[15]="Photo_h15.jpg";
tableau[16]="Photo_h16.jpg";
tableau[17]="Photo_h17.jpg";
tableau[18]="Photo_h18.jpg";
tableau[19]="Photo_h19.jpg";
tableau[20]="Photo_h20.jpg";
tableau[21]="Photo_h21.jpg";
tableau[22]="Photo_h22.jpg";
tableau[23]="Photo_h23.jpg";

uneDate= new Date();
var index=uneDate.getHours(); // index initialisation at the current hour

function plus(index)
                       {
   document.image.src=tableau[index];
   if(index==tableau.length-1)
   {
   index=0;
   }
   else
   {
   index++;
   }
   timerID=setTimeout("index=plus(index)",2000); // 2 secondes between each picture
   return index;
   }
 </script>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

 <body onload="index=plus(index)" >

 <div align="center"><img name="image" height=480 width=640> 
 </div>

 <p>&nbsp;</p>
 <p align="center"><img src="Photo_h17.jpg" width="640" height="480"></p>
 </body>
 </html>