I've got an AirLink101 AIC250 Network Camera in the baby's room. I wrote about it when he was younger in a Coding4Fun article on Motion Detection. He's been sleeping through the night since he was about six months, so even though my Webcam application was a ClickOnce App, I got lazy, and didn't used it for several months. However, we just weaned Z and I'm now in charge of putting him to bed.
Putting a baby to sleep is a subtle art, not unlike defusing a bomb or tiptoeing through minefield. Sometimes he goes down well, other times, less so. We started using the Webcam again lately, but I wasn't really digging the application and the way that it integrated into our life. My wife and I like to check our email just after we put the baby down, and I like to watch the baby at the same time. The app was getting in the way, or it'd take up the second monitor, and while I could have fixed it, I realized that I really wanted to see Z in the Vista Sidebar.
Anyway. Turns out that the AirLInk101 not only has a MJPEG (That's MotionJPEG, not MPEG, for those who are paying attention) stream, but there's as a single JPEG endpoint like this: http://babyroom/IMAGE.JPG?cidx=20071200134234234 where you append a random number on the end to make sure the browser doesn't cache.
Now, I could do this Sidebar a number of ways. I could:
- Use the Java Applet or the ActiveX control that comes with the camera and host it inside the Sidebar. However, you'd have to log into the admin console once, first, to authenticate. Not to mention the "meh" of having that stuff running inside the Sidebar process.
- Use Ajax/XMLHttp ala Flickr to get the image all async like and assign it to an image.
- Use XBAP or WPF/E to do the work for me...this was beyond my patience for new technology as I just wanted to spend and hour.
However, I'm old school. Smells like a job for "setInterval" to me. Hunting for Sidebar Samples got me to Microsoft Gadgets.com which is WAY old, but the Tutorial was useful. Interestingly the stuff that OdeToCode did was WAY clearer and more elegant, but I ended up using the stuff from the tutorial because it supported the many states that a Sidebar gadget can be in:
- Docked, with a Flyout
- Undocked and large (via a Setting)
- Undocked and small (via a Setting)
I used the bare bones Virtual Earth sample to start with. Without getting to intense on the details, as you can just look at the code, I added a setting for the Camera Server that gets pulled out of the Gadget settings State Bag.
1: function procGadgetCore()
3: var serverName = System.Gadget.Settings.read("CameraServer");
4: if (serverName == '')
6: serverName = "babyroom";
8: gCameraServerURL = "http://" + serverName + "/image.jpg";
It's my gadget, I use my camera's name as the default. The gadget can be many sizes, so I just resize the image as the gadget changes. I also append the unique-enough number to prevent caching.
1: function UpdateGadget()
3: var now = new Date();
4: imgCamera.src = gCameraServerURL + '?cidx=' + now.getTime();
5: imgCamera.style.width = gadgetContentFrame.style.width;
6: imgCamera.style.height = gadgetContentFrame.style.height;
7: System.Debug.outputString("Update Gadget" + imgCamera.src);
StartTimer() just does
1: function startTimer()
3: gTimerID = setInterval(UpdateGadget, gInterval);
I need to add the interval as a modifiable setting. Right now it's set to a half-second. Certainly less than the 10fps I get with the Webcam ClickOnce app, but I'm really just looking to see that he's OK, and 2fps fine for that and the CPU usage is negligible.
None of this matters to you if you don't have a Webcam like this, but here's the craptastical source. A gadget file is just a ZIP file, FYI. When you double-click it, Vista will ask install it and it'll show up in
You can get there by pasting that into Start|Run. Enjoy. Take a look at these places that helped me in this little project: