Monday 23 May 2011

How to setup a webcam on your website

Setup a webcam on a website
In 1991, the computer sciences nerds at Cambridge University where tired of walking 2 floors up to the cafeteria and finding and empty coffee pot. They interfaced a camera to a computer on the network, this way they could remotely check the status of the coffee pot. The first webcam was born.

It's so easy to put a webcam online today, on any type of website. You may want to setup a webcam to stream the video online in the following scenarios:
  • There is something worth seeing on your backyard.
  • You want to keep an eye on a child or a pet.
  • You are running a really cool experiment, the whole world should be interested.
  • Traffic cam, security cam...

First setup the webcam to capture the video you need.
  1. Connect the webcam to a computer running a video capture & http server software, such as Zone Trigger software.
  2. In Zone Trigger, connect to the camera, go in the setting and activate the HTTP server mode.
  3. If you have a firewall at home, you might need to configure it so that it forwards the http port for incoming connections. If this step isn't very clear for you, please check out this guide to setup a home web server.

That's it! Now you can connect directly to your computer, from anywhere on the Internet, using any web browser.

But what if I already have a website on my ISP'server (or elsewhere) and I want to integrate my home webcams to it? Can this be done?

Sure.

On your website, add a "live camera" link to your home computer (or router). You can also directly integrate the image of the webcam to the page, so it becomes seamless for the user.

Here is an example for a simple link to an image, put it in an IMG html tag:
src="http://74.57.236.239/Cam1.jpg"

If you need more info about how to setup such a link, how to get your computer's IP, or how to get a fix address for your computer, check out this a HTTP how-to guide.

The default port for http is 80. Note that some ISPs do not allow home computers to host on certain ports for security reasons. Just host on another port, like 90 or 8080. In this case, the link to your computer should include the port number, like this:
src="http://74.57.236.239:8080/Cam1.jpg"

Such a server will probably not blow your monthly bandwidth limit since it does not stream video when no one is watching. But if you have a limit, keep an eye on your limit anyway...

Button line: it's cheap and easy to setup, it's at anyone's reach and it gives an edge to your site. Use it to establish trust with you clientele by showing them the backstage of your operation, or to provide real-time proof in the progression of an experiment. Simple, effective, trustworthy.