Everyone wants to keep their home secure. If zombies have swarmed your house, you want to know it's not safe to return, RIGHT?

What better way to do this than to set up a surveillance system?

Now it's easier than ever to have.

And, you don't have to shell out hundreds of dollars to make sure the infected haven't infested your home. OK, I'll get back to reality... This instructable is good for catching thieves and mostly just keeping tabs on your pets throughout the day.

There are plenty of free websites where you can "subscribe" and they will host your web cam. But these sites often don't store all the photos taken by your cam -- at least the free ones don't. Most often, these sites simply post the most recent photo and then refresh it -- saving over the old one. In my book, that's just not good enough.

What happens if some low-life robber breaks into your place and steals all of your stuff? In order for you to catch someone in the act, you'd have to sit in front of the computer all day long. Otherwise, you have any idea of who's broken in.

In this instructable, I'll show you how to set up an inexpensive, yet reliable system to capture photos, upload them to your website, and rename them with a time stamp. This way, ALL of the photos taken are saved on your server, and you can delete them at your convenience. Now, even if your computer is stolen, you'll likely have the photo evidence to catch the low-life thief.

Step 1: Materials List

You will need:
• Webcam
• Computer
• Internet access
• Domain name and hosting account -- I use Godaddy, you can get a domain for 9.99 and three years of hosting for pretty cheap (Google search for hosting promocodes).
• Php enabled server -- ask your provider if you don't know if you have this.
• Some programming knowledge - though I will be providing you with the code you need, so you can really just copy and paste.
• FWink -- a free webcam program you can download here: http://www.lundie.ca/fwink/

Files -- I will give you the scripts for these:
index.php -- a page to display the most recent photo
stamp.php -- a page that renames the most recent photo with a date and time stamp (you'll leave this page up and running when you leave your home)
all.php -- a page to list all of the photos

Optional parts to make your cam pan from left to right:
• Arduino or, better yet, a DIY-Duino ; - )
• Servo motor
• 9 Volt battery
• Duct tape
• Some kind of stand to tape the webcam to, unless you are using your computer's webcam.

Step 2: Set Up the Folders

OK, lets start with setting up your site.

In the root directory of your site, create a folder named "_fwink" (note the underscore) .
Here is where you will save the three files:
index.php
stamp.php
all.php

You'll create these files in the next three steps.

Inside the _fwink folder, create another folder called "photos".
Here is where all of the photos will be uploaded.

You MUST name all of these files and folders EXACTLY like this, or the code will not work.

Step 3: Create the Index.php File

The next three steps will contain the code you need for the three files.
The pages I created are pretty simple.
If you are keen on code, then you can customize them however you wish, adding colors and the like.
For this instructable, I kept the design at the bare minimum.

Open your coding program. I use Dreamweaver.
Note, you MUST have php enabled on your server for this instructable to work.
Contact your hosting provider to see if you have it enabled.

Create the index.php file, which will show you the most recent photo taken.

Here is the code for the index.php file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webcam</title>


<META HTTP-EQUIV="REFRESH" CONTENT="5">

</head>

<body>
<table width="320" border="0" cellspacing="0" cellpadding="10" align='center'>


<tr><td><?php echo "<img src='photos/recent.jpg?r=".rand(9,9999999)."' width='640' height='480' border='1'>"; ?></td></tr>

<tr><td align="center">
Image refreshes every 5 seconds.
</td></tr>

<tr><td align="center">

<a href='all.php'>Show all</a>
</td></tr>
</table>

</body>
</html>


This part of the code:
<META HTTP-EQUIV="REFRESH" CONTENT="5">
Refreshes the page every 5 seconds.

Save the file as index.php and upload it into the _fwink folder on your server.

The image attached is a sample of what you'd hope to see when you have the camera set up -- a messy house, lazy animals and no zombies or robbers.

You'll set up the camera later.

Step 4: Create the Stamp.php File

The page stamp.php will need to stay up and running on your computer for everything to work.
If you close the window, the photo will NOT be copied and renamed, and you will only have the most recent photo.

What does this file/page do?
First, it looks to see if there is a new "webcam.jpg" file in the photo folder.
If there is a file, it copies the file and renaes it "recent.jpg"
Then, "recent.jpg" is renamed with the current date and time -- this way, your photo is saved when the Fwink program writes over it with the next photo.
And this will be done every 5 seconds.

The page will tell you if it has found a new photo or not with a simple message:
"Time stamping most recent photo" or "No new photo" will show on the page.

Here is the code for the stamp.php file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time Stamp Photos</title>

<META HTTP-EQUIV="REFRESH" CONTENT="5">
</head>

<body>
<?php
if(file_exists("photos/webcam.jpg")){
echo "Time stamping most recent photo<br><br>";
copy("photos/webcam.jpg","photos/recent.jpg");
$stamp=date('Y-m-d-_h-i-s');
rename("photos/webcam.jpg","photos/".$stamp.".jpg");
}else{
echo "No new photo";
}

?>
</body>
</html>


Again,
<META HTTP-EQUIV="REFRESH" CONTENT="5">
this refreses the page ever 5 seconds.
Thus, your file is being renamed every 5 seconds.

Step 5: Create the All.php File

The file all.php simply displays all of the photos that have been taken.

Here is the code for this file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Photos</title>
</head>
<body>
<?php
$dir = 'photos/';
$files = scandir($dir);
foreach($files as $ind_file){
if($ind_file=="." || $ind_file==".."){
// do nothing
}else{
echo "<img src='photos/".$ind_file."'>";
echo "<br>";
echo $ind_file;
echo "<br><br>";
}
}
?>
</body>
</html>

Step 6: Downloading and Setting Up Fwink

The program you'll use to capture and upload photos to your site is called Fwink.

You can download the program for free here: http://www.lundie.ca/fwink/

This program will upload a photo to your server named "webcam.jpg" -- more details on this later.

Install the program and lets get started setting up the photo uploads.

Click the "Settings..." button to set up your uploads.

Step 7: Setting Up the Uploads

In the Settings menu, be sure you are on the "File Transfer" tab.

Under FTP Settings:
• In the "FTP Server" area, enter the name of your website. Example: www.yoursitehere.com
• Enter the username you use to acces your server, and the password.
• Set the Directory as shown in the photo: _fwink/photos
• Set the File Name as webcam.jpg
• You may need to check off the "Use Passive FTP" if the upload is not working.

Under Timing:
• Set "Capture an image every:" to 5 seconds.

Step 8: Setting Up the Video Capture Tab

Click on the "Video Capture" tab, here is where you will select your webcam.
If your webcam is not plugged in, of course it will not be recognised.
So plug in your cam. You may need to restart the program for it to be recognised.

Under "Video Device", click the "Change Device" button.
A windo will pop up with a list of devices that are recognised by Fwink.
Select the cam you want to use.
At this point, if you have changed your cam, you will need to restart the program.

After you restart Fwink, you should see what your cam is seeing on the main menu.
Get back to Settings, and the Video Capture tab.

Under "Resize Captured Image" select the size of the photo you want to create.
Note that larger images will take longer to upload your server.

Step 9: Setting Up the Text Effects Tab

Click on the "Text Effects" tab.

This tab is pretty simple to understand.

If you want a time stamp printed on your image, check off the "Date" and "Time" boxes.

Add any of the extra effects you want, I just use the simple date and time.

Click "OK" to save your changes.

Your webcam will begin taking photos every 5 seconds and uploading them to your server.

Note, you will obviously need to be connected to the Internet.

Step 10: What Is Happening Now?

So what is actually happening now?

Every 5 seconds, your webcam is taking a photo, naming it "webcam.jpg" and uploading it to your server.

The web page you have open: http://www.yourwebsite.com/_fwink/stamp.php is checking for "webcam.jpg" in the "photos" folder.

If a "webcam.jpg" is found, it is renamed with the filename "recent.jpg" and also copied to the same folder with the filename as a time stamp -- something like "2011-03-23_09-02-28.jpg"

The cam will continue to upload more photos until you exit out of the program and close the internet window with "stamp.php" running.

There are tons of crafty ways you can hide your webcam in a stuffed animal or a host of other clever disguises.

If you are using your computer's webcam, or just want to use a fixed webcam, you can stop here.
However, if you want the webcam to pan from left to right on a 180-degree axis, stay tuned for the fun part in the next step!

Step 11: Use a Microcontroller to Pan the Camera

For this, you will need:
• An Arduino or DIY-Duino (make one here)
• Servo motor -- regular (180-degrees) NOT full-rotation
• Webcam
• A stand -- to secure the servo and cam
• Duct tape
• Small piece of plexi-glass
• Simple panning code (I'll give this to you)

You can see how I set everything up from the photo in step 1, but I will describe it anyway.
For this project, I didn't want to screw the servo directly to the base of the webcam.
So I cut out a small piece of square plexi-glass with my Dremel and used that.
I drilled holes into the plexi and screwed it to the servo.
Then, I used duct tape to secure the servo to the bottom of the webcam
I duct-taped the servo to the stand (which was the base of an old computer monitor).
I also wrapped duct tape around the base to secure the webcam's cord, just so the cord wasn't swinging all over the place when it rotated.
I plugged the output pin of the servo into pin 5 of my DIY-Duino, red to 5V, black to ground.
Then I plugged in a 9-volt battery to give it life.
Note: Servos suck up a lot of power, so a battery isn't going to last long.
A wall plug is you best bet for continuous, all-day power.

Check out the photos for more notes.

Some closing notes:
- Again, you MUST have php enabled on your server for this to work.
- You need to leave the stamp.php page open or the program will just be writing over the old photo and not copying it to a time-stamped filename.

If you have any questions, or something isn't working for you, leave a comment. I'll see what I can do to help.

Step 12: Upload the Sketch

Here is the sketch to rotate the servo.
It's easily modified so you can make the turning delay, etc. anything you want.
Commented to let you know what's going on.

// ------- Controlling the webcam with a servo
// ------- Corey Kingsbury
// -------www.coreykingsbury.com

#include <Servo.h>
Servo myservo; // create servo object to control a servo
int servoDegrees=0;
int modValue=20; // sets the degree increment
int centerDelay=10000; // sets the center delay to 10 seconds
int mainDelay=6000; // set all other position delays to 6 seconds

void setup(){
   myservo.attach(5); // Attach the servo to pin 5
}

void loop(){
    servoDegrees=servoDegrees+modValue; // set the degrees to equal current degrees plus the increment value
   if(servoDegrees>120){ // if the degrees are greater than 120, then begin to count down
     modValue=-20;
   }
   if(servoDegrees<0){// if the degrees are less than 0, then begin to count up
     modValue=20;
   }

    myservo.write(servoDegrees); // sets servo position according to the degrees in "servoDegrees"

   if(servoDegrees>=90 && servoDegrees<=110){ // sets a longer delay when the camera is facing straight out
     delay(centerDelay);
   }else{
     delay(mainDelay); // the normal delay
   }
}