Image of the glider from the Game of Life by John Conway
Skip to content

New Pthree Feature- Desktop Cam

I've had this before on one of my previous blogs under the toponcefamily.com domain. I no longer own that domain (I let it expire, and now some "search engine" is selling it), but it was pretty cool. You could see what I was doing at anytime during the day.

Well, I set it up again here on pthree.org. Why, you ask? Honestly, I don't know. Probably more for the geek factor than anything. But at any event, it's there, and cool.

Writing the code was really easy, actually. The only trouble I had was setting up SSH to allow password-less secure copy. Once that was up, a simple Bash script to capture the screenshot, resize the image, and send it to the server. Here are the steps I followed to get my Desktop Cam up and running:

  1. Generate an SSH DSA key on the client that will be sending the image to the server. The command was 'ssh-keygen -t dsa'.
  2. Append id_dsa.pub to the file 'authorized_keys' on the server. If the file doesn't exist, create it.
  3. Create the Bash script with a simple while loop that executes creating the image and copying to the server every 30 seconds.
  4. Write the HTML for displaying the screenshot.
  5. Write the JavaScript to refresh the image every 30 seconds also.

For the Bash code, it was easy (text wrapped as necessary):

1
2
3
4
5
6
7
8
#!/bin/bash
sleep 5
bool_test=1
while (( bool_test == 1 )); do
    import -window root -resize 512 ~/DesktopCam.jpg
    scp ~/DesktopCam.jpg encryptz@pthree.org:/var/www/wp-content/uploads/
    sleep 30
done

The JavaScript to reload the image was just as easy:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
refreshImage = function()
{
    img = document.getElementById("desktopcam");
    img.src = "http://www.pthree.org/wp-content/uploads/DesktopCam.jpg?rand="   + Math.random();
}
</script>
<script type="text/javascript">
<!--
window.setInterval(refreshImage, 30*1000);
//-->
</script>

The HTML in the post was even easier:

1
<img id="desktopcam" src="http://www.pthree.org/wp-content/uploads/DesktopCam.jpg" alt="Desktop Cam" />

That's it! Probably what kept me hung up the most was getting WordPress to play nicely with inline JavaScript. After a bit of searching and digging around though, I found the trick to getting JavaScript to work.

Anyway, there you go. Fairly simple code, easy to implement and low overhead.

{ 2 } Comments

  1. Jadd using Opera 9.25 on GNU/Linux | January 3, 2008 at 9:14 am | Permalink

    Nice! Unfortunately, import doesn't work perfectly with compiz. :( Found a way that does work better though: scrot
    http://tips.webdesign10.com/how-to-take-a-screenshot-on-ubuntu-linux

  2. BRENDA GRAVETTE using Internet Explorer 6.0 on Windows XP | September 28, 2008 at 9:56 am | Permalink

    thanks so much!

{ 2 } Trackbacks

  1. Aaron Toponce : Desktop Cam Reborn | January 1, 2008 at 9:19 am | Permalink

    [...] bit ago, I wrote a little bash script to take a screenshot of my working environment, and upload it to my blog as a “Desktop [...]

  2. Hypnogogic - Links du jour | January 5, 2008 at 6:24 pm | Permalink

    [...] Aaron Toponce : New Pthree Feature- Desktop CamI’ve been wanting to do this, but I watch so much pr0n. [...]

Post a Comment

Your email is never published nor shared.

Switch to our mobile site