Site Experiment: Puget Sound Cam

When it comes to designing public sites, I am a big fan of giving control to the user. The old school of web design told you to specify a page’s visual parameters in such exact terms that users couldn’t really do anything to adjust it. This was mostly the by-product of inconsistent browsers and heavy-handed design techniques. Although we haven’t gotten completely away from browser issues yet, we now have stylesheets with which to create entire design motifs.

By using a dynamic style switcher like the one on the upper right side of this page, we can offer users the choice of several different looks. Since there really is no accounting for taste in any form of media consumption, you only increase the likelihood that users will enjoy your site by offering them a few choices.

I knew I wanted to go above and beyond the run-of-the-mill style switcher so I decided to create a Live theme. Click the box titled “Live” and the site will reskin itself with a view of Puget Sound as the header. This view is generated every 10 minutes by a Sony DV camcorder pointed out the window of my condo here in Seattle.

Setting It Up

My first instinct when thinking about this project was to buy a webcam with a built-in server like the one from D-Link. It turns out you need to buy their ugly high-end model if you want it to FTP images to a server and it would have cost me a couple hundred dollars. Then I remembered I have a Sony Vaio laptop that has been acting as a very expensive doorstop for the last year or so. I originally bought it to give Windows a fair shot, but six months and three reformats later, I returned to the gentle genius that is OS X. So now that I already had a machine to act as a conduit between the camera and the web, I only needed a standard web cam in order to get connected.

So I drove down to Best Buy and picked up the Creative Labs NX Ultra, an allegedly high quality web cam, for about $75. After playing with it for a day, it became obvious to me that webcams are really only good at capturing objects within a few feet of them. If you’re doing a video chat thing (which I still don’t really understand… it creeps me out), they are great. But to try and point one out the window and capture scenery is futile. The resolution is terrible, the focus isn’t great, and the colors are very washed out. I knew it wasn’t a problem with the camera since indoor objects looked sharp as can be.

Since having a poor quality image as the header of my site was not an option, I then investigated digital still cameras. I have a Pentax Optio S4 that I absolutely love, and thought if I could only find a digital camera which featured unattended operation (shots at specified intervals) and the ability to automatic save to a hard drive over USB, I’d be set. With even just 2 megapixels of resolution, I could get a great shot. After hours of searching, I found out such a camera does not exist! Actually, there was a $900 Panasonic a couple of years ago that seemed to have those features, but it’s no longer being manufactured and I can scarcely find a mention of it anywhere.

Is it is really that hard to build this sort of ability into a digital camera? C’mon, we have red-eye reduction, motion picture capture, sepiatone, and all sorts of other things and we can’t figure out how to take shots at specified intervals and save them? If anyone has a way to do this or knows of a camera that does, please let me know. There are a lot of cameras which claim to be a digital still camera and a webcam, but when it comes to the automatic capturing of frames to a computer, it’s always the webcam functionality which is used, and hence, it is low resolution. So disappointing!

Doorstop #1, Meet Doorstop #2

After talking myself through the webcam disappointment with the help of a little Two Buck Chuck, I realized I had another rarely used piece of Sony technology sitting in my closet: a three year old DCR-TRV8 DV camcorder which has gotten about as much use as you’d expect a Flowbee to get. Something about carrying around a video camera and worsening my own footage with bad commentary just never appealed to me. Watching it afterwards, of course, appeals even less.

The opportunity to connect Doorstop #1 (The Vaio) to Doorstop #2 (The DV Cam) and create something that is more than a doorstop was very appealing, so I wasted no time in setting things up. Within an hour I had the picture pretty well calibrated and focused on Alki Beach, a spot of land in West Seattle, just across Puget Sound from downtown. It’s a great spot to focus on since all sorts of ferries cross at all hours of the day. In addition to ferries, there are occasionally container ships, gigantic cruise ships, and even parasailers in the picture.

Deploying the Image

Even with the DV Cam, the resolution of my captured images wasn’t ideal. The shots exhibited a certain “camcorder dullness” to them and the color saturation was not as nice as I would have hoped for. I first thought of using PHP to do some dynamic post-processing but then settled on a Flash solution instead.

I first overlayed a transparent PNG of blue horizontal lines to simulate tv scanlines. I’ve found that scanlines tend to hide resolution artifacts very well. Since the lines are crisp, they give the illusion that the entire picture is crisp. Additionally, with the lines being blue, they help to saturate the overall color of the image. Using Flash, I dynamically load the most recently image from the server, apply a few color enhancements to it, overlay the scanlines, and then display it as the header for the site. Additionally, I employed PHP to call the image with a timestamp, ensuring that you pull a new live image every 10 minutes and only a cached image from your hard drive in-between.

What’s Next?

All in all, I like how things have turned out so far, but improving image quality is still a concern of mine. I am continuing to investigate options on the digital still camera front and I feel like somewhere, somehow, there is a solution out there.

More important, however, is getting motion detection to work properly. The program I’m using to capture and FTP the images works great and it has an extensive motion detection setting which I was really psyched about. The idea being, if I can capture and upload a new shot whenever a ferry, cruise ship, bird, or parasailer enters the scene, the header would be that much more interesting. The problem is, even if a define a very small area of the image to examine, the motion detection doesn’t seem to detect things that are very far away. It works great if you step in front of the camera or something, but apparently the movement of boats and other outdoor objects just doesn’t seem to trigger it.

The last problem I’m looking to solve is giving the image more prominence in the daytime when there is actually something to see and less prominence at night when the image is very dark and unworthy of acting as a visual centerpiece.

Anyway, that’s a wrap-up of the Puget Sound Cam experiment so far. More changes are on the way…

Like this entry? You probably shouldn't follow me on Twitter here. I recommend the RSS feed instead.

9 Responses:

  1. niv says:

    i’ve read through most of your posts, and your articles are excellent. i have a question related to this particular post – what was the software you used to capture the images from the camera on to the laptop? anyways, excellent site, and i’m a huge fan of your work on espn.com. thanks!

  2. Similar in a way to the weather-dependent headers by Dunstan over at 1976Design – great idea & nice to read what hardware you used to achieve it. Like niv i’d be interested in finding out what you’re using to actually capture the camera images.

  3. Mike D. says:

    I use an app called Active Webcam to capture frames from the Sony, and I have to say, it works pretty well. The only major complaint I have is that the Motion Detection doesn’t seem to operate on actual pixel differences. I can designate a “Motion Detection Area” of only maybe 50 pixels by 50 pixels, and when a boat floats by, it doesn’t even flinch. If I wave my hands in front of the camera, on the other hand, the motion detection triggers instantly.

    That makes me think Active Cam is not analyzing pixel regions at all but rather taking other measurements from the camera. This is unfortunate, as all I really need it to do is tell the difference between dark blue water and a white ferry boat.

  4. Tim says:

    Are there any really good OS X solutions for FTPing a live image to a website?

    By the way, your site (including the live comment preview) is just out of control!

  5. Gerrit Kaiser says:

    Canon digital cameras have a windows program named Livecapture or something shipped with them. That program gives you the ability to control a usb-connected canon camera.
    You could employ a script-driven solution to capture and save images time-based.

  6. Gabriel says:

    Is there a good surveillance app for OS X, especially for DV cameras?

  7. tom says:

    i have the same problem, taking rahter good qualtiy pictures automatically by motion detection by firewired DV. Any experiances/software tipps? i want to check out
    http://www.trackercam.com/TCamWeb/index.htm

    but i think the best way would be to take two cams, one for exact motion detection (streaming by USB or FW) and another to take the picture (digi cam, by USB).

    Such solution possible?

    Tom

  8. Software says:

    Canon digital cameras have a windows program named Livecapture or something shipped with them. That program gives you the ability to control a usb-connected canon camera.
    You could employ a script-driven solution to capture and save images time-based.

  9. michael says:

    Hi,
    I found your site when trying to locate a software that I could use to capture detected motion from a usb camera to my harddrive using os x. There is no such information here and I don’t know why Google sent me here. At anyrate your site is novel and great. Wish someone here knows of the application I’m looking for, along with some other people here, I assume.

Leave a Reply

Shared

Hundreds of headlines wash over us every day. And part of why many of us engage in this flow is because we have faith that over time, this torrent of episodic knowledge is going to cohere into something more significant: a framework for genuinely understanding an issue. And we live with it ’cause it sort of works. Eventually you hear enough buzzwords like “single-payer” and “public option” and you start to feel like you can play along.

But mounting evidence indicates that this approach to information is actually totally debilitating. Faced with a flood of headlines on an ever-increasing variety of topics, we shut off. We turn to news that doesn’t require much understanding – crime, traffic, weather – or we turn off the news altogether.

- Matt Thompson on why the way we report and consume news is precisely wrong. Matt is, of course, precisely right. If you’re at SXSW next week, I don’t know how you could justify missing this talk.

Cameron’s Colosseo letterpress poster is now available: The only question is, black or white? The black is oh so tempting!

Jon Stewart Skewers Media’s Obsession with Chat Roulette: Funniest Wii Craps reference ever, as well. It’s really interesting to me that Chat Roulette is getting this much “attention” when TinyChat has been around so much longer, essentially does the same thing and more, and is much more useful to the average person. Just goes to show how viral public sex acts can be.

"Add features and customers forever and rake in the dough.":

The 2005 email that spawned Picnik, Google’s latest buy. If you’re thinking about launching a startup, you should study this e-mail carefully. It’s a perfect example of exactly how a crazy little thought becomes a big idea, and even on its own, it’s better than most “official company business plans” people present to VCs.  I gave a talk at Webstock in New Zealand a couple of weeks ago about creating a startup and I wish I had this to dissect at the time. Really good stuff.

Tumblr Finally Rolls Out Comments. Sort Of. Trolls Not Welcome. :

I actually really like how clubby it is.  Unfortunately it means I won’t be commenting on any Tumblrs since I don’t officially “follow” anyone besides via RSS, but that’s probably ok. Maybe the answer to the world’s wide-open commenting problem is something like this.

Episode 2 of Dan Benjamin's "The Conversation" is Live:

I was a guest on Dan Benjamin’s new weekly radio show last week, along with Merlin Mann, Christina Warren, Adam Keys, and Dave Nanian. Subjects discussed include Newsvine, keeping your own identity after becoming part of a big company, and the RADICAL concept of only publishing stuff to your readers and followers that is actually true.

LESS - Leaner CSS:

Given that pre-compiling CSS is an official “best practice” these days, why not use that compile step to extend CSS in powerful ways? LESS lets you use variables, nested rules, and other niceties at author-time to clean up your rules and keep everything tidy. I believe The Wolf made something like this a few years ago, but I haven’t heard about it since.

How 3D works, and why it's back:

Great article on the ins and outs of three dimensional imagery. Still doesn’t change my opinion that well-shot conventional cinematography is more impressive than the novelty that is Avatar.

The Importance of Removing Features:

This is one of the most useful articles I’ve read in a long time. As we work on focusing, strengthening, and simplifying Newsvine, the concepts discussed by Lukas ring true. “Saying no” has never been a strong suit of mine. It’s very helpful to remember how important of a quality it is. (via fullstopinteractive)

Newly released video of the space shuttle Challenger disaster: It was 24 years ago, I was in 5th grade, but I remember it like it was yesterday. School was stopped immediately and they wheeled out televisions in every classroom for us to watch the news footage. It’s great that this video has been released, but holy crap, how do you tuck something that away for two decades???

A nicely done british parody of 60 Minutes style video journalism. It’s easy to miss how formulaic our news is sometimes. (via B-Tizzle, originally via E-Chizzle)

Colosseo: This is why Cameron is a king and we are all just pawns in his world. I can’t wait to get my hands on this poster. I will point out, however, that the outro credits on the video need some kerning. Someone is going to lose their right hand for that.

Spezify:

New ways of searching are almost never as useful as old ways of searching. Spezify is pretty awesome though. It’s a visually interesting, never-ending, horizontally and vertically scrollable, topic explorer. I don’t think I’d use it for digging deep on anything, but to get a quick visually rich sampling of a topic, it’s quite fun (via tiff, a long time ago actually, over email).

Realism in UI Design:

Reminds me of my favorite logo design advice: “Never waste a stroke”. (via gruber)

Overshared
At the first Doughty show of the night at the Triple Door. If you're in Seattle you should come down for the 2nd at 10. Excellent!
This Kindle ad is cute and Applelike but misses the mark. Advertise what you do well: price and battery life http://bit.ly/cFBw70
@codinghorror Aliased Monaco 9 should be in the Smithsonian.
Why does the media continue to cover what Rob Glaser thinks about the future?
@Trenti Ummm, the Timex Sinclair came out after the VIC-20, beeeeeeeayatch! I will out-old you any day!
@paulsmith Wow. I love the user manual shooting out from Shatner's shoulder at the perfect angle. http://j.mp/am10eU
@paulsmith You have me beat by mere months there! I cut my teeth on a Practical Peripherals 1200 bauder.
@roblifford Probably a 10% chance I fly in at the last minute for a couple of nights. Other than that, planning to skip this year.
I can't believe @shauninman's first computer was a G4. I feel ancient. Mine was a VIC-20. http://5by5.tv/pipeline/5
Wow, how did I not know about Lala until now? Tons of great full albums, free: http://bit.ly/dBrdLw
Thanks for everyone who suggested Brizzly. Going to fire that sucker up again...
Is there a way to unfollow people but still allow them to DM you? Like a "mute" setting or something?
@levifig Burn-in was a bigger issue with first-gen plasmas. They are much better now. LCDs have their own lighting issues as well.
@horsedreamer The black isn't quite as good as some other top plasmas, but it's better than all LCDs. At an inch thick, I'll take it.
@levifig Isn't ghosting mainly an issue for LCDs? I've had a plasma for four years and no ghosting whatsoever.