Click here to Skip to main content
Click here to Skip to main content

WPF: Webcam Control

, 24 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
A WPF UserControl for displaying and recording video from a webcam

WPF_WebcamControl/Screenshot_1.png

Introduction

Webcam is a WPF user control that uses the Expression Encoder SDK to enable easy display of webcam video in a WPF application.

Features

Webcam has the following features,

  • displays webcam video in a WPF application,
  • enables saving of webcam video (in .wmv format),
  • enables saving of snapshots of webcam preview.

Requirements

NB: There are two versions of Expression Encoder; the free and paid version (Expression Encoder Pro). Webcam can be used with either version.

Webcam Class

Properties

  Name Description
WPF_WebcamControl/PropertyIcon.png VideoFileFormat Gets the format in which webcam videos will be saved. This is a dependency property of type String.
WPF_WebcamControl/PropertyIcon.png SnapshotFormat Gets or Sets the format used when saving snapshots of webcam preview. This is a dependency property of type ImageFormat.
WPF_WebcamControl/PropertyIcon.png VideoDevice Gets or Sets the webcam to be used. This is a dependency property of type Microsoft.Expression.Encoder.Devices.EncoderDevice.
WPF_WebcamControl/PropertyIcon.png AudioDevice Gets or Sets the microphone to be used. This is a dependency property of type Microsoft.Expression.Encoder.Devices.EncoderDevice
WPF_WebcamControl/PropertyIcon.png VideoDirectory Gets or Sets the folder where the webcam video will be saved. This is a dependency property of type String.
WPF_WebcamControl/PropertyIcon.png ImageDirectory Gets or Sets the folder where video snapshots will be saved. This is a dependency property of type String.
WPF_WebcamControl/PropertyIcon.png FrameRate Gets or sets the frame rate, in frames per second. This is a dependency property of type Integer. (The default value is 15).
WPF_WebcamControl/PropertyIcon.png FrameSize Gets or sets the size of the video profile. This is a dependency property of type System.Drawing.Size. (The default value is 320x240).
WPF_WebcamControl/PropertyIcon.png IsRecording Gets a value indicating whether video recording is taking place. This is a dependency property of type Boolean.

Methods

  Name Description
WPF_WebcamControl/MethodIcon.png StartPreview Starts the display of webcam preview. (Throws a Microsoft.Expression.Encoder.SystemErrorException if a specified device is already in use by another application)
WPF_WebcamControl/MethodIcon.png StopPreview Stops the display of webcam preview. (Stops recording of webcam video)
WPF_WebcamControl/MethodIcon.png StartRecording Starts the recording of webcam preview to a video file. (Throws a DirectoryNotFoundException if the directory specified in the VideoDirectory property does not exist or if the property is not set).
WPF_WebcamControl/MethodIcon.png StopRecording Stops the recording of webcam preview.
WPF_WebcamControl/MethodIcon.png TakeSnapshot Saves a snapshot of webcam preview. (Throws a DirectoryNotFoundException if the directory specified in the ImageDirectory property does not exist or if the property is not set).

Example

The following example shows how to use the user control. The example contains a Webcam control, two ComboBoxes for displaying video and audio devices, and several buttons for calling the various methods of the user control.

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cam="clr-namespace:WebcamControl;assembly=WebcamControl"    
    Title="WPF Webcam" Height="495" Width="353">
    <Window.Resources>
        <DataTemplate x:Key="DevicesListTemplate">
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="207"/>
        </Grid.RowDefinitions>
        <cam:Webcam Name="WebcamCtrl" Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

        <StackPanel Margin="0,5,0,0" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="22">
                <TextBlock Height="22" Width="78" HorizontalAlignment="Left" VerticalAlignment="Top"
                           Text="Video Device" TextAlignment="Left" FlowDirection="LeftToRight" />
                <ComboBox Height="22" Width="210" HorizontalAlignment="Left" VerticalAlignment="Top"
                          x:Name="VideoDevicesComboBox" ItemTemplate="{StaticResource DevicesListTemplate}"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="23" Margin="0,10,0,0">
                <TextBlock Height="22" Width="78" HorizontalAlignment="Left" VerticalAlignment="Top"
                           Text="Audio Device" TextAlignment="Left" FlowDirection="LeftToRight"/>
                <ComboBox HorizontalAlignment="Left" Height="23" Width="210" VerticalAlignment="Bottom"
                          x:Name="AudioDevicesComboBox" ItemTemplate="{StaticResource DevicesListTemplate}"/>
            </StackPanel>
        </StackPanel>

        <Grid Margin="0,0,0,20" HorizontalAlignment="Center" VerticalAlignment="Bottom" Grid.Row="1">
            <Button Content="Start Recording" Height="24" Width="115" Margin="0,40,0,0" HorizontalAlignment="Left" 
                    VerticalAlignment="Top" x:Name="StartRecordingButton" Click="StartRecordingButton_Click"/>
            <Button Content="Stop Recording" Height="24" Width="112" Margin="0,40,0,0" HorizontalAlignment="Right" 
                    VerticalAlignment="Top" x:Name="StopRecordingButton" Click="StopRecordingButton_Click"/>
            <Button Content="Stop Capture" Height="24" Width="112" HorizontalAlignment="Right" 
                    VerticalAlignment="Top" x:Name="StopCaptureButton" Click="StopCaptureButton_Click"/>
            <Button Content="Start Capture" Height="24" Width="115" HorizontalAlignment="Left" 
                    VerticalAlignment="Top" x:Name="StartCaptureButton" Click="StartCaptureButton_Click"/>
            <Button Content="Take Snapshot" Height="24" Width="120" Margin="60,78,60,0" HorizontalAlignment="Center" 
                    VerticalAlignment="Top" x:Name="TakeSnapshotButton" Click="TakeSnapshotButton_Click"/>
        </Grid>
    </Grid>
