Accessing webcam in Silverlight application


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.

Up Next
    Ebook Download
    View all
    Learn
    View all