Silverlight 4: How to Capture Video from Default Webcam?

Kunal2383
Posted by in Silverlight category on for Beginner level | Views : 17770 red flag

Silverlight 4 Beta 1 has been released by Microsoft on 18th November 2009. There are lots of goodies came up with the release of the new version. Among them, most of all are requested by the developers & users of Silverlight. In this post I will demonstrate one of the new feature “Accessing Default Webcam using Silverlight 4”.


 Download source code for Silverlight 4: How to Capture Video from Default Webcam?

Introduction

Silverlight 4 Beta 1 has been released by Microsoft on 18th November 2009. There are lots of goodies came up with the release of the new version. Among them, most of all are requested by the developers & users of Silverlight. In this post I will demonstrate one of the new feature “Accessing Default Webcam using Silverlight 4”.


Pre-Requisite

To create a Silverlight 4 application you need “Visual Studio 2010 Beta 2”. Download it from the Microsoft site. Then install the “Silverlight Tools 4 for Visual Studio 2010 Beta 2”. After successful installation, create a Silverlight 4 Application project.


XAML Steps

Once you done with the project creation, Visual Studio will open the MainPage.xaml for you. Add a Rectangle & three Buttons inside the Grid. The Rectangle will responsible for the Video output from your VideoCaptureDevice & buttons will be responsible for the interaction with the device. After adding the same your XAML will look like this:


   <Grid x:Name="LayoutRoot" Background="White">
<
StackPanel HorizontalAlignment="Center">
<
Rectangle x:Name="rectWebCamView" Width="500" Height="400"/>
<
StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<
Button x:Name="btnCaptureDevice" Content="Capture Device" Margin="5"/>
<
Button x:Name="btnPlayCapture" Content="Start Capture" Margin="5"/>
<
Button x:Name="btnStopCapture" Content="Stop Capture" Margin="5"/>
</
StackPanel>
</
StackPanel>
</
Grid>


Code Steps

Now, go to the code behind file (MainPage.xaml.cs) & create an instance of CaptureSource. Then call TryCaptureDevice() to initiate the Video Capture. This first get the default Video Capture device & assign it to the VideoBrush instance of the rectangle. Remember that, this will ask the user to grant permission to the user device & upon successful only it will start the device.


        private void TryCaptureDevice()
{
// Get the default video capture device
VideoCaptureDevice videoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

if (videoCaptureDevice == null)
{
// Default video capture device is not setup
btnPlayCapture.IsEnabled = false;
btnStopCapture.IsEnabled = false;
btnCaptureDevice.IsEnabled = true;

MessageBox.Show("You don't have any default capture device");
}
else
{
btnPlayCapture.IsEnabled = false;
btnStopCapture.IsEnabled = false;

// Set the Capture Source to the VideoBrush of the rectangle
VideoBrush videoBrush = new VideoBrush();
videoBrush.SetSource(captureSource);
rectWebCamView.Fill = videoBrush;

// Check if the Silverlight has already access to the device or grant access from the user
if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
{
btnPlayCapture.IsEnabled = true;
btnStopCapture.IsEnabled = false;
btnCaptureDevice.IsEnabled = false;
}
}
}
Conclusion
This is a sample application to showcase the new Webcam feature in Silverlight 4. This can be modified to save the image snapshot from the webcam.

Download Sample Solution:   Silverlight 4 Webcam Demo



Page copy protected against web site content infringement by Copyscape

About the Author

Kunal2383
Full Name: Kunal Chowdhury
Member Level:
Member Status: Member
Member Since: 3/1/2010 12:38:55 PM
Country: India
Thanks & Regards, Kunal Chowdhury | http://www.kunal-chowdhury.com | http://twitter.com/kunal2383
http://www.kunal-chowdhury.com
He is currently working as a Silverlight application developer. Has a very good skill over C#, XAML, Silverlight & WPF. He has a good working experience in Windows 7 application (including Multitouch) development. During his professional career he worked in various technologies & delivered quality output. He never hesitates to take up challenges & work on the latest technologies in Microsoft platform. He attended various software development competition & achieved different awards. He is presently focusing on the RIA (Silverlight & WPF) & willing to become a Technology Specialist in Microsoft platform. Learning newer things, Blog posting & helping others in forums is one of his regular activity. Specialties: Silverlight Application Development, WPF Application Development, Windows 7 Application Development

Login to vote for this post.

Comments or Responses

Posted by: Prince.saurabh on: 4/14/2011 | Points: 25
Hi,

Its very nice article and i have done all this successfully
but it is not broadcasting to other system, if i publish the site and host at IIS and client access through browser then it is using client's web cam to show.

i want to broadcast this captured stream over web to all client.
Can u give some ideaz??
I have gone through Expression encoder but i dont want to buy. is there any free solution for this?????

Thanks

Login to post response

Comment using Facebook(Author doesn't get notification)