How to set up a live webcam

Learn Html free Tutor
W3C School on line.

Steadfast suggestions
in web design
by Craig Saila
www.saila.com

HTML Hell
by Eric Raymond
www.catb.org

CSS for Beginners
by Emil Stenström
http://friendlybit.com/

http://alistapart.com
For People who make websites

Quick and dirty overview on setting up a live webcam page.

I am not going to go into every detail on setting up a live webcam, but I will point you in the right direction to learn. This is just an overview of what is required. You should already have a website to publish this page on, and you should probably know HTML)

First step is to buy a webcam and install it if you don't already have one. Some will plug into the computer with a USB port. The webcam will come with its own software. You can get a webcam from around $10.00 and up. (I bought mine at Al-co for $29.00 and it came with a small microphone. With Windows XP plug and play, just plug it in. Windows will find it.

Your webcam software might be able to take pictures and upload them to your site, but the software that came with my camera did not do this, so I found a free program that would. It is called Fwink. It can be downloaded here:http://lundie.ca/fwink/. Once you install Fwink, it will automatically find your webcams and give you a choice as to which one you want to use. You can tell it how often to take a picture and where to upload it. You have to give it the address to your website and the username and password that you use to upload files or else set up an FTP account on your server just for your webcam page. My Fwink program works great. The program was freezing up, but I found that would only happened when I had the preview window open. When I clicked on the X it closed the window and the Fwink continued to run with an icon in the lower right corner of the computer. To shut it down, you click on "Exit" and then it no longer uploads pictures.

I learned how to set up my webcam at webcamworld.com. I decided I wanted to put other things on my webcam page besides just the webcam picture so I found the code on webcamworld.com for a webcam page with javascript that instructed the browser to refresh just the webcam picture and not the entire page. I got this free javascrilpt webcam page at: http://www.webcamworld.com/ There you can go and get all kinds of instruction on setting up a live webcam site. (The following code is not for beginners.) I used this code along with my own markup to make my page. (The basic page will look like this. Click here.) The javascript markup looks like this:

<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META NAME="KEYWORDS" CONTENT="put keywords separated by commas here">
<META NAME="DESCRIPTION" CONTENT="brief description of your site goes here">
<title>YOUR SITE TITLE GOES HERE</title>
<script language="Javascript">
<!-- hide
var x = 30;
var y = 1;
var now;

function caminawin()
{ window.open('URLTOWEBCAMIMAGE', 'popwin', 'scrollbars=0,status=0,toolbar=0,resizable=0,width=346,height=265,top=150,left=185'); }

function startClock() {
x = x-y;
document.form1.clock.value = x;
if (x <= 1) reload();
timerID = setTimeout("startClock()", 1000);
}

function reload() {
now = new Date();
var camImg = "URLTOWEBCAMIMAGE" + "?" + now.getTime();
document.campicture.src = camImg;
x = 30;
document.form1.clock.value = x;
}
// end hide -->
</script>
</head>
<body bgcolor="white" onLoad="startClock()">
<center>
<font face="Arial,Helvetica,Verdana" size=-1>
<h1>MY WEBCAM PAGE NAME</h1>
<h2>My WebCam page slogan</h2><p><br>
<img name="campicture" src="URLTOWEBCAMIMAGE" border=1 width=320 height=240 alt="My WebCam Image"><br>
<form NAME="form1"><b><font size="-1" face="Arial">AutoReload in ~ </font>
<input TYPE="text" NAME="clock" SIZE="2" VALUE> <font size="-1" face="Arial">seconds.</font></b><br>
[ <a href="javascript:caminawin();">OPEN IN FLOATING WINDOW</a> ]</form>
Please DO NOT hit RELOAD on your browser.
<p><br><br><br>
<h3>Misc stuff here (personal info, WebCam info,...)</h3>
<p><br><br><br>
<hr width=225>
<font size=-2>Base Template courtesy of
<b><i><a href="/" target="_top">WebCam World</a></i></b>.
</font><p><br>
</font>
</center>
</body>
</html>

Bacaracka Web sites for Neophytes If you see a lot of adds for Host Gator here its because I highly recommend it !
Home \| Newbie Lessons \| Bacaracka Hosting Plans \| W3C Schools \| 4inkjets!	Web Pages that suck.com \| My WebWitch Blog

Do you want a live webcam?

Quick and dirty overview on setting up a live webcam page.