Click here to Skip to main content
16,015,504 members
Articles / Desktop Programming / WPF

Yet another Web Camera control

Rate me:
Please Sign up or sign in to vote.
4.88/5 (90 votes)
5 Nov 2017CPOL5 min read 592K   174   211
In this article you will find yet another implementation of a web camera control.


330177/screen.jpg

Introduction

In this article you will find yet another implementation of a web camera control. The control is a simple and easy to use one: no additional dependencies and a minimalistic interface.

The control provides the following functionalities:

  1. Gets a list of available web camera devices on a system.
  2. Displays a video stream from a web camera device.
  3. Gets the current image being captured.

Requirements

  1. The WinForms version of the control is implemented using .NET Framework 2.0.
  2. The WPF version of the control is implemented using .NET Framework 4 Client Profile.
  3. The control uses the VMR-7 renderer filter available since Windows XP SP1.

The control supports both x86 and x64 platform targets.

Background

There are a number of ways to capture a video stream in Windows. Not mentioning all of them, the basic are DirectShow framework and AVICap library. We will use the DirectShow based approach, as it is more powerful and flexible.

The DirectShow framework operates using such concepts as a graph, filters and pins. The filters form a capture graph, through which a media stream flows. The filters in the graph are connected to each other using pins. A web camera is the capture filter a video stream starts from. The control’s window is passed to a renderer filter, which receives and shows the video stream. There are other in-the-middle filters possible, for example, color space conversion filters. That is all about the capture graph. See MSDN DirectShow documentation for more information.

Implementation Details

If you are not interested in implementation details, then you can skip this section.

The implementation is divided into three layers.

  1. The bottom layer is implemented as a native DLL module, which forwards our calls to the DirectShow framework.
  2. For distribution convenience, the native DLL module is embedded into the control’s assembly as a resource. On runtime stage, the DLL module will be extracted to a temporary file on disk and used via late binding technique. Once the control is disposed, the temporary file will be deleted. In other words, the control is distributed as a single file. All those operations are implemented by the middle layer.
  3. The top layer implements the control class itself and the WebCameraId class used to identify a web camera device.

The following diagram shows a logical structure of the implementation.

Image 2

Only the top layer is supposed to be used by clients.

The Bottom Layer

The bottom layer implements the following utilities to work with the capture graph.

C++
/// <summary>
/// Enumerates video input devices in a system.
/// </summary>
/// <param name="callback">A callback method.</param>
DSUTILS_API void __stdcall EnumVideoInputDevices(EnumVideoInputDevicesCallback callback);

/// <summary>
/// Builds a video capture graph.
/// </summary>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall BuildCaptureGraph();

/// <summary>
/// Adds a renderer filter to a video capture graph,
/// which renders a video stream within a container window.
/// </summary>
/// <param name="hWnd">A container window that video should be clipped to.</param>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall AddRenderFilter(HWND hWnd);

/// <summary>
/// Adds a video stream source to a video capture graph.
/// </summary>
/// <param name="devicePath">A device path of a video capture filter to add.</param>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall AddCaptureFilter(BSTR devicePath);

/// <summary>
/// Removes a video stream source from a video capture graph.
/// </summary>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall ResetCaptureGraph();

/// <summary>
/// Runs all the filters in a video capture graph. While the graph is running,
/// data moves through the graph and is rendered. 
/// </summary>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall Start();

/// <summary>
/// Stops all the filters in a video capture graph.
/// </summary>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall Stop();

/// <summary>
/// Retrieves the current image being displayed by the renderer filter.
/// </summary>
/// <param name="ppDib">Address of a pointer to a BYTE that will receive the DIB.</param>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall GetCurrentImage(BYTE **ppDib);

/// <summary>
/// Retrieves the unstretched video size.
/// </summary>
/// <param name="lpWidth">A pointer to a LONG that will receive the width.</param>
/// <param name="lpHeight">A pointer to a LONG that will receive the height.</param>
/// <returns>If the function succeeds, the return value is zero.</returns>
DSUTILS_API int __stdcall GetVideoSize(LONG *lpWidth, LONG *lpHeight);

/// <summary>
/// Destroys a video capture graph.
/// </summary>
DSUTILS_API void __stdcall DestroyCaptureGraph();

The Middle Layer

The middle layer is implemented in the DirectShowProxy class.

First, what we should do is extract the capture graph utilities DLL module from the resources and save it to a temporary file.

C#
_dllFile = Path.GetTempFileName();
using (FileStream stream = new FileStream(_dllFile, FileMode.Create, FileAccess.Write))
{
    using (BinaryWriter writer = new BinaryWriter(stream))
    {
        writer.Write(IsX86Platform ?
            Resources.DirectShowFacade : Resources.DirectShowFacade64);
    }
}

Then we load our DLL module into the address space of the calling process.

C#
_hDll = LoadLibrary(_dllFile);
if (_hDll == IntPtr.Zero)
{
    throw new Win32Exception(Marshal.GetLastWin32Error());
}

And bind the DLL module functions to the class instance methods.

C++
private delegate Int32 BuildCaptureGraphDelegate();
private BuildCaptureGraphDelegate _buildCaptureGraph;

// ...

IntPtr pProcPtr = GetProcAddress(_hDll, "BuildCaptureGraph");
_buildCaptureGraph =
    (BuildCaptureGraphDelegate)Marshal.GetDelegateForFunctionPointer(pProcPtr, 
     typeof(BuildCaptureGraphDelegate));

When the control is being disposed, we unload the DLL module and delete it.

C#
public void Dispose()
{
    if (_hDll != IntPtr.Zero)
    {
        FreeLibrary(_hDll);
        _hDll = IntPtr.Zero;
    }

    if (File.Exists(_dllFile))
    {
        File.Delete(_dllFile);
    }
}

The Top Layer

The top layer is implemented in the WebCameraControl class with the following interface.

C#
/// <summary>
/// Gets a list of available video capture devices.
/// </summary>                                 
/// <exception cref="Win32Exception">Failed to load the DirectShow utilities dll.</exception>
public IEnumerable<WebCameraId> GetVideoCaptureDevices();

/// <summary>
/// Gets a value indicating whether the control is capturing a video stream.
/// </summary>
public Boolean IsCapturing { get; }

/// <summary>
/// Starts a capture.
/// </summary>
/// <param name="camera">The camera to capture from.</param>
/// <exception cref="ArgumentNullException">A null reference is passed as an argument.</exception>
/// <exception cref="Win32Exception">Failed to load the DirectShow utilities dll.</exception>
/// <exception cref="DirectShowException">Failed to run a video capture graph.</exception>
public void StartCapture(WebCameraId camera);

/// <summary>
/// Retrieves the unstretched image being captured.
/// </summary>
/// <returns>The current image.</returns>
/// <exception cref="InvalidOperationException">The control is not capturing a video stream.</exception>
/// <exception cref="DirectShowException">Failed to get the current image.</exception>
public Bitmap GetCurrentImage();

/// <summary>
/// Gets the unstretched video size.
/// </summary>
public Size VideoSize { get; }

/// <summary>
/// Stops a capture.
/// </summary>
/// <exception cref="InvalidOperationException">The control is not capturing a video stream.</exception>
/// <exception cref="DirectShowException">Failed to stop a video capture graph.</exception>
public void StopCapture();

Usage

Open the Package Manager Console and add a nuget package to your project:

PowerShell
Install-Package WebEye.Controls.WinForms.WebCameraControl

First, we need to add the control to the Visual Studio Designer Toolbox, using a right-click and then the "Choose Items..." menu item. Then we place the control on a form at desired location and with desired size. The default name of the control instance variable will be webCameraControl1.

Then, on run-time stage, we need to get a list of web cameras available on the system.

C#
List<WebCameraId> cameras = new List<WebCameraId>(webCameraControl1.GetVideoCaptureDevices());

The following code starts a capture from the first camera in the list.

C#
webCameraControl1.StartCapture(cameras[0]); 

Please note that the control's window has to be created in order to start a capture, otherwise you will get an exception due to the fact that there is no output pin for the video stream. The common mistake is to start a capture in the Form.Load event handler, when the control's window have not yet been created.

To get an image being captured just call the GetCurrentImage() method. The resolution and quality of the image depend on your camera device characteristics.

C#
Bitmap image = webCameraControl1.GetCurrentImage();

To stop the capture the StopCapture() method is used.

C#
webCameraControl1.StopCapture();

You can always ask the capture state using the following code.

C#
if (webCameraControl1.IsCapturing)
{
    webCameraControl1.StopCapture();
}

To start the capture from another web camera just call the StartCapture method again.

C#
webCameraControl1.StartCapture(cameras[1]);

To report errors, exceptions are used, so do not forget to wrap your code in a try/catch block. That is all about using it. To see the complete example please check the demo application sources.

WPF Version

In WPF user controls do not have a WinAPI window handle (HWND) associated with them and this is a problem, because the DirectShow framework requires a window handle in order to output the video stream. The VideoWindow class has been introduced to workaround this problem.

XML
<UserControl x:Class="WebCamera.WebCameraControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             xmlns:local="clr-namespace:WebCamera">
    <local:VideoWindow x:Name="_videoWindow" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</UserControl>

To add a WPF version of the control to your project use the following nuget command:

PowerShell
Install-Package WebEye.Controls.Wpf.WebCameraControl

GitHub

The project has a GitHub repository available on the following page.

https://github.com/jacobbo/WebEye

Any questions, remarks, and comments are welcome.

History 

  • November 5, 2017 - Replaced VMR9 with VMR7 to extend a range of supported configurations.
  • February 29, 2016 - Added a nuget package.
  • April 10, 2015 - Added the x64 platform support.
  • October 24, 2012 - Added a GitHub repository.
  • September 12, 2012 - The demo apps are updated to report exceptions.
  • September 9, 2012 - The WPF version of the control plus demo application.
  • February 19, 2012 - Updated demo code and documentation.
  • February 15, 2012 - The initial version.  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Russian Federation Russian Federation
Niko Bellic (Serbian: Niko Belić) is the main protagonist and playable character in the video game Grand Theft Auto IV. He is a 30 year old former soldier who moved to Liberty City to escape his troubled past and pursue the American Dream.

Comments and Discussions

 
GeneralRe: How to freeze the image Pin
Cristian Fuentes20-Sep-16 14:12
Cristian Fuentes20-Sep-16 14:12 
GeneralRe: How to freeze the image Pin
Sasha Yakobchuk21-Sep-16 11:39
Sasha Yakobchuk21-Sep-16 11:39 
GeneralRe: How to freeze the image Pin
Cristian Fuentes22-Sep-16 15:57
Cristian Fuentes22-Sep-16 15:57 
QuestionDirecrtShowFacade not building Pin
Cristian Fuentes19-Sep-16 15:03
Cristian Fuentes19-Sep-16 15:03 
AnswerRe: DirecrtShowFacade not building Pin
Sasha Yakobchuk20-Sep-16 12:03
Sasha Yakobchuk20-Sep-16 12:03 
Questionnot working on modal dialog Pin
amigoface18-Sep-16 4:43
amigoface18-Sep-16 4:43 
AnswerRe: not working on modal dialog Pin
Sasha Yakobchuk20-Sep-16 12:05
Sasha Yakobchuk20-Sep-16 12:05 
GeneralRe: not working on modal dialog Pin
amigoface20-Sep-16 14:54
amigoface20-Sep-16 14:54 
yes please

[^]


the material design XAML Lib is an open source project too that live here :

[^]


thanks !
GeneralRe: not working on modal dialog Pin
Sasha Yakobchuk21-Sep-16 12:36
Sasha Yakobchuk21-Sep-16 12:36 
GeneralRe: not working on modal dialog Pin
amigoface22-Sep-16 8:13
amigoface22-Sep-16 8:13 
GeneralRe: not working on modal dialog Pin
Sasha Yakobchuk22-Sep-16 8:49
Sasha Yakobchuk22-Sep-16 8:49 
GeneralRe: not working on modal dialog Pin
Member 83232313-Nov-17 5:34
Member 83232313-Nov-17 5:34 
GeneralRe: not working on modal dialog Pin
Sasha Yakobchuk4-Nov-17 3:29
Sasha Yakobchuk4-Nov-17 3:29 
QuestionCan not open the Demo Pin
Cristian Fuentes14-Sep-16 21:19
Cristian Fuentes14-Sep-16 21:19 
AnswerRe: Can not open the Demo Pin
Sasha Yakobchuk15-Sep-16 10:43
Sasha Yakobchuk15-Sep-16 10:43 
GeneralRe: Can not open the Demo Pin
Cristian Fuentes19-Sep-16 15:00
Cristian Fuentes19-Sep-16 15:00 
QuestionHow to add text on top Pin
Patrick70__13-Sep-16 5:28
Patrick70__13-Sep-16 5:28 
AnswerRe: How to add text on top Pin
Sasha Yakobchuk13-Sep-16 11:37
Sasha Yakobchuk13-Sep-16 11:37 
GeneralRe: How to add text on top Pin
Patrick70__13-Sep-16 23:28
Patrick70__13-Sep-16 23:28 
QuestionNeed help Pin
Kapil Waghe2-Sep-16 5:44
Kapil Waghe2-Sep-16 5:44 
AnswerRe: Need help Pin
Sasha Yakobchuk3-Sep-16 11:02
Sasha Yakobchuk3-Sep-16 11:02 
GeneralRe: Need help Pin
Kapil Waghe8-Sep-16 22:59
Kapil Waghe8-Sep-16 22:59 
GeneralRe: Need help Pin
Sasha Yakobchuk12-Sep-16 12:26
Sasha Yakobchuk12-Sep-16 12:26 
GeneralRe: Need help Pin
Ishan pandya10-Sep-16 8:08
Ishan pandya10-Sep-16 8:08 
GeneralRe: Need help Pin
Sasha Yakobchuk12-Sep-16 12:26
Sasha Yakobchuk12-Sep-16 12:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.