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

0 comments
In this article, how to capture a frame from a Web Camera using a Silverlight 4.0 Application is described.

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:

WebcamCapture1.gif
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:
WebcamCapture2.gif
Step 6:

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

Fig 3:

WebcamCapture3.gif


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.

WebcamCapture4.gif
READ MORE>>

0 comments: