How to build a WebCam Web Page

Do I need a special camera?
No, most modern IP video CCTV cameras can be used to build your webcam page, for ease of use we recommend the Axis range of cameras as they share a common menu structure and are very easy to configure. The important part is your camera must be capable of saving an image to an FTP server and allow overwrite of image name.

Do I need some programming knowledge ?
Yes, you will need some basic understanding of HTML webpage authoring and understanding simple Javascript will make your task much easier. Our step by step guide will lead you through the coding of your page. If you use an online editor you may be able to paste the Javascript directly into your page, please follow the sites instruction. Our instruction assumes you are using a HTML editor and building your page manually.

Step 1: Upload the images to FTP.
FTP image transfer is relatively straight forward; following your camera manufacturer instruction set up your FTP server you will typically need username, password, IP Address of server and folder name to save the image. You can also choose an image name at this stage. Most cameras now include a test option to make sure you have the FTP set-up correct.

Next you will need to setup a timer event to force the camera to send a periodic image, do not set this too fast, typically once a minute is good for testing, your FTP server provider may limit how often you can update this image.

Test the FTP upload is working
Using your FTP server web address and your favourite browser, navigate to the saved webcam image http://myserver/folder/webcam.jpg and use refresh (F5) to check if the image is updating. Hopefully everything works and you're ready to move on to coding your page.


Step 2: Write the page.
In order to display the webcam image you need to include an image placeholder on your page that matches the size and resolution of your image, now if we just ran a simple timer and repeatedly requested the image the picture will not update as your explorer will always choose to display the cached image not the new one, this is where the Javascript comes in to overcome this little problem.

The example we have provided is a simple way of overcoming the problem with the image cache, by added a variable to the image name we can force the browser to always request a new image, for this purpose we use the current time as a unique id.

Step 3: The Code.

<img src="" width="220px" height="132px" name="image" title="My Webcam"></img>
<!-- Image placeholder-->

<script language="JavaScript" type="text/javascript">

var t = 1 // interval in seconds
image = "http://www.mywebcamsite.com/webcam.jpg"
//name of the image

function Start() {
tmp = new Date();
// Gets current date and time
tmp = "?"+tmp.getTime()
//adds unique number after image to force new image
document.images["image"].src = image+tmp //changes image in image placeholde 'image'
setTimeout("Start()", t*1000)
// forces routine to run after timeout 1000 = 1 second
}
Start();
// forces routine to start

</script>

The code and examples shown here are a simple explanation and demonstration on how to build and display your own webcam on your website, this is not the only way to do this and we have an extensive code library abd scripts including background image refresh to speed up perceived image refresh. This same coding is used on our Mobile 4G RDC CCTV cameras and other image viewing applications. Rather than use a timer to upload, try motion or analytical trigger events for your webcam to keep content fresh and relevant. Please feel free to use this code and link to our page, the code is distributed without warranty and for example only.

Live WebCam demo



Here is a simple example of the code working with a Panasonic 4K Full HD CCTV camera that has been configured as a webcam. The camera is installed in St. Albans

Other Questions

Adding Image Cache

This code allows a background image placeholder to upload the image in the background, then once loaded refresh the image placeholder visible on the webpage, it take advantage of the onload command to run a function to load the image to the image placeholder.

Step 1: Add the function.

Place this code in the head section of your document, be carefull how the code displays here the command starting document. ends with .src; all on the same line.

<script>
function update_image(){
document.images["image"].src= document.images["cache"].src;
}
</script>

Now change the main code in the start function to change the image ID cache *1 and add a second image placeholder *2:

*1 document.images["cache"].src =

*2 <img src="" width="0" height="0" name="cache" id="cache" onload="update_image()"><img>