Click here to Skip to main content
12,890,879 members (58,130 online)
Click here to Skip to main content
Add your own
alternative version

Stats

590.9K views
72.1K downloads
326 bookmarked
Posted 17 Nov 2011

WPF: Webcam Control

, 2 Apr 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
A WPF UserControl for displaying and recording video from a webcam
This is an old version of the currently published article.

WPF_WebcamControl/Screenshot_1.png

Introduction

I have on several occasions scoured the net for a simple to use WPF webcam control and either my search queries were awful or I just wasn't comfortable with whatever I found. This webcam interest was recently increased when I read an article, here on CodeProject, that referred to an application that made use of a webcam. It was a Silverlight article and the ease with which one could utilize a webcam in Silverlight made me envious of WPF's little brother (or is it sister?). The VideoBrush in Silverlight is especially a nice touch.

It is with this pain and envy in mind that I decided to try my hand at creating a WPF control that could;

  1. Display webcam video with little coding effort,
  2. Allow saving of webcam video to harddisk, with little coding effort,
  3. Save the webcam video in a variety of video formats

Background

With the previously mentioned goals in mind, I created a WPF UserControl that has the following features:

  • Displays webcam video,
  • Enables saving of webcam videos to harddisk,
  • Enables saving of webcam videos in either .wmv, .mp4, or .flv format

The UserControl also enables you to take a snapshot of the live webcam video, and save it as a Jpeg, Png, Gif, or any other of the ImageFormat properties.

The Webcam control makes heavy use of the Expression Encoder 4 SDK. You therefore need to have the SDK installed on your machine to make use of the UserControl. You can download the SDK from here.

Requirements

To make use of the Webcam control, you require: 

  • .NET Framework 4.0
  • Expression Encoder SDK

Using the Webcam Control

To use the Webcam control in your WPF application, add a reference to WebcamControl.dll and a using/Imports statement for WebcamControl at the top of your class.

Add a reference to Microsoft.Expression.Encoder.dll. Do this by using the Add Reference dialog box, selecting the .NET tab, and selecting Microsoft.Expression.Encoder from the listbox. The Expression Encoder assemblies should be available if you have installed Expression Encoder 4.

The following example, which is the code for the downloadable sample application, shows the use of the Webcam control. The sample application contains a ContentControl that will host the Webcam control, two ComboBoxes for displaying the names of audio and video devices connected to the machine, and five buttons.

VB.NET

Imports Microsoft.Expression.Encoder.Devices
Imports WebcamControl
Imports System.IO
Imports Microsoft.Expression.Encoder.Live
Imports Microsoft.Expression.Encoder
Imports System.Drawing
Imports System.Drawing.Imaging

Class MainWindow
    Private webCamCtrl As New Webcam

    Private Sub MainWindow_Loaded(ByVal sender As Object, _
                                  ByVal e As System.Windows.RoutedEventArgs) _
                              Handles Me.Loaded
        FindDevices()

        Dim vidPath As String = "C:\VideoClips"
        Dim imgPath As String = "C:\WebcamSnapshots"

        If Directory.Exists(vidPath) = False Then
            Directory.CreateDirectory(vidPath)
        End If

        If Directory.Exists(imgPath) = False Then
            Directory.CreateDirectory(imgPath)
        End If

        ' Set some properties of the Webcam control.
        webCamCtrl.VideoDirectory = vidPath
        webCamCtrl.VidFormat = VideoFormat.wmv

        webCamCtrl.ImageDirectory = imgPath
        webCamCtrl.PictureFormat = ImageFormat.Jpeg

        ' Set the Webcam control as the ContentControl's content.
        ContentControl1.Content = webCamCtrl

        VidDvcsComboBox.SelectedIndex = 0
        AudDvcsComboBox.SelectedIndex = 0
    End Sub

    ' Find available a/v devices.
    Private Sub FindDevices()
        Dim vidDevices = EncoderDevices.FindDevices(EncoderDeviceType.Video)
        Dim audDevices = EncoderDevices.FindDevices(EncoderDeviceType.Audio)

        For Each dvc In vidDevices
            VidDvcsComboBox.Items.Add(dvc.Name)
        Next

        For Each dvc In audDevices
            AudDvcsComboBox.Items.Add(dvc.Name)
        Next
    End Sub

    Private Sub StartButton_Click(ByVal sender As System.Object, _
                        ByVal e As System.Windows.RoutedEventArgs) _
                        Handles StartButton.Click
        ' Display webcam images on control.
        Try
            webCamCtrl.StartCapture()
        Catch ex As Microsoft.Expression.Encoder.SystemErrorException
            MessageBox.Show("Device is in use by another application")
        End Try
    End Sub

    Private Sub EndButton_Click(ByVal sender As Object, _
                        ByVal e As System.Windows.RoutedEventArgs) _
                    Handles EndButton.Click
        ' Stop the display of webcam video.
        webCamCtrl.StopCapture()
    End Sub

    Private Sub RecordButton_Click(ByVal sender As System.Object, _
                        ByVal e As System.Windows.RoutedEventArgs) _
                    Handles RecordButton.Click
        ' Start recording of webcam video to harddisk.
        webCamCtrl.StartRecording()
    End Sub

    Private Sub StopRecordButton_Click(ByVal sender As Object, _
                        ByVal e As System.Windows.RoutedEventArgs) _
                    Handles StopRecordButton.Click
        ' Stop recording of webcam video to harddisk.
        webCamCtrl.StopRecording()
    End Sub

    Private Sub VidDvcsComboBox_SelectionChanged(ByVal sender As Object, _
                        ByVal e As System.Windows.Controls.SelectionChangedEventArgs) _
                    Handles VidDvcsComboBox.SelectionChanged

        ' Set which video device to use.
        webCamCtrl.VideoDevice = VidDvcsComboBox.SelectedValue
    End Sub

    Private Sub AudDvcsComboBox_SelectionChanged(ByVal sender As Object, _
                        ByVal e As System.Windows.Controls.SelectionChangedEventArgs) _
                    Handles AudDvcsComboBox.SelectionChanged

        ' Set which audio device to use.
        webCamCtrl.AudioDevice = AudDvcsComboBox.SelectedValue
    End Sub

    Private Sub SnapshotButton_Click(ByVal sender As System.Object, _
                        ByVal e As System.Windows.RoutedEventArgs) _
                    Handles SnapshotButton.Click
        webCamCtrl.TakeSnapshot()
    End Sub
End Class

The VideoDevice and AudioDevice properties of Webcam control are dependency properties and can therefore be data-bound to the SelectedValue property of the necessary ComboBox.

Private Sub MainWindow_Initialized(ByVal sender As Object, _
                                      ByVal e As System.EventArgs) Handles Me.Initialized
    Dim bndg_1 As New Binding("SelectedValue")
    bndg_1.Source = VidDvcsComboBox
    webCamCtrl.SetBinding(Webcam.VideoDeviceProperty, bndg_1)

    Dim bndg_2 As New Binding("SelectedValue")
    bndg_2.Source = AudDvcsComboBox
    webCamCtrl.SetBinding(Webcam.AudioDeviceProperty, bndg_2)
End Sub

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Expression.Encoder.Devices;
using WebcamControl;
using System.IO;
using System.Drawing.Imaging;

namespace WPF_Webcam
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private Webcam webCamCtrl;

        public MainWindow()
        {
            InitializeComponent();

            webCamCtrl = new Webcam();           

            // Bind the Video and Audio device properties of the
            // Webcam control to the SelectedValue property of 
            // the necessary ComboBox.
            Binding bndg_1 = new Binding("SelectedValue");
            bndg_1.Source = VidDvcsComboBox;
            webCamCtrl.SetBinding(Webcam.VideoDeviceProperty, bndg_1);

            Binding bndg_2 = new Binding("SelectedValue");
            bndg_2.Source = AudDvcsComboBox;
            webCamCtrl.SetBinding(Webcam.AudioDeviceProperty, bndg_2);

            // Create directory for saving video files.
            string vidPath = @"C:\VideoClips";

            if (Directory.Exists(vidPath) == false)
            {
                Directory.CreateDirectory(vidPath);
            }

            // Create directory for saving image files.
            string imgPath = @"C:\WebcamSnapshots";

            if (Directory.Exists(imgPath) == false)
            {
                Directory.CreateDirectory(imgPath);
            }

            // Set some properties of the Webcam control
            webCamCtrl.VideoDirectory = vidPath;
            webCamCtrl.VidFormat = VideoFormat.wmv;

            webCamCtrl.ImageDirectory = imgPath;
            webCamCtrl.PictureFormat = ImageFormat.Jpeg;

            // Set the Webcam control as the ContentControl's content.
            ContentControl1.Content = webCamCtrl;

            // Find a/v devices connected to the machine.
            FindDevices();

            VidDvcsComboBox.SelectedIndex = 0;
            AudDvcsComboBox.SelectedIndex = 0;
        }

        private void FindDevices()
        {
            var vidDevices = EncoderDevices.FindDevices(EncoderDeviceType.Video);
            var audDevices = EncoderDevices.FindDevices(EncoderDeviceType.Audio);

            foreach (EncoderDevice dvc in vidDevices)
            {
                VidDvcsComboBox.Items.Add(dvc.Name);
            }

            foreach (EncoderDevice dvc in audDevices)
            {
                AudDvcsComboBox.Items.Add(dvc.Name);
            }

        }

        private void StartButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                // Display webcam video on control.
                webCamCtrl.StartCapture();               
            }
            catch (Microsoft.Expression.Encoder.SystemErrorException ex)
            {
                MessageBox.Show("Device is in use by another application");
            }
        }

        private void EndButton_Click(object sender, RoutedEventArgs e)
        {
            // Stop the display of webcam video.
            webCamCtrl.StopCapture();
        }

        private void RecordButton_Click(object sender, RoutedEventArgs e)
        {
            // Start recording of webcam video to harddisk.
            webCamCtrl.StartRecording();
        }

        private void StopRecordButton_Click(object sender, RoutedEventArgs e)
        {
            // Stop recording of webcam video to harddisk.
            webCamCtrl.StopRecording();
        }

        private void SnapshotButton_Click(object sender, RoutedEventArgs e)
        {
            // Take snapshot of webcam image.
            webCamCtrl.TakeSnapshot();
        }           
       
    }
}

As you can see from the sample code, using the Webcam control is not a hard affair once you have the necessary references and Imports/using statements.

Webcam

The following are the members of interest in class Webcam:

Properties

NameDescriptionType
WPF_WebcamControl/PropertyIcon.pngVideoDirectoryGets or Sets the folder where the recorded webcam video will be saved. This is a dependency property.String
WPF_WebcamControl/PropertyIcon.pngVidFormatGets or Sets the video format in which the webcam video will be saved. This is a dependency property. (The default format is .wmv)VideoFormat
WPF_WebcamControl/PropertyIcon.pngVideoDeviceGets or Sets the name of the video device to be used. This is a dependency property.String
WPF_WebcamControl/PropertyIcon.pngAudioDeviceGets or Sets the name of the audio device to be used. This is a dependency property.String
WPF_WebcamControl/PropertyIcon.pngIsRecordingGets a value indicating whether video recording is taking place. This is a read-only property.Boolean
WPF_WebcamControl/PropertyIcon.pngImageDirectoryGets or Sets the folder where a snapshot of the webcam video will be saved. This is a dependency property.String
WPF_WebcamControl/PropertyIcon.pngPictureFormatGets or Sets the format in which a snapshot of the webcam video will be saved. This is a dependency property. (The default format is Jpeg).ImageFormat

Methods

NameDescription
WPF_WebcamControl/MethodIcon.pngStartCaptureDisplays webcam video on control. (Throws a Microsoft.Expression.Encoder.SystemErrorException if a specified device is already in use by another application)
WPF_WebcamControl/MethodIcon.pngStopCaptureStops the capturing/display of webcam video. (Stops any current recording of webcam video)
WPF_WebcamControl/MethodIcon.pngStartRecordingStarts the recording of webcam video to a video file. (Throws a DirectoryNotFoundException if the directory specified in the VideoDirectory property does not exist)
WPF_WebcamControl/MethodIcon.pngStopRecordingStops the recording of webcam video.  
WPF_WebcamControl/MethodIcon.pngTakeSnapshotSaves a snapshot of the webcam video. (Throws a DirectoryNotFoundException if the directory specified in the ImageDirectory property does not exist)

The Code

The XAML markup for the UserControl is:

<UserControl x:Class="Webcam" 

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

             Height="Auto" Width="Auto" MinHeight="100" MinWidth="100" 

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

             mc:Ignorable="d" d:DesignWidth="320" d:DesignHeight="240" Name="Webcam">
    <Grid>
        <WindowsFormsHost Margin="0,0,0,0" Name="WinFormHost" Background="{x:Null}">
            <wf:Panel x:Name="WebcamPanel" Size="320,240" />
        </WindowsFormsHost>
    </Grid>
</UserControl>

The dimensions of the WinForm Panel are adjusted when the control is loaded so that the webcam video will occupy the entire area of the Panel's parent element.

Private Sub Webcam_Loaded(ByVal sender As Object, _
                  ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    ' Set dimensions of WinForm Panel to current dimensions
    ' of the UserControl.
    Dim panelWidth As Integer = CInt(Me.ActualWidth)
    Dim panelHeight As Integer = CInt(Me.ActualHeight)

    WebcamPanel.Width = panelWidth
    WebcamPanel.Height = panelHeight
End Sub

As highlighted earlier, Webcam contains several properties and methods that aid in its operation. The VideoDevice dependency property is defined as follows:

''' <summary>
''' Gets or Sets the name of the video device to be used.
''' </summary>    
Public Property VideoDevice() As String
    Get
        Return CType(GetValue(VideoDeviceProperty), String)
    End Get
    Set(ByVal value As String)
        SetValue(VideoDeviceProperty, value)
    End Set
End Property

Public Shared VideoDeviceProperty As DependencyProperty = _
    DependencyProperty.Register("VideoDevice", GetType(String), GetType(Webcam), _
                          New FrameworkPropertyMetadata(New PropertyChangedCallback( _
                                                              AddressOf VidDeviceChange)))

Private Shared Sub VidDeviceChange(ByVal source As DependencyObject, _
    ByVal e As DependencyPropertyChangedEventArgs)
    Dim deviceName As String = CType(e.NewValue, String)
    Dim eDev = EncoderDevices.FindDevices(EncoderDeviceType.Video).Where _
               (Function(dv) dv.Name = deviceName)

    If (eDev.Count > 0) Then
        CType(source, Webcam).vidDevice = eDev.First

        Try
            CType(source, Webcam).Display()
        Catch ex As Microsoft.Expression.Encoder.SystemErrorException
            Exit Sub
        End Try
    End If
End Sub

The StartCapture() method displays the webcam video in the WinForm Panel, if the necessary properties are set:

''' <summary>
''' Display webcam video on control.
''' </summary>
Public Sub StartCapture()
    If (canCapture = False) Then
        canCapture = True

        Try
            Display()
        Catch ex As Microsoft.Expression.Encoder.SystemErrorException
            canCapture = False
            Throw New Microsoft.Expression.Encoder.SystemErrorException
        End Try
    Else
        Exit Sub
    End If
End Sub
    
' Display video from webcam.
Private Sub Display()
    If (canCapture = True) Then
        If (vidDevice IsNot Nothing) Then
            StopRecording()
            Dispose()

            job = New LiveJob

            deviceSource = job.AddDeviceSource(vidDevice, audDevice)

            deviceSource.PreviewWindow = _
                 New PreviewWindow(New HandleRef(WebcamPanel, WebcamPanel.Handle))

            job.ActivateSource(deviceSource)

            isCapturing = True
        End If
    End If
End Sub

The StartRecording() method records video from the webcam to the harddisk:

''' <summary>
''' Starts the recording of webcam video to a video file.
''' </summary>
Public Sub StartRecording()
    If (vidDirectory <> String.Empty AndAlso job IsNot Nothing) Then
        If (Directory.Exists(vidDirectory) = False) Then
            Throw New DirectoryNotFoundException("The specified directory does not exist")
            Exit Sub
        End If

        ' If isCapturing is true then it means the control is capturing images 
        ' from the webcam.
        If (isCapturing = True) Then
            StopRecording()
            job.PublishFormats.Clear()

            Dim timeStamp As String = DateTime.Now.ToString
            timeStamp = timeStamp.Replace("/", "-")
            timeStamp = timeStamp.Replace(":", ".")
            Dim filePath As String = vidDirectory & "\WebcamVid " & timeStamp & "." & _vidFormat.ToString

            Dim fileArchFormat As New FileArchivePublishFormat(filePath)
            job.PublishFormats.Add(fileArchFormat)
            job.StartEncoding()

            _isRecording = True
        End If
    End If
End Sub

The VideoFormat enumeration contains three members:

Public Enum VideoFormat
    wmv
    mp4
    flv
End Enum

The TakeSnapshot() method saves a snapshot of the webcam video. The image generated is actually a snapshot of the WinForms Panel, WebcamPanel. The size of the image will depend on the size of the Webcam control.

''' <summary>
''' Take snapshot of a webcam image. 
''' </summary>
Public Sub TakeSnapshot()
    If (imgDirectory <> String.Empty AndAlso job IsNot Nothing) Then
        If (Directory.Exists(imgDirectory) = False) Then
            Throw New DirectoryNotFoundException("The specified directory does not exist")
            Exit Sub
        End If

        ' If isCapturing is true then it means the control is capturing video 
        ' from the webcam.
        If (isCapturing = True) Then
            Dim panelWidth As Integer = CInt(Me.ActualWidth)
            Dim panelHeight As Integer = CInt(Me.ActualHeight)

            Dim timeStamp As String = DateTime.Now.ToString
            timeStamp = timeStamp.Replace("/", "-")
            timeStamp = timeStamp.Replace(":", ".")

            Dim filePath As String = imgDirectory & "\Snapshot " & timeStamp & "." & imgFormat.ToString

            Dim pnlPnt As Point = WebcamPanel.PointToScreen(New Point(WebcamPanel.ClientRectangle.X, _
                                                                      WebcamPanel.ClientRectangle.Y))

            Using bmp As New Bitmap(panelWidth, panelHeight)
                Using gcs As Graphics = Graphics.FromImage(bmp)
                    gcs.CopyFromScreen(pnlPnt, Point.Empty, New Size(panelWidth, panelHeight))
                End Using
                bmp.Save(filePath, imgFormat)
            End Using
        End If
    End If
End Sub

You can take a look at the other properties and methods defined in class Webcam by downloading the source files from the download link at the top of this article.

Conclusion

I hope that you picked up something useful from this article. I'm a novice in audio-video-encoding-decoding matters so if you have any questions regarding such technicalities, please try to post them in the associated forums here on CodeProject. Suggestions will be beneficial, as well as answers you receive to any technical queries that may be associated with this article's content. Thanks.

History

  • 18th Nov, 2011: Initial post
  • 19th Nov, 2011: Updated code
  • 31st Mar, 2012: Added snapshot feature.

License

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

Share

About the Author

Meshack Musundi
Software Developer
Kenya Kenya
Meshack is a software developer with a passion for WPF.

Awards,

  • CodeProject MVP 2013

  • CodeProject MVP 2012


You may also be interested in...

Pro

Comments and Discussions


Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
 
QuestionReturn filename after snapshot Pin
Member 108021537-Apr-17 4:39
memberMember 108021537-Apr-17 4:39 
QuestionOverlay shape Pin
Member 1286250610-Mar-17 9:17
memberMember 1286250610-Mar-17 9:17 
AnswerRe: Overlay shape Pin
Meshack Musundi10-Mar-17 19:26
professionalMeshack Musundi10-Mar-17 19:26 
QuestionSystem.NullReferenceException when using WPF tabs Pin
Member 1125681016-Feb-17 9:42
memberMember 1125681016-Feb-17 9:42 
AnswerRe: System.NullReferenceException when using WPF tabs Pin
Meshack Musundi17-Feb-17 2:32
professionalMeshack Musundi17-Feb-17 2:32 
GeneralRe: System.NullReferenceException when using WPF tabs Pin
Member 1125681017-Feb-17 9:36
memberMember 1125681017-Feb-17 9:36 
GeneralRe: System.NullReferenceException when using WPF tabs Pin
Meshack Musundi18-Feb-17 2:10
professionalMeshack Musundi18-Feb-17 2:10 
QuestionReturn filename after snapshot or video Pin
Member 1231566316-Jan-17 6:13
memberMember 1231566316-Jan-17 6:13 
AnswerRe: Return filename after snapshot or video Pin
Meshack Musundi17-Jan-17 20:05
professionalMeshack Musundi17-Jan-17 20:05 
QuestionProblem with Microsoft.Expression.Encoder Pin
Andrey_Smolensk9-Jan-17 19:44
memberAndrey_Smolensk9-Jan-17 19:44 
AnswerRe: Problem with Microsoft.Expression.Encoder Pin
Meshack Musundi11-Jan-17 3:25
professionalMeshack Musundi11-Jan-17 3:25 
GeneralMy vote of 5 Pin
Member 1276138229-Sep-16 16:41
memberMember 1276138229-Sep-16 16:41 
QuestionTake snapshot to Image control Pin
Member 119749981-Jul-16 7:35
memberMember 119749981-Jul-16 7:35 
QuestionUsers have to install the Expression Encoder app to use this. Pin
jonavark6-Jun-16 8:09
memberjonavark6-Jun-16 8:09 
Questionpreview window always got still image or black image Pin
arfken030917-May-16 20:43
memberarfken030917-May-16 20:43 
AnswerRe: preview window always got still image or black image Pin
Meshack Musundi18-May-16 0:00
professionalMeshack Musundi18-May-16 0:00 
GeneralRe: preview window always got still image or black image Pin
arfken030918-May-16 6:27
memberarfken030918-May-16 6:27 
AnswerRe: preview window always got still image or black image Pin
gooyou17-Jan-17 3:59
membergooyou17-Jan-17 3:59 
QuestionMultiple Previews from the same source Pin
GoCo Software3-May-16 5:25
memberGoCo Software3-May-16 5:25 
AnswerRe: Multiple Previews from the same source Pin
Meshack Musundi3-May-16 21:56
professionalMeshack Musundi3-May-16 21:56 
GeneralRe: Multiple Previews from the same source Pin
GoCo Software4-May-16 5:27
memberGoCo Software4-May-16 5:27 
GeneralRe: Multiple Previews from the same source Pin
Meshack Musundi4-May-16 22:44
professionalMeshack Musundi4-May-16 22:44 
GeneralRe: Multiple Previews from the same source Pin
GoCo Software5-May-16 1:15
memberGoCo Software5-May-16 1:15 
QuestionWebcamControl.dll Pin
Member 1246467716-Apr-16 12:44
memberMember 1246467716-Apr-16 12:44 
GeneralRe: WebcamControl.dll Pin
Meshack Musundi17-Apr-16 22:17
professionalMeshack Musundi17-Apr-16 22:17 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170424.1 | Last Updated 2 Apr 2012
Article Copyright 2011 by Meshack Musundi
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid