How to Use CameraPreview Control In UWP

 The CameraPreview control allows us to easily preview video in the MediaPlayerElement from available camera frame source groups. You can subscribe and get real-time video frames and software bitmaps as they arrive from the selected camera source. It shows only frame sources that support color video preview or video record streams.

CameraPreview control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of extensions, helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you will learn how to use CameraPreview control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017 (https://www.visualstudio.com/vs/whatsnew/

Step 1

Open Visual Studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give the suitable name for your app (UWPCameraPreview)->OK.

 

After choosing the target and minimum platform version that your Windows Universal Application will support, the project creates App.xaml and MainPage.xaml.

 

Step 2

First, update the Reference, Microsoft.NETCore.UniversalWindowsPlatform with the latest version via "Manage NuGet Packages".

 

Step 3

Add the following controls in design window for CameraPreviewfeature View, add the TextBlock Control, and change the Name and Text Property.

Add the following namespace for CameraPreview Control.

xmlns:Custom="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add the CameraPreview control and set the Name Property.

 

<Custom:CameraPreview x:Name="CPTest" HorizontalAlignment="Left" Height="336" Margin="44,164,0,0" VerticalAlignment="Top" Width="414"/>

Add the namespace and the following code to Mainpage.xaml.cs.

using Microsoft.Toolkit.Uwp.Helpers;
using Microsoft.Toolkit.Uwp.UI.Controls;
public sealed partial class MainPage: Page {
    public MainPage() {
        this.InitializeComponent();
        OpenCamera();
    }
    public async void OpenCamera() {
        CPTest.PreviewFailed += CPTest_PreviewFailed;
        await CPTest.StartAsync();
        CPTest.CameraHelper.FrameArrived += CPTest_FrameArrived;
    }
    private void CPTest_FrameArrived(object sender, FrameEventArgs e) {
        var videoFrame = e.VideoFrame;
        var softwareBitmap = videoFrame.SoftwareBitmap;
    }
    private void CPTest_PreviewFailed(object sender, PreviewFailedEventArgs e) {
        var errorMessage = e.Error;
    }
}

Step 4

Enable the webcamera capability option in Package.appxmanifest.

 

Note - Automatically, the following code will be generated in XAML code View, while we are done in the design View.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPCameraPreview" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Custom="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPCameraPreview.MainPage" mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <TextBlock x:Name="TblTitle" HorizontalAlignment="Left" Margin="44,62,0,0" Text="CameraPreview control in UWP" TextWrapping="Wrap" VerticalAlignment="Top" Height="50" Width="368" FontWeight="Bold" FontSize="24" />
        <Custom:CameraPreview x:Name="CPTest" HorizontalAlignment="Left" Height="336" Margin="44,164,0,0" VerticalAlignment="Top" Width="414" /> </Grid>
</Page>

Step 5

Deploy your app on the Local Machine. The output of the UWPCameraPreview is shown below.

Giving the permission for web camera access,

 

The Preview 

 

Summary

Now, you have successfully tested CameraPreview control in XAML and UWP environment using Visual Studio 2017.