Webcam Capture and save clip in Silverlight 4.0 with outofBrowser (o.o.b) Application

In this article I will describe how to capture a frame from a Web Camera using a Silverlight 4.0 Application.

Content: First create a new Silverlight Application name "LiveVideoCatchUp".

Step1: Open the MainPage.xaml and paste the code below.

<UserControl x:Class="LiveVideoCatchUp.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-ompatibility/2006"
mc:Ignorable="d"
d:DesignHeight="453" d:DesignWidth="694">

<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrushEndPoint="1,0.5"StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFD1AEAE" Offset="1" />
</LinearGradientBrush>
</Grid.Background>

<Grid x:Name="LayoutRoot1" Background="White" Margin="0,0,-14,-23">
<Grid.RowDefinitions>
<RowDefinition Height="439*" />
<RowDefinition Height="14*" />
</Grid.RowDefinitions>
<StackPanelHorizontalAlignment="Center" Margin="109,20,142,6" Width="443"Grid.RowSpan="2">
<Rectangle x:Name="rectWebCamView" Width="488" Height="409"/>
<StackPanel Orientation="Horizontal" Height="34" Width="416">
<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"/>
<Button x:Name="btnSaveClip" Content="SaveClip" Height="23" Width="89" Click="btnSaveClip_Click" />
</StackPanel>
</StackPanel>
</Grid>

</Grid>
</UserControl>

The screen will look like Fig 1:



Step 2:

Now we have 4 Button- 1) Captute Device 2) Start Capture 3) Stop Capture 4) SaveClip.

Now in the page Load Method we have the "TryCaptureDevice()" method. In this method we have the "VideoCaptureDevice" Class.

This class is for detecting a VideoCaptute device such as a webcam or any external camera. So now we have the complete method of "TryCaptureDevice".

privatevoidTryCaptureDevice()
{
// Get the default video capture device
VideoCaptureDevicevideoCaptureDevice = 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
VideoBrushvideoBrush = newVideoBrush();
videoBrush.SetSource(captureSource);
rectWebCamView.Fill = videoBrush;
//SaveCaptureDevice();
// 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;
}
}
}

Step 3:

Now we have a class named "MemoryStreamVideoSink.cs". This class is for saving your capture clip while you press the "SaveClip" Button.

The code of that class is:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
namespace LiveVideoCatchUp
{
publicclassMemoryStreamVideoSink:VideoSink
{
publicVideoFormatCapturedFormat { get; privateset; }
publicMemoryStreamCapturedVideo { get; privateset; }
protectedoverridevoidOnCaptureStarted()
{
CapturedVideo = newMemoryStream();
}
protectedoverridevoidOnCaptureStopped()
{
}
protectedoverridevoidOnFormatChange(VideoFormatvideoFormat)
{
if (CapturedFormat != null)
{
thrownewInvalidOperationException("Can't cope with change!");
}
CapturedFormat = videoFormat;
}
protectedoverridevoidOnSample(longsampleTime, longframeDuration, byte[] sampleData)
{
CapturedVideo.Write(sampleData, 0, sampleData.Length);
}
}
}

Step 4:

Now the complete code of the mainpage.xaml.cs is:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;
usingSystem.Windows.Shapes;
namespace LiveVideoCatchUp
{
publicpartialclassMainPage : UserControl
{
privateCaptureSourcecaptureSource = newCaptureSource();
//CaptureSourcecaptureSource;
MemoryStreamVideoSinkvideoSink;
publicMainPage()
{
InitializeComponent();
this.Loaded += newRoutedEventHandler(MainPage_Loaded);
btnPlayCapture.Click += newRoutedEventHandler(btnPlayCapture_Click);
btnStopCapture.Click += newRoutedEventHandler(btnStopCapture_Click);
btnCaptureDevice.Click += newRoutedEventHandler(btnCaptureDevice_Click);
}
voidbtnCaptureDevice_Click(object sender, RoutedEventArgs e)
{
TryCaptureDevice();
}
voidbtnStopCapture_Click(object sender, RoutedEventArgs e)
{
// Stop capturing
captureSource.Stop();
btnPlayCapture.IsEnabled = true;
btnStopCapture.IsEnabled = false;
}
voidbtnPlayCapture_Click(object sender, RoutedEventArgs e)
{
// If the device is already capturing Stop it
if (captureSource.State == CaptureState.Started)
{
captureSource.Stop();
}
// Start capturing
captureSource.Start();
btnPlayCapture.IsEnabled = false;
btnStopCapture.IsEnabled = true;
}
voidMainPage_Loaded(object sender, RoutedEventArgs e)
{
TryCaptureDevice();
}
privatevoidTryCaptureDevice()
{
// Get the default video capture device
VideoCaptureDevicevideoCaptureDevice = 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
VideoBrushvideoBrush = newVideoBrush();
videoBrush.SetSource(captureSource);
rectWebCamView.Fill = videoBrush;
//SaveCaptureDevice();
// 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;
}
}
}

//getting the Video bit stream
privatevoidSaveCaptureDevice()
{
bool ok = CaptureDeviceConfiguration.AllowedDeviceAccess;
if (!ok)
{
ok = CaptureDeviceConfiguration.RequestDeviceAccess();
}
if (ok)
{
if (videoSink == null)
{
captureSource = newCaptureSource()
{
VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice()
};
VideoBrushvideoBrush = newVideoBrush();
videoBrush.SetSource(captureSource);
rectWebCamView.Fill = videoBrush;
videoSink = newMemoryStreamVideoSink();
videoSink.CaptureSource = captureSource;
}
videoSink.CaptureSource.Start();
}
}
privatevoidbtnSaveClip_Click(object sender, RoutedEventArgs e)
{
SaveCaptureDevice();
}
}
}

Step 5:

Now go to the "OutofBrowser" setting under the properties folder of your project just like Fig 2 (marked with red) and paste the code below.

<OutOfBrowserSettingsShortName="LiveVideoCatchUp Application"EnableGPUAcceleration="False"ShowInstallMenuItem="True">
<OutOfBrowserSettings.Blurb>LiveVideoCatchUp Application on your desktop; at home, at work or on the go.</OutOfBrowserSettings.Blurb>
<OutOfBrowserSettings.WindowSettings>
<WindowSettingsTitle="LiveVideoCatchUp Application" />
</OutOfBrowserSettings.WindowSettings>
<OutOfBrowserSettings.Icons />
</OutOfBrowserSettings>

Fig 2:


Step 6:

Now run the application. It will look like fig 3:

Fig 3:



Now when you will press the capture device the Silverlight will ask a message to allow the microphone or video device just like Fig 4. You have to press yes.



Step 6:

After that you have to press the Button "StartCapture". It will look like Fig 4:

Fig 4:



Right now I don't have the Web cam or Web camera simulator. If I did then you would see my Image instead of the black spot.

When you press the Stop Button, it will stop to capture your image.