Live Webcam Tutorial

Set up a live webcam for your website, and allow users to view a snapshot of your facility every minute. We have become a big fans of the Logitech quickcam 9000, as it not only serves as a good quality webcam, but it can also be used to provide HD timelapse, live webcam, and even motion sensor video for wildlife (aka security).

Click the image to view live webcam page.

Tutorials  webcam

In this following tutorial I’ll show you how to set it up with your website so your users can view a snapshot of a predefined area every minute.

First step is to set the camera up with a view you would like to share. I have mine taped against the window as it is not weather proofed yet, one way of doing this is to place the camera inside a torch. Once you have set your desired view, download the following: Fwink webcam software and some javascript to display and refresh the image on your webpage from Ajaxcam.

You will need to have access to your webspace and know your FTP username and password, as Fwink software basically takes the picture then uploads it to a webfolder of your choice. I called mine ‘webcam’.

So open Fwink and on the ‘File Transfer’ tab, enter your FTP details and your directory, in my case the folder ‘webcam’ and select how often you would like an image to be taken.

Select ‘Video Capture’ tab and enter your the size you would like to capture your images, bearing mind the larger the size, the more of your bandwidth will be taxed. There is a button called images controls, click this and your images controls box will appear. If you are shooting landscape it is a sensible idea to turn ‘Face Tracking’ off. Select ‘Device settings’ tab and adjust settings as you wish. If you have any problems with focus or exposure, this is the place to fix it. To turn autofocus off, check the focus box and make sure setting is on 0. The ‘Advanced’ tab I have checked the automatic gain control, and have ‘Antiflicker’ set to 50 HZ. Click ok once you are happy.

There are 2 more tabs on the Fwink software, that allow you to overlay text or images, its up to you but does not need much explaining.

Next you need to create a html page with whatever web/text editor you use. In the head and body sections place the javascript and body html code provided by Ajaxcam. Change the image source to your own, and upload your html file to your ‘webcam’ directory folder.

Now the fun part, visit the url of your webpage online to check all is working.

The only danger to this great trick is that is might make you want to move somewhere with a better view.

You may also like