Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Sometimes coding a solution is faster than finding one: Simple Webcam app in Silverlight 5

Pete Brown - 11 November 2012

I recently upgraded my main desktop PC to Windows 8. When I did that, the Microsoft LifeCam software stopped working. It was recognized as incompatible with Windows 8. For most people, this is not an issue, as it works perfectly fine with the built-in Windows 8 camera app.

For me, however, I need a small camera app sitting on my desktop so I can see the hallway leading to my office. I call it the heart-attack preventer, as it makes it difficult for my children to sneak up on me when I'm heads-down at work. This is because I'm surrounded by displays and simply can't see over them. My home office is in the basement, with a combined TV room and play room (plus a bunch of storage) surrounding it, so the kids often sneak in here to say "Hi".

I installed the latest version of the LifeCam software, and it doesn't install the desktop camera app at all. Bummer. I quickly checked, and this is a common observation about that install.

Rather than spend all afternoon looking for a solution, I figured it would be easier to code my own in 15 minutes. I considered using WPF 4.5, but WebCam access in WPF requires third-party toolkits or DirectX code (or Win32 API calls), so that wouldn't do it. Coding a solution as a Windows Store app wouldn't do, as I need a very tiny window on my desktop, not a snapped app. I sometimes snap other apps and wouldn't want the webcam app to limit that, or take up that amount of room.

image

Silverlight has always had extremely simple WebCam APIs that are quick to use. (WinRT's APIs are just as easy if not easier).

I created a quick Silverlight 5 project in Visual Studio 2012. Made it an out-of-browser app with elevated permissions, and put this as the MainPage.xaml markup

<UserControl x:Class="SimpleWebcamSL.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="VideoOutput"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" MouseLeftButtonDown="VideoOutput_MouseLeftButtonDown_1" />
</Grid>
</UserControl>

And this as the code-behind:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SimpleWebcamSL
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();

Loaded += MainPage_Loaded;
}

ReadOnlyCollection<VideoCaptureDevice> _devices;

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
_devices = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();

// specific to my system. Camera 1 is the one that points
// out of my home office. Camera 0 points at me.
if (_devices.Count > 1)
SetCaptureDevice(_devices[1]);
else if (_devices.Count > 0)
SetCaptureDevice(_devices[0]);
}


private void SetCaptureDevice(VideoCaptureDevice device)
{
var source = new CaptureSource();
source.VideoCaptureDevice = device;

var brush = new VideoBrush();
brush.Stretch = Stretch.UniformToFill;
brush.SetSource(source);
VideoOutput.Fill = brush;

source.Start();
}

private void VideoOutput_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e)
{
Application.Current.MainWindow.DragMove();
}

}
}

I set the project properties for out of browser, no window border, and elevated permissions (all covered in my Silverlight 5 book) and then installed the app. All done in about 15 minutes. It took longer to write this post than it did to create the app.

This is hard-coded to my specific situation (second camera is the camera which points away from my desk). I didn't bother with icons, camera switching, or anything beyond what I needed for this specific situation.

As a woodworker, I find it's sometimes quicker for me to build something as opposed to search stores to find what I'm looking for. As a programmer, sometimes it's faster just to code your own solution rather than search the internet all day for workarounds. :)

       
posted by Pete Brown on Sunday, November 11, 2012
filed under:        

9 comments for “Sometimes coding a solution is faster than finding one: Simple Webcam app in Silverlight 5”

  1. Chuisays:
    Pete, now you got me curious. Was your lifecam able to pick up sound? I had an old lifecam on an even older laptop with Win8, and I couldn't Skype at all. I might play around with an SL solution.
  2. Petesays:
    While on campus in Redmond, I used a LifeCam on my Windows 8 laptop to act as the second camera for a test. As I recall, it picked up sound. On my sample here, I don't bother with sound, as I only want video.

    Be sure to grab the latest LifeCam software/drivers.

    Pete
  3. David Totzkesays:
    Very nice. One wonders why there isn't the same or similar VideoCaptureDevice in WPF. AFAIK, there isn't even a 3rd party control; at least not from the major vendors.

    thanks,
    Dave
  4. Clintsays:
    I'm trying to do in WPF what you've done in Silverlight. I know little about SL. I'm very surprised that it can so easily use the webcam but WPF cannot. In your article you mention "I considered using WPF 4.5, but WebCam access in WPF requires third-party toolkits or DirectX code (or Win32 API calls), so that wouldn't do it. " I've searched for just such a toolkit, but none seem to be x64 or truly a WPF component. Some CodeProject projects work halfway in that that paint so directly to the screen that you can't put other controls over it.

    I just want to put the video on screen then make an HUD on top of it for things like [start recording] and so on.

    I didn't think this was going to be such a major PITA.

Comment on this Post

Remember me