Reader Level:
Articles

Accessing webcam in Silverlight application

By Praveen Kumar on April 22, 2010
In this article, we will see how to access the webcam from silverlight application.
  • 0
  • 0
  • 13624
Download Files:
 

In this article, we will see how to access the webcam from silverlight application.

My XAML code will look like below

<UserControl x:Class="SilverlightApplication4.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" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices" Height="427" Width="497">
    <Grid x:Name="LayoutRoot" Background="White" Height="413" Width="482">
        <Rectangle RadiusX="5" RadiusY="5" x:Name="camview" Height="249" HorizontalAlignment="Left" Margin="75,40,0,0" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="337" Fill="Black" />
        <Button Content="Start Cam" Height="23" HorizontalAlignment="Left" Margin="127,330,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click_1" />
        <Button Content="Stop Cam" Height="23" HorizontalAlignment="Left" Margin="248,330,0,0" Name="button2" VerticalAlignment="Top" Width="75" Click="button2_Click" />
    </Grid>
</UserControl>

Here I have taken one rectangle and two buttons inside the the grid.

First button will start the cam to capture the image and second is used to stop the cam.

"Start Cam" button code is as follows:

private void button1_Click_1(object sender, RoutedEventArgs e)
{
    if (!CaptureDeviceConfiguration.AllowedDeviceAccess)
    {
        if (!CaptureDeviceConfiguration.RequestDeviceAccess())
        {
            return;
        }
    }
    StartWebCam();
}

Here we are accessing the webcam and if we have permission to do so then we are calling method "StartWebCam()".

private void StartWebCam()
{
    cs = new CaptureSource();
    cs.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();
    VideoBrush PreviewBrush = new VideoBrush();
    PreviewBrush.SetSource(cs);
    camview.Fill = PreviewBrush;
    cs.Start();
}

We are capturing video through the default capture device found in the system. Then we fill the rectangle with the video we obtained from webcam.

Output:

1.gif 

When we click "Start Cam" button

2.gif

Next step: Let's see in future how to capture image from webcam and display it in a webpage.

Summary:

We have just seen a simple method to access the webcam from our silverlight application.

Article Extensions
Contents added by Praveen Kumar on Apr 30, 2010
Now that we are able to access the cam and got the picture from webcam we are moving to next step as to capture the image.

For this I have added another button with caption "Capture" and a rectangle control.

Code for capture button is as follows:

private void button3_Click(object sender, RoutedEventArgs e)
{
    cs.CaptureImageCompleted += new EventHandler<CaptureImageCompletedEventArgs>(cs_CaptureImageCompleted);
    cs.CaptureImageAsync();
}

void cs_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)
{
    ImageBrush imagebrush = new ImageBrush();
    imagebrush.ImageSource = e.Result;
    rectangle1.Fill = imagebrush;
}

In this above code, once we are done with image capture we are displaying it in a rectangle through ImageBrush.

Screen before capture:

capture1.gif

Screen after image capture

capture2.gif
Praveen Kumar

I have over 15 years of IT industry experience with Microsoft technologies. I hold Masters degree in Computer Science and Applications and Bachelor’s degree in Mathematics. I am responsible for content publishing, ... Read more

COMMENT USING

Trending up