Tutorial: Poor man's Macbook webcam that posts to internet.

Submitted by admin on August 6, 2008 - 1:18pm
  • Wig Tricks
Tutorial: Poor man's Macbook webcam that posts to internet.

You could use the Macbook as a webcam and monitor an office you were not in.

There are a couple software packages to make your Macbook into a webcam. Most wind up costing some money. With a little ingenuity, you can use some free utilities to get the job done cheap. This is not terribly hard to do. You'll need some comfort on the command line along with good knowledge of how to implement secure shell access to your server. We will be using:

  • The built in iSight camera found on a Macbook
  • The crontab file
  • scp (secure copy protocol) and ssh (secure shell protocol)
  • The iSightCapture script
  • An HTML iFrame
  • Your own hosting server with shell access

STEP ONE:

The big workhorse here is the iSightCapture script. Download the script and make sure it's executable. You can open your terminal and use:

[lance@lawn ~]$ ls -la isightcapture
-rwxr-xr-x@ 1 lance  lance  43340 Apr 23  2006 isightcapture

If you don't see at like the above that starts out "-rwx", you can do something like this to make it executable:

[lance@lawn ~]$ chmod 755 isightcapture

The iSightCapture script is easy enough to use. From the command line you can use something like this to get the iSightCamera to take a picture:

[lance@lawn ~]$ ./isightcapture ~/Desktop/my_photo.jpg

STEP TWO:

What we want to do is automate the process so pictures keep getting taken without any intervention. I've been using a screen-shot script for some time that a friend helped me build. The script lets me use a keyboard shortcut to take a screen shot and send it to a web server for someone else to see.

There is a similar service for Mac called GrabUp which is a super easy GUI solution. For this tutorial I will bypass GrabUp and use my script. The parts that say "your_user" and "your_ip" will be your own unique user-name and address. You may also find that your paths are slightly different. Notes on scp and ssh: These are great tools that some people are highly familiar with and others are clueless. There are a lot of great tutorials. You can Google for "scp" and "ssh" along with "tutorial" or "how to". I learned a great deal from this tutorial over at slice host. Here is another tutorial.

#! /bin/bash
INTERVAL=1
X=1
mkdir -p /tmp/screenshots

while [ $INTERVAL -lt 3 ]
	do
NOW=`date +%Y-%m-%d_Hh-%Mm-%Ss`
/Users/lance/scripts/isightcapture /tmp/screenshots/$NOW.png
scp /tmp/screenshots/$NOW.png your_user@your_ip:~/public_html/webcam/archive/images/$NOW.png
ssh your_user@your_ip cp public_html/webcam/archive/images/$NOW.png public_html/webcam/current.png
sleep 20
INTERVAL=$((X + $INTERVAL))
done

Here's what's going on:

  1. We need a unique name for the file, so we make variable using the current time stamp. Any time stamp is unique.
  2. We trigger the iSight Capture script to go off and name the image with the current time variable.
  3. The scp command is used to copy the image to a directory on our web server.
  4. When the image was copied, it was sent first to the archive for safe keeping. Now we are logging into the server to make that image current. We ssh into the server and then run a cp (copy) command to make "current.png" the current image. This way the current image can be overwritten, but copies are kept.
  5. The little "sleep 20: part is telling the script to sleep for 20 seconds. It runs twice because a cron job ( coming next ) will ony run every mintue. You can adjust this at will.

STEP THREE:

OK, Now we're almost there. The last thing to do is to make this script run every minute so we get a fresh picture. We do this with the crontab file. To open the crontab, use:

[lance@lawn ~]$ crontab -e

Then you can enter something like this:

* * * * * sh /Users/lance/scripts/web_cam_me.sh

What you're doing is calling your script every minute. Since the script sleeps for 1/2 minute or so and runs twice, you are effectively getting 2 images per minute.

STEP FOUR:

The only thing left to do is build some kind of HTML page to hold the image: I built one like this:

<html>
<head>
<meta http-equiv="refresh" content="30"/>
<title>Lance's Webcab</title>

</head>
<body>
<div style="width:480;border:2px solid #666;margin:25px auto" id="cam">
<img width="480px" height="360px" src="current.png" />
</div>
</body>
</html>

That's a basic container that loads the current.png image every 30 seconds. You can access the location of this page on a web server and see each new image as it comes along. That's pretty good. But I wanted to add the cam to my blog which was on another site. For this I used an iFrame. All I'm doing here is loading one web page inside of another one. You can put this code in your WordPress blog post or whatever.

<iframe src="my_website_address/webcam/" name="Lance Cam" scrolling="no" frameborder="no" align="center" height = "360px" width = "480px"><br />
</iframe></p>
<p style="text-align:center">( the image updates every 30 seconds when the cam is on )</p>