</Window>
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
    {
        
        public MainWindow()
        {
            InitializeComponent();                   
                        
            Binding binding_1 = new Binding("SelectedValue");
            binding_1.Source = VideoDevicesComboBox;
            WebcamCtrl.SetBinding(Webcam.VideoDeviceProperty, binding_1);

            Binding binding_2 = new Binding("SelectedValue");
            binding_2.Source = AudioDevicesComboBox;
            WebcamCtrl.SetBinding(Webcam.AudioDeviceProperty, binding_2);

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

            if (! Directory.Exists(videoPath))
            {
                Directory.CreateDirectory(videoPath);
            }
            // Create directory for saving image files
            string imagePath = @"C:\WebcamSnapshots";

            if (! Directory.Exists(imagePath))
            {
                Directory.CreateDirectory(imagePath);
            }

            // Set some properties of the Webcam control
            WebcamCtrl.VideoDirectory = videoPath;
            WebcamCtrl.ImageDirectory = imagePath;
            WebcamCtrl.FrameRate = 30;
            WebcamCtrl.FrameSize = new System.Drawing.Size(640, 480);

            // Find available a/v devices
            var vidDevices = EncoderDevices.FindDevices(EncoderDeviceType.Video);
            var audDevices = EncoderDevices.FindDevices(EncoderDeviceType.Audio);
            VideoDevicesComboBox.ItemsSource = vidDevices;
            AudioDevicesComboBox.ItemsSource = audDevices;
            VideoDevicesComboBox.SelectedIndex = 0;
            AudioDevicesComboBox.SelectedIndex = 0;
        }        

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

        private void StopCaptureButton_Click(object sender, RoutedEventArgs e)
        {
            // Stop the display of webcam video.
            WebcamCtrl.StopPreview();
        }

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

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

        private void TakeSnapshotButton_Click(object sender, RoutedEventArgs e)
        {
            // Take snapshot of webcam video.
            WebcamCtrl.TakeSnapshot();
        }           
       
    }
}
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

    Public Sub New()
        ' This call is required by the designer.
        InitializeComponent()

        ' Add any initialization after the InitializeComponent() call.

        Dim binding_1 As New Binding("SelectedValue")
        binding_1.Source = VideoDevicesComboBox
        WebcamCtrl.SetBinding(Webcam.VideoDeviceProperty, binding_1)

        Dim binding_2 As New Binding("SelectedValue")
        binding_2.Source = AudioDevicesComboBox
        WebcamCtrl.SetBinding(Webcam.AudioDeviceProperty, binding_2)

        ' Create directory for saving video files
        Dim videoPath As String = "C:\VideoClips"

        If Not Directory.Exists(videoPath) Then
            Directory.CreateDirectory(videoPath)
        End If
        ' Create directory for saving image files
        Dim imagePath As String = "C:\WebcamSnapshots"

        If Not Directory.Exists(imagePath) Then
            Directory.CreateDirectory(imagePath)
        End If

        ' Set some properties of the Webcam control
        WebcamCtrl.VideoDirectory = videoPath
        WebcamCtrl.ImageDirectory = imagePath
        WebcamCtrl.FrameRate = 30
        WebcamCtrl.FrameSize = New Size(640, 480)

        ' Find available a/v devices
        Dim videoDevices = EncoderDevices.FindDevices(EncoderDeviceType.Video)
        Dim audioDevices = EncoderDevices.FindDevices(EncoderDeviceType.Audio)
        VideoDevicesComboBox.ItemsSource = videoDevices
        AudioDevicesComboBox.ItemsSource = audioDevices
        VideoDevicesComboBox.SelectedIndex = 0
        AudioDevicesComboBox.SelectedIndex = 0
    End Sub

    Private Sub StartCaptureButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        ' Display webcam video
        Try
            WebcamCtrl.StartPreview()
        Catch ex As Microsoft.Expression.Encoder.SystemErrorException
            MessageBox.Show("Device is in use by another application")
        End Try
    End Sub

    Private Sub StopCaptureButton_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
        ' Stop the display of webcam video
        WebcamCtrl.StopPreview()
    End Sub

    Private Sub StartRecordingButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        ' Start recording of webcam video
        WebcamCtrl.StartRecording()
    End Sub

    Private Sub StopRecordingButton_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
        ' Stop recording of webcam video
        WebcamCtrl.StopRecording()
    End Sub

    Private Sub TakeSnapshotButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        ' Take snapshot of webcam video
        WebcamCtrl.TakeSnapshot()
    End Sub
End Class

In the code sample the audio and video devices are listed using the EncoderDevices.FindDevices() method. The EncoderDevices class is found in the Microsoft.Expression.Encoder.Devices namespace, so when using the webcam user control in your project ensure that you have installed Expression Encoder and added a reference to Microsoft.Expression.Encoder.dll. You can do this by right-clicking your project, selecting Add Reference from the context menu, and selecting Microsoft.Expression.Encoder in the Assemblies > Extensions section of the Reference Manager dialog box.

NB: When using Microsoft.Expression.Encoder.dll and WebcamControl.dll in your project ensure that the project build platform is set to x86.

Webcam

The following is the XAML markup for the user control,

<UserControl x:Class="Webcam" 
             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-compatibility/2006"
             xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
             MinHeight="100" MinWidth="100"
             mc:Ignorable="d">
    <Grid>
        <WindowsFormsHost Name="WinFormsHost" Margin="0" Background="{x:Null}">
            <wf:Panel x:Name="WebcamPanel"/>
        </WindowsFormsHost>
    </Grid>
</UserControl>

To display video from a webcam the user control makes use of the LiveJob class, which is in the Microsoft.Expression.Encoder.Live namespace. LiveJob expose routines for encoding video and audio from a live source such as a webcam. The webcam video is displayed in a WinForms Panel which is hosted in a WindowsFormsHost.

''' <summary>
''' Displays webcam video.
''' </summary>
Public Sub StartPreview()
    Try
        If (_videoDevice IsNot Nothing) Then
            StopRecording()
            StopCapture()

            job = New LiveJob
            Dim frameDuration As Long = CLng(_frameRate * Math.Pow(10, 7))

            deviceSource = job.AddDeviceSource(_videoDevice, _audioDevice)
            deviceSource.PickBestVideoFormat(FrameSize, frameDuration)
            deviceSource.PreviewWindow = New PreviewWindow(New HandleRef(WebcamPanel, WebcamPanel.Handle))

            job.OutputFormat.VideoProfile = New AdvancedVC1VideoProfile
            job.OutputFormat.VideoProfile.Size = FrameSize
            job.OutputFormat.VideoProfile.FrameRate = FrameRate

            job.ActivateSource(deviceSource)

            isPreviewing = True
        End If
    Catch ex As Microsoft.Expression.Encoder.SystemErrorException
        Throw New Microsoft.Expression.Encoder.SystemErrorException
    End Try
End Sub

The LiveJob object is used to save webcam videos using the LiveJob.StartEncoding() method.

''' <summary>
''' Starts the recording of webcam images to a video file.
''' </summary>
Public Sub StartRecording()
    Dim vidDir As String = CType(GetValue(VideoDirectoryProperty), String)

    If (vidDir = String.Empty) Then
        Throw New DirectoryNotFoundException("Video directory has not been specified")
        Exit Sub
    ElseIf (Not Directory.Exists(vidDir)) Then
        Throw New DirectoryNotFoundException("The specified video directory does not exist")
        Exit Sub
    End If

    If (job IsNot Nothing AndAlso isPreviewing) Then
        StopRecording()

        Dim filePath As String = Path.Combine(vidDir, "Webcam " & TimeStamp() & ".wmv")
        Dim fileArcvFormat As New FileArchivePublishFormat(filePath)

        job.PublishFormats.Clear()
        job.PublishFormats.Add(fileArcvFormat)
        job.StartEncoding()

        SetValue(IsRecordingPropertyKey, True)
    End If
End Sub

A snapshot of a webcam video is actually just a snapshot of the WinForms Panel,

''' <summary>
''' Takes a snapshot of an webcam image.
''' The size of the image will be equal to the size of the control.
''' </summary>
Public Sub TakeSnapshot()
    Dim imgDir As String = CType(GetValue(ImageDirectoryProperty), String)

    If (imgDir = String.Empty) Then
        Throw New DirectoryNotFoundException("Image directory has not been specified")
        Exit Sub
    ElseIf (Not Directory.Exists(imgDir)) Then
        Throw New DirectoryNotFoundException("The specified image directory does not exist")
        Exit Sub
    End If

    If (job IsNot Nothing AndAlso isPreviewing) Then
        Dim panelWidth As Integer = WebcamPanel.Width
        Dim panelHeight As Integer = WebcamPanel.Height
        Dim imgFormat As ImageFormat = CType(GetValue(SnapshotFormatProperty), ImageFormat)
        Dim filePath As String = Path.Combine(imgDir, "Snapshot " & TimeStamp() & "." & imgFormat.ToString)
        Dim pnt As Point = WebcamPanel.PointToScreen(New Point(WebcamPanel.ClientRectangle.X, WebcamPanel.ClientRectangle.Y))

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

If you want to take a look at the rest of the code for usercontrol check out the WPF user control library project in the source download.

Conclusion

I hope you found this article useful. In case of any queries you can leave a comment and I'll do my best to answer.

History

  • 18th Nov, 2011: Initial post
  • 19th Nov, 2011: Updated code
  • 31st Mar, 2012: Added snapshot feature.
  • 17th Nov, 2012: Added FrameRate and FrameSize properties.
  • 30th Oct, 2013: v3.0
  • 24th July, 2014: v3.1,
    • Webcam preview now resizes with control,
    • StartCapture() renamed to StartPreview(),
    • StopCapture() renamed to StopPreview().

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 an avid programmer with a bias towards WPF and VB.NET. He has about 5 years of programming experience initially starting off with Java before shifting to .NET, thanks to the allure of WPF. He has developed several applications, and written several articles about them, which can be viewed here on CodeProject. He currently resides in a small town in Kiambu county, Kenya.
 
Awards;
  • CodeProject MVP 2013
  • CodeProject MVP 2012
  • Best VB.NET article of August 2013
  • Best VB.NET article of February 2013
  • Best VB.NET article of October 2012
  • Best VB.NET article of July 2012
  • Best VB.NET article of February 2012
  • Best VB.NET article of January 2012
  • Best VB.NET article of November 2011
  • Best VB.NET article of June 2011
  • Best VB.NET article of May 2011
  • Best VB.NET article of March 2011
  • Best VB.NET article of February 2011
  • Best VB.NET article of January 2011
  • Best VB.NET article of December 2010
  • Best VB.NET article of November 2010

Comments and Discussions

 
GeneralRe: overlay image or text PinmvpMeshack Musundi17-Mar-13 23:30 
GeneralRe: overlay image or text PinmemberValomo18-Mar-13 3:36 
QuestionC# demo Pinmemberh-furu23-Feb-13 5:46 
AnswerRe: C# demo PinmvpMeshack Musundi24-Feb-13 1:40 
GeneralRe: C# demo Pinmemberh-furu24-Feb-13 4:02 
GeneralMy vote of 5 Pinmembersam.hill11-Feb-13 9:01 
GeneralRe: My vote of 5 PinmvpMeshack Musundi11-Feb-13 20:54 
Questionmultiple cameras of same manufacturer Pinmemberthomas ls11-Feb-13 4:46 
is it possible to use webcams of same manufacturer at the same time . i used your program to view multiple webcams . but when i connect two webcams of the same company it wont work .
AnswerRe: multiple cameras of same manufacturer PinmvpMeshack Musundi11-Feb-13 5:42 
GeneralMy vote of 5 PinmemberHatmanul5-Feb-13 12:36 
GeneralRe: My vote of 5 PinmvpMeshack Musundi11-Feb-13 5:38 
Questionvideoformats PinmemberD4rkr00t24-Jan-13 22:03 
AnswerRe: videoformats PinmvpMeshack Musundi11-Feb-13 5:37 
GeneralRe: videoformats PinmemberValomo17-Mar-13 23:00 
GeneralRe: videoformats PinmvpMeshack Musundi17-Mar-13 23:26 
GeneralRe: videoformats PinmemberValomo18-Mar-13 3:35 
BugdeviceSource.PickBestVideoFormat question Pinmemberalexbk6623-Jan-13 19:22 
GeneralRe: deviceSource.PickBestVideoFormat question PinmvpMeshack Musundi11-Feb-13 5:36 
Questionrelease: Stopped working PinmemberMember 952101821-Jan-13 4:46 
AnswerRe: release: Stopped working PinmvpMeshack Musundi11-Feb-13 0:52 
GeneralMy vote of 5 Pinmemberhaji124519-Jan-13 23:30 
Questionmultiple cameras Pinmemberthomas ls10-Jan-13 6:11 
AnswerRe: multiple cameras PinmvpMeshack Musundi10-Jan-13 19:28 
GeneralRe: multiple cameras Pinmemberthomas ls10-Jan-13 22:11 
GeneralRe: multiple cameras Pinmemberthomas ls11-Jan-13 0:56 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 24 Jul 2014
Article Copyright 2011 by Meshack Musundi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid