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

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">

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 streamprivatevoidSaveCaptureDevice()
{   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.