There are an increasing amount of webcams on the internet, everyday thousands of new ones appear and at the same time thousands go offline. This article is going to show you how to get a webcam up and running online and streaming via a web interface(i.e your website).

The result of this tutorial will look something like this:

Adcuz Webcam Tutorial
Click the image to see a live streaming version

Firstly, you’re going to need to decide what sort of camera you want to use. There are two options, USB or Composite video. USB is the easiest to set up and composite is the most flexible. I chose composite as I needed to run a long cable from the location of the camera to the machine that sends the image to internet. If you just want a webcam on your desk pointing at you then just use a USB one to make your life a lot easier.

Here is a list of equipment you’ll need depending on which camera type you use.

USB
USB Webcam
Computer with USB port
Windows XP/2k
Composite
Capture card
Composite video RCA connectors/cable
Compatible camera (More info later on in the tutorial)

Choosing Your Hardware

If you picked a USB webcam then skip this section.

There is so much to choose from when it comes to capture cards and cameras. For this tutorial I’m going to assume that you want an outdoor webcam, if not you can still follow this but you’ll want to get a cheaper indoor camera. So, to start you’ll need a device that’s going to intercept that analog signal that your camera gives you. For this, you’ll need something called a video capture card, also known as a TV card. There are a lot of people who say don’t go for the cheap ones as they are bad quality. This is true but for this particular application it doesn’t matter as we will be broadcasting our webcam image at 320×240 which means the quality of the TV card doesn’t matter. For this tutorial I recommend a Hauppauge WinTV variety card, like this one:

You now have a TV card, you are almost ready to start putting your webcam setup together, of course you’re going nowhere without an actual webcam! For this I would recommend something a bit higher quality and with a good build quality. The weather is getting more and more extreme so you’ll need one with decent weather resistance too. For an example of the webcam used in the demo I showed you earlier in the tutorial look here. This webcam is actually a very cheap indoor one I bought from Hong Kong on ebay! The reason I used one of these is the shed roof covers up and parts that are open to the elements so I won’t have any problems with rain getting in. Not only that it is easily replaceable but for most people this isn’t the best option as you’ll probably not have a convenient shed roof where you want to place yours. This is where I suggest you buy a decent quality CCTV camera designed to be outdoors. I recommend that you use the camera shown here:

Now, you have everything you need hardware wise to get this show on the road! All you need to do is install it. To do this I suggest you DO read the instructions that come with the camera. It will almost always show you exactly what to do. Just don’t wire it to your TV as that part of the instructions is what you need to ignore. Wire it as if the computer you will install the capture card in is going to be your TV, you should have to problems at this stage.

I’m not going to run through how to install a capture card in your PC. That is easily done by you if you know how or you can get a friend or a professional in to do it for you.

Adcuz.co.uk is not responsible for any damage caused to you or your computer when trying to install your capture card.

Now, let’s get down to business. I’ll assume that you already have the capture card installed and you have all the drivers installed too. If you’ve got this far then the last bits will be easy! One last thing you must do on the hardware front is turn the camera power ON and make sure the RCA cable is plugged into the capture card. (little yellow plug next to the ariel input).

Setting Up The Software

Welcome back USB people! So now you have all this camera stuff hooked up, but no image to see! Don’t worry this next section will show you how to do everything, from getting the image on your screen all the way to putting it on your website, blog or any other form of web interface. I’ll even show you how to relay the image to your server to relieve strain off your home connection.

To get the image from the camera to the internet you’ll need a piece of software called a webcam server, what this does is takes a snapshot from the camera every time an HTTP request is sent to it. It then compresses the image to a JPG image and sends it to the viewer. If on a fast enough connection it can be done fast enough to be real time, to do this on a home DSL connection would be difficult as most upload speeds are laughable at the moment. Unless of course you live in somewhere like Hong Kong.

Now you know what the software does, you probably need to download it and have a look. So the software we’ll be using is Webcam 2000, It seems to have been abandoned at the moment but it works a treat anyway, I’ve been using this one for about 3 years now.

To download it directly, click here.

Once downloaded, unzip the program to a folder anywhere you like on your computer. The good thing about Webcam2000 is it doesn’t require any installation, it just works right out of the box. Now you have it un zipped and ready to go, open up WebCam2000.exe and you’ll probably see a black screen. Or, if it has auto detected your USB cam or capture card you’ll see something like this:

Webcam 2000 - Adcuz

Now, you’ll need to check that you are receiving an image from the camera, click the tick box that says “View Preview”. You should see a live image of the camera. If not then you’ll need to specify the capture source. To do this, in the top menu go to Video, you’ll see a drop down menu with the name of the capture sources installed on your computer. Click on the one that you’ve just installed. Now, you’ll see a live image!

If your image looks fuzzy and has a lot of static on it you probably need to change the filter, try changing it to PAL if you’re in Europe.

Now you have your live image playing on your screen you need to get it on the internet, this part can be difficult depending on your network setup. Due to my laziness, I’ll assume that you have a router with a firewall and no other firewalls installed on the machine you are hosting the camera from. First, lets be sure the webcam server has the HTTP server enabled. So, on the Webcam 2000 interface, make sure “Enable Web Server” and “Live” tick boxes are checked. The next step is to specify which port you want the server to run on, this is easy! In the top menu: Go to - Options > Web Server. You’ll get this screen:

Adcuz - Webcam 2000 Web Server

In the box that says “Image server listens on port” change the number to 8080 (usually default) and press OK. This is all the configuration you need to do now, the last part of this section is to forward the port on your router to allow people to see the camera from the internet. Firstly, take a note of the make and model number of your router. Then click here for instructions on how to forward Port 8080.

Displaying Your Webcam On Your Website/Blog

This part is tricky for anyone who is new to this, I’ll try my best to explain it in the easiest way possible. So, the main part required is all done and you’ve got your equipment setup. Now you need to put the webcam on your website. Firstly you need to find out what your IP address is. To do this you’ll need to visit this site which will tell you what your IP address is. Some hosts use proxies and these sites cannot detect your true IP. If this is the case then you’ll need to get in contact with me or contact your ISP who will tell you your IP. Once you know your IP address you MUST take not of it. Write it down and keep it close to hand it’s vital for this next bit.

Firstly, I’ll assume you already have a website and you know something about HTML code. Next you need to copy and paste the following piece of code to where you want the webcam stream to be displayed.

<SCRIPT LANGUAGE="JavaScript">
<!–
bName = navigator.appName;
var isopen=Math.round(1000000+(Math.random() * 1000000));
var camurl="http://0.0.0.0:8080?";
tmpimage = new Image();var first=1;
function seturl(txt)
{ camurl = txt; }
function doimage()
{
isopen++;
document.images.webcam.src=tmpimage.src;
tmpimage.src=camurl+isopen;
}
function firstimage()
{
if (first == 1) {
first = 0;
isopen++;
tmpimage.onload=doimage;
tmpimage.src=camurl+isopen;
} }

document.write(’<IMG border=0 src="http://0.0.0.0:8080" name=webcam onload="firstimage()" height="240" width="320">’);

//–>

</SCRIPT>

Where is says http://0.0.0.0:8080 (in 2 places) you need to replace the 0’s with the numbers in your IP address, but be sure to keep the dots, and the :8080 in place or it won’t work. Once you’ve done that, save the page and view it, you’ll see a moving image from your camera!

That’s it, you’ve done it! Well done to you.

« Go back to the tutorials index.