Getting Started with WPF WebCam

This tutorial will walk you through the creation of a sample application that contains RadWebCam.

Assembly References

In order to use RadWebCam, you will need to add references to the following assemblies:

Telerik.Windows.Controls
Telerik.Windows.Controls.Media
Telerik.Windows.Controls.Navigation
Telerik.Windows.MediaFoundation
MediaFoundation: This dll is located in the UI for WPF installation folder/Binaries or Binaries.NoXaml/{.NET Version}/MediaFoundation folder.
SkiaSharp NuGet package (version 2.88.6).

For .NET 6 and later you will need to install also the System.Drawing.Common NuGet package. This is required only if the Telerik assemblies are referenced manually in the project. In case you install the dlls using NuGet or the Telerik Visual Studio Extension, this package is included automatically.

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

With the 2024 Q4 release the SharpDX library used for the rendering of the camera's video feed was replaced with the SkiaSharp library. This was necessary because after March 2019, SharpDX is no longer maintained.

RadWebCam uses Microsoft Media Foundation which requires a minimum OS version of Windows Vista or later. Also, some versions of Windows 7 don't have the Media Feature Package installed, so you may need to install it separately.

Adding Telerik Assemblies Using NuGet

To use RadWebCam when working with NuGet packages, install the Telerik.Windows.Controls.Media.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

Setting up the Control

To start using the control you only need to add it in the visual tree through XAML or code-behind. This will automatically detect a web camera if one is connected to the device and start receiving the media stream, thus showing the camera input.

Defining RadWebCam in XAML

<telerik:RadWebCam />

Defining RadWebCam in code

RadWebCam radWebCam = new RadWebCam();

From this point on, you can start using the control without any additional set up.

RadWebCam

WPF RadWebCam Overview

Auto Start

By default the camera control will start automatically if a camera device is connected. You can change this by setting the AutoStart property of RadWebCam to False.

Setting AutoStart in XAML

 <telerik:RadWebCam AutoStart="False"/>

Setting AutoStart in code

this.radWebCam.AutoStart = false;

Connect to a Camera Manually

To start the webcam with the default settings you can call the Start method of the control. Additionally, you can start a specific camera device and choose a different video format and microphone by calling the Initialize method. Read more about this in the Start the Camera article.

Stop the Camera

To stop the stream between the camera device and the RadWebCam control, call the Stop method.

Stopping the camera

this.radWebCam.Stop();

Recording Video

To record a video you need to set RecordingFilePath before start the recording. This is required in order to specify where the recording will be stored on the file system.

To start recording, press the "Start recording" button or call the StartRecording method of RadWebCam. This will start writing the media stream to the corresponding file.

Set the recording file path in XAML

<telerik:RadWebCam RecordingFilePath="C:\temp\video.mp4"/>

Read more about this in the Recording Video article.

Taking Snapshot

A snapshot of the currently displayed video feed can be taken using the TakeSnapshot method of the control, or by pressing the "Take snapshot button". This will fire the SnapshotTaken event where you get access the current snapshot as a BitmapSource object.

Subscribing to the SnapshotTaken event

public MainWindow() 
{ 
    InitializeComponent(); 
 
    this.radWebCam.SnapshotTaken += RadWebCam_SnapshotTaken; 
} 
 
private void RadWebCam_SnapshotTaken(object sender, SnapshotTakenEventArgs e) 
{ 
    BitmapSource snapshot = e.Snapshot; 
    // here you save the source to a file, in memory, or to show it in the UI 
}