How to capture and remotely save a webcam screen grab

Remote capture webcam images

I’ve had this WiFi enabled webcam looking down my driveway for over a year now. Since I work at home, it’s great for monitoring when deliveries, Jehova’s Witnesses and family members approach the house.

It is also useful for checking on home when I am away on vacation. I have grown to rely on it daily and I keep a small browser window with the video stream always up on one of my work monitors.

Up until this week, however, I didn’t remotely save any captured data from the camera. After reading about a home break-in over the weekend I decided to fix this. Below are the steps to quickly and easily store and display a series of 5-minute increment snapshot from your home webcam to a remote server.

Here is a sample day from my camera and my detailed reply on Wantbox to someone who was looking for an outdoor wireless security camera.

Prerequisites

  1. A web accessible webcam.
  2. A remote server (shared is fine, no root access needed, I use and love Dreamhost).

 The basic steps

  1. Setup your home router to allow remote viewing of your webcam.
  2. Figure out what the image file for your video stream is. Mine is “snapshot.cgi”. View source on the web page that displays your video stream and search the HTML until you find the correct file.
  3. Create a shell script on your server which wgets and saves the image.
  4. Create a cron job which fires off the script every five minutes.
  5. Monitor and enjoy knowing that you’ll at least have a nice snapshot of you home intruder’s car.

Note: my simple little webcam has a few modes: one is a live feed from the camera and the other is tailored for smart phones and updates the camera image every few seconds. It was on this second page where I found the appropriate video image file for grabbing.

The cron job

Nothing fancy here, simply “crontab -e” on your remote server and add the following entry to call the shell script every five minutes.

[sourcecode language="bash"]# Grab a screen cap every 5 minutes 0,5,10,15,20,25,30,35,40,45,50,55 * * * * ~/yourdomain.com/assets/grab_snap.sh[/sourcecode]

The shell script

The shell script does a few things:

  1. Parses the current date into its year, month and day parts. You need this because the snaps are stored in a directory like “/2011/10/18/”.
  2. Checks if today’s target directory exists, if not it creates it and creates a symbolic link to a standard “index.html” file.
  3. Fires off wget to grab a screen grab from your home webcam. A sample snapshot filename is “snap_19:55_PDT.jpg”.
Note: by using the “–output-document” flag of wget you can save the snapshot into a file name that is more useful. Also, since each day’s “index.html” file is actually a symbolic link back to a single “index.html” file it is very easy to mess around with the page and have your changes propagate to every day’s index file.
[sourcecode language="bash"]#!/bin/bash # # Grab and save a frame from our home driveway camera. # Usage: ./grab_snap.sh # Sample: 0,5,10,15,20,25,30,35,40,45,50,55 * * * * ~/yourdomain.com/grab_snap.sh # curryear="`date +%Y`" currmonth="`date +%m`" currday="`date +%d`" currtime="`date +%H:%M_%Z`" outfile="/home/you/yourdomain.com/snaps/${curryear}/${currmonth}/${currday}/snap_${currtime}.jpg" target="http://yourhome.com:50881/snapshot.cgi?${currday}-${currtime}" # Check if this year's directory exists if [ ! -d ~/yourdomain.com/snaps/${curryear} ]; then mkdir ~/yourdomain.com/snaps/${curryear} fi # Check if this month's directory exists if [ ! -d ~/yourdomain.com/snaps/${curryear}/${currmonth}/ ]; then mkdir ~/yourdomain.com/snaps/${curryear}/${currmonth}/ fi # Check if this day's directory exists if [ ! -d ~/yourdomain.com/snaps/${curryear}/${currmonth}/${currday}/ ]; then mkdir ~/yourdomain.com/snaps/${curryear}/${currmonth}/${currday}/ ln -s ~/yourdomain.com/assets/index.html ~/yourdomain.com/snaps/${curryear}/${currmonth}/${currday}/index.html fi # Grab the screen cap wget --user=yourcamerausername --password='yourcamerapassword' --output-document=$outfile $target[/sourcecode]

The index.html file
This index file shows all of the thumbnails from your webcam and displays the full sized image when you rollover one (see demo). There’s a little bit of CSS embedded in the head. There are no other dependencies outside of this index file and the captured data.

[sourcecode language="html"]
[/sourcecode]

Use an .htaccess file to protect your directory (for Apache users)
Personally, I don’t want people rooting around my webcam image history, so I have protected my server by placing the following .htaccess file at the root level of my camera archive web server.

You can create the appropriate entry in the passwd file by executing: “htpasswd -c /home/you/.htpasswds/passwd yourname”. When you are prompted enter the password that your would like to use.

[sourcecode language="html"]AuthName "Dialog prompt" AuthType Basic AuthUserFile /home/you/.htpasswds/passwd Require valid-user[/sourcecode]

That’s all she wrote. If and when you improve on my default index.html file please share it with me!