Incorporating Video into a Silverlight 4 Application


html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightcontrolhost {
height: 100%;
text-align:center;
}

Over the past week, I spent some time with Silverlight 4. I’m really impressed by how easy it is to incorporate video into an application. This post shows how to capture video from the camera and display the video on the screen. The post also handles grabbing single frames of video. You might use this type of arrangement to allow users to upload images, hold impromptu web casts, and to do video conferencing.

I’ve uploaded a barebones application that turns on video capture and displays the video:

 

To understand how this works, you need to be familiar with the following objects:

CaptureSource

CaptureDeviceConfiguration

VideoBrush

The CaptureSource type encapsulates the methods needed to interact with audio and video devices.

CaptureDeviceConfiguration acts as gatekeeper to the webcam and microphone. CaptureDeviceConfiguration knows how to ask the user for permission to use the webcam or microphone. It also remembers what the user said about using the webcam or microphone during the current session.

VideoBrush knows how to paint using a video as the source.

In order to interact with the camera, you need to know whether the user gave you permission and if not, you have to ask for permission. Once you have permission, you just need to capture video from the default camera, create the brush, and start capturing the video.

private CaptureSource _captureSource = null;
private void btnStartCapture_Click(object sender, RoutedEventArgs e)
{
    if (_captureSource != null && 
        _captureSource.State == CaptureState.Started)
    {
        return;
    }
    if(!CaptureDeviceConfiguration.AllowedDeviceAccess)
    {
        if(!CaptureDeviceConfiguration.RequestDeviceAccess())
        {
            return;
        }
    }

    _captureSource = new CaptureSource {
         VideoCaptureDevice = 
 CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice()
       };
    var brush = new VideoBrush();
    brush.SetSource(_captureSource);
    _captureSource.Start();
    rectVideo.Fill = brush;
}

Later on, when the user wants to capture the current video as an image, you just do something like this to put the current frame into an image control:

 

private void btnGrabImage_Click(object sender, RoutedEventArgs e)
{
    if(_captureSource == null || _captureSource.State != CaptureState.Started)
    {
        return;
    }
    _captureSource.AsyncCaptureImage(
        image => imgCapture.Source = image
        );
}

As someone who spent way too much time in the C++/MFC era writing code to capture video from devices, I am incredibly impressed with the brevity of the code. I think the SL4 team did an awesome job here. Way to go!

 

You can grab the sample project here.

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: