{"id":9,"date":"2004-06-07T21:50:23","date_gmt":"2004-06-08T05:50:23","guid":{"rendered":""},"modified":"2016-05-25T23:34:41","modified_gmt":"2016-05-26T06:34:41","slug":"making-of-the-live-cam","status":"publish","type":"post","link":"https:\/\/mikeindustries.com\/blog\/archive\/2004\/06\/making-of-the-live-cam","title":{"rendered":"Site Experiment: Puget Sound Cam"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"\/blog\/images\/inline\/webcamthumb.jpg\" width=\"100\" height=\"100\" alt=\"\" class=\"rightinlineborder\" border=\"0\" \/>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&#8217;s visual parameters in such exact terms that users couldn&#8217;t really do anything to adjust it.  This was mostly the by-product of inconsistent browsers and heavy-handed design techniques. Although we haven&#8217;t gotten completely away from browser issues yet, we now have stylesheets with which to create entire design motifs.<\/p>\n<p>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.<br \/>\n<!--more--><br \/>\nI 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 &#8220;Live&#8221; 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.<\/p>\n<h3>Setting It Up<\/h3>\n<p>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 <a href=\"http:\/\/dlink.com\/products\/?pid=41\" target=\"_blank\">ugly high-end model<\/a> 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.<\/p>\n<p>So I drove down to Best Buy and picked up the <a href=\"http:\/\/us.creative.com\/products\/product.asp?category=5&#038;subcategory=32&#038;product=9340\" target=\"_blank\">Creative Labs NX Ultra<\/a>, 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&#8217;re doing a video chat thing (which I still don&#8217;t really understand&#8230; 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&#8217;t great, and the colors are very washed out.  I knew it wasn&#8217;t a problem with the camera since indoor objects looked sharp as can be.<\/p>\n<p>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&#8217;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&#8217;s no longer being manufactured and I can scarcely find a mention of it anywhere.<\/p>\n<p>Is it is really that hard to build this sort of ability into a digital camera?  C&#8217;mon, we have red-eye reduction, motion picture capture, sepiatone, and all sorts of other things and we can&#8217;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&#8217;s always the webcam functionality which is used, and hence, it is low resolution.  So disappointing!<\/p>\n<h3>Doorstop #1, Meet Doorstop #2<\/h3>\n<p>After talking myself through the webcam disappointment with the help of a little <a href=\"http:\/\/www.cbsnews.com\/stories\/2003\/06\/02\/eveningnews\/main556620.shtml\" target=\"_blank\">Two Buck Chuck<\/a>, 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&#8217;d expect a <a href=\"http:\/\/www.flowbee.com\" target=\"_blank\">Flowbee<\/a> 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.<\/p>\n<p>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 <a href=\"http:\/\/www.seattlephotographs.com\/photos\/alki_beach\/Alki_Beach_photo_gallery.htm\" target=\"_blank\">Alki Beach<\/a>, a spot of land in West Seattle, just across Puget Sound from downtown.  It&#8217;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.<\/p>\n<h3>Deploying the Image<\/h3>\n<p>Even with the DV Cam, the resolution of my captured images wasn&#8217;t ideal.  The shots exhibited a certain &#8220;camcorder dullness&#8221; 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.<\/p>\n<p>I first overlayed a transparent PNG of blue horizontal lines to simulate tv scanlines.  I&#8217;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.<\/p>\n<h3>What&#8217;s Next?<\/h3>\n<p>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.<\/p>\n<p>More important, however, is getting motion detection to work properly.  The program I&#8217;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&#8217;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&#8217;t seem to trigger it.<\/p>\n<p>The last problem I&#8217;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.<\/p>\n<p>Anyway, that&#8217;s a wrap-up of the Puget Sound Cam experiment so far. More changes are on the way&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s visual parameters in such exact terms that users couldn&#8217;t really do anything to adjust it. This was mostly the by-product of inconsistent browsers and heavy-handed [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[282,39],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-original","category-technology"],"_links":{"self":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":0,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}