Easy Home Surveillance
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.
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.
Set Up the Folders
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.
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>
<!-- this line refreshes the page every 5 seconds -->
<META HTTP-EQUIV="REFRESH" CONTENT="5">
</head>
<body>
<table width="320" border="0" cellspacing="0" cellpadding="10" align='center'>
<!-- this line gets the most recent uploaded photo, the rand() function allows for any cache that might show old photos -->
<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">
<!-- this is a link to the page that will list all of the photos you have saved -->
<a href='all.php'>Show all</a>
</td></tr>
</table>
</body>
</html>
<!-- End of the Code -->
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.
Create the Stamp.php File
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>
<!-- this line refreshes the page every 5 seconds so we can check for new photos and rename them-->
<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>
<!-- end of code -->
Again,
<META HTTP-EQUIV="REFRESH" CONTENT="5">
this refreses the page ever 5 seconds.
Thus, your file is being renamed every 5 seconds.
Create the All.php File
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>
Downloading and Setting Up 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.
Setting Up the Uploads
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.
Setting Up the Video Capture Tab
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.
Setting Up 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.
What Is 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!
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.
Upload the Sketch
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
}
}