How to access a video and snap a picture from webcam in Silverlight?

SheoNarayan
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 9841 red flag

In this article, we are going to learn how to interact with Audio and Video devices in Silverlight

Working with Audio and Video devices in Silverlight

Silverlight 4 allows us to easily work with the video and audio devices of the system. In order to control the audio and video devices user need to right click the Silverlight page in the browser and click and Webcam / Mic that list all default audio and video devices.

How to access the video from the webcam in Silverlight application?

Silverlight allows us to work with video and audio devices with the help of CaptureSource class that exists in System.Windows.Media namespace.

This article is the continuation of my last article in Silverlight controls series, read last article here.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

Apart from this CaptureDeviceConfiguration class has several methods and property that helps us get the status of the devices, list of available devices etc.

Some important methods and properties are

1. RequestDeviceAccess() – this method returns Boolean if the device access permission is granted or not. If not, it prompts the user for the permission.

2. AllowedDeviceAccess – this is true if user has already given permission to this application to access the media devices.

3. GetDefaultVideoCaptureDevice() – this returns the VideoCaptureDevice object representing the default video capture device.

4. GetDefaultAudioCaptureDevice() – this returns the AudioCaptureDevice object representing the default audio capture device.

Code

<StackPanel>

<TextBlock x:Name="TextBlock1" Text="Audio and Video" FontSize="15" />

<Border BorderThickness="3" BorderBrush="Black" Height="300" Width="400" x:Name="VideoPlayer" Margin="20"/>

<Button Click="Button_Click" Content="Start the Video Captuer" Width="150"/>

<Button Click="Button_Click_1" Content="Stop Video Captuer" Width="150"/>

</StackPanel>

In the above code snippet, we have a TextBlock writing the title of the page. Then we have kept a Border where we shall specify the video source in its background. We also have a button whose click event will start capturing the video from the WebCam.

Code behind

CaptureSource _captureSource = new CaptureSource();

 

private void Button_Click(object sender, RoutedEventArgs e)

{

if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())

{

_captureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

VideoBrush brush = new VideoBrush();

brush.SetSource(_captureSource);

VideoPlayer.Background = brush;

_captureSource.Start();

}

}

private void Button_Click_1(object sender, RoutedEventArgs e)

{

if (_captureSource.VideoCaptureDevice != null)

{

_captureSource.Stop();

}

}

In the above code snippet, we have created a page level variable for CaptureSource that is the backbone of capturing audio and video in Silverlight.

Button_Click

In the method, we have first checked if user has allowed access of the audio video devices if not the we are calling RequestDeviceAccess method that prompts user for the permission.

In the next line we are setting the VideoCaptureSource of the CaptureSource object (_captureSource) to the default Video capture device. Then we are instantiating the VideoBrush object and setting its source to the CaptureSource object. The VideoBrush object is then beign set as the background of the Border (VideoPlayer).

At last we have called the Start method of the CaptureSource object.

Button_Click_1

In this method, we can simply check for the VideoCaptureDevice to make sure that the next Stop statement of the CaptureSource object runs only it is attached with any Video capture devices otherwise we shall get error.

Output

How to snap a picture from Webcam in Silverlight and save it on the disk?

To snap a picture from the webcam video, we can follow this approach. By default Silverlight doesn’t support conversion from Bitmap to .png or .jpg so we are going to use a OpenSource converter available on here. You need to download and use ImageTools, ImageTools.IO.png (in case we want to save the image in .png format if not then .jpg and so on) and ImageTolls.Utils assemblies.

Code

<StackPanel Orientation="Vertical">

<TextBlock x:Name="TextBlock1" Text="Video access through Webcam" FontSize="15" />

<StackPanel Orientation="Horizontal">

<Border BorderThickness="3" BorderBrush="Black" Height="250" Width="300" x:Name="VideoPlayer" Margin="20"/>

<ListBox x:Name="ImageList" Height="250" Width="140" Margin="5" SelectionChanged="ImageList_SelectionChanged">

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Vertical">

<Image Source="{Binding}" Margin="2" Stretch="UniformToFill" Height="100"/>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</StackPanel>

<StackPanel Orientation="Horizontal">

<Button Click="Button_Click" Content="Start Video Captuer" Width="150" Height="25"/>

<Button Click="Button_Click_1" Content="Stop Video Captuer" Width="150" Height="25"/>

<Button Click="Button_Click_2" Content="Snap Picture from Video" Width="150" Background="Yellow" Foreground="Green" Height="25"/>

<Button Click="Button_Click_3" Content="Save" Width="50" Height="25" Foreground="Blue" Background="Beige"/>

</StackPanel>

</StackPanel>

In the above code snippet, we have kept page title, a Border to display the video, a ListBox to display the snapped images and four different buttons to Start video capture, Stop video capture, Snap picture from Video and Save the picture.

Namespace to use

using System.Collections.ObjectModel;

using System.Windows.Media.Imaging;

using System.IO;

using ImageTools;

using ImageTools.IO.Png;

Code behind

CaptureSource _captureSource = new CaptureSource();

ObservableCollection<WriteableBitmap> _snappedImage = new ObservableCollection<WriteableBitmap>();

public WriteableBitmap Snapshot { get; set; }

public SnapPictureFromWebCam()

{

InitializeComponent();

_captureSource.CaptureImageCompleted += new EventHandler<CaptureImageCompletedEventArgs>(_captureSource_CaptureImageCompleted);

_captureSource.CaptureFailed += new EventHandler<ExceptionRoutedEventArgs>(_captureSource_CaptureFailed);

}

 

void _captureSource_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)

{

_snappedImage.Add(e.Result);

ImageList.ItemsSource = _snappedImage;

}

void _captureSource_CaptureFailed(object sender, ExceptionRoutedEventArgs e)

{

MessageBox.Show(e.ErrorException.ToString());

}

private void Button_Click(object sender, RoutedEventArgs e)

{

if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())

{

_captureSource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

VideoBrush brush = new VideoBrush();

brush.SetSource(_captureSource);

VideoPlayer.Background = brush;

_captureSource.Start();

}

}

private void Button_Click_1(object sender, RoutedEventArgs e)

{

if (_captureSource.VideoCaptureDevice != null)

{

_captureSource.Stop();

}

}

private void Button_Click_2(object sender, RoutedEventArgs e)

{

if (_captureSource.VideoCaptureDevice != null && _captureSource.State == CaptureState.Started)

{

_captureSource.CaptureImageAsync();

}

}

private void Button_Click_3(object sender, RoutedEventArgs e)

{

SaveFileDialog dialogue = new SaveFileDialog()

{

Filter = "PNG Files (*.png) |*.png",

DefaultExt = ".png",

FilterIndex = 1

};

if ((bool)dialogue.ShowDialog())

{

var image = Snapshot.ToImage();

var encoder = new PngEncoder();

using (Stream stream = dialogue.OpenFile())

{

encoder.Encode(image, stream);

stream.Close();

}

}

}

private void ImageList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

Snapshot = (WriteableBitmap)ImageList.SelectedItem;

}

In the above Code snippet, we have CaptureSource, ObservableCollection<WriteableBitmap> class level objects. We also have a SelectedImage property of type WriteableBitmap (a bitmap source that can be updated).

In the constructor, we have handled the CaptureImageCompleted and CaptureFailed event of CaptureSource object.

_captureSource_CaptureImageCompleted

This method executes when image capturing is complete (occurs when CaptureImageAsync method is called from CaptureSource object on click of Snap button). In this method we have added the captured image (result) into the observable collection and set the source of the ListBox that displays the captured images one by one.

_captureSource_CaptureFailed

This method executes when image capturing process throws error (may occur when CaptureImageAsync method is called from CaptureSource object on click of Snap button).

Button_Click

This method executes on click of the Start Video Capture button (already explained in previous topic).

Button_Click_1

This method executes on click of Stop Video Capture button (already explained in previous topic).

Button_Click_2

This method executes when Snap Video Capture (or better say Snap) button is clicked. This checks for the VideoCaptureDevice and its State (if it is in start mode) and calls CaptureImageAsynch method that starts capturing the image from video source.

Button_Click_3

This method uses the third party assemblies to save the picture into the .png format. First it opens the SaveFileDialogue box with .png filtered files and then converts the SelectedImage (WriteableBitmap) from to the image and use encoding to save the file.

ImageList_SelectionChanged

This method simply set the SelectedImage property to the selected image from the ListBox.

Helpful links :

See these Link1 and Link2.

Hope this article was useful. Thanks for reading and hoping that you liked it.

Keep an eye on forth coming articles on Silverlight. To read my series of articles, click here.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)