Series
Hello! In this article, we'll implement a camera preview feature in a UWP app. In the previous article, we set up the UWP app development environment and created a simple "Hello World!" app. Now it's time to start the first step towards using the camera to take photos in earnest.
This article explains how to use the UWP Media Capture API to output a camera preview to the screen.
1. Preparing to Use the Camera in UWP
To use a device like a camera in UWP, you must first set up permissions. You can set the camera permissions in the Package.appxmanifest file.
1) Setting camera permissions
1.
open the Package.appxmanifest file and go to the Functions tab.
2.
check the Permissions for the Webcam and Microphone. The microphone may be used together with the camera even if it does not have voice recording capability, so it is better to check them together.
After setting the permissions in this way, you will be able to access the camera with the UWP application.
2. Media Capture Initialization
You will need to use the MediaCapture object to output the camera preview. This object is responsible for capturing the camera image in UWP. The process of initializing the camera and connecting the captured video to the UI is as follows.
1) Configure the UI in XAML
First, open the file MainPage.xaml and add a control to output the camera preview.
<Page
x:Class="PhotoBooth.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhotoBooth"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<CaptureElement x:Name="CameraPreview" HorizontalAlignment="Center" VerticalAlignment="Center" Width="640" Height="480"/>
</Grid>
</Page>
XML
복사
In the code above, the **CaptureElement is responsible for outputting the **camera preview image. We concatenate a MediaCapture object to this control.
2) Initialize the MediaCapture object
Let's go to the MainPage.xaml.cs file and write the code to initialize the camera and set the preview.
using System;
using Windows.Media.Capture;
using Windows.UI.Xaml.Controls;
namespace PhotoBooth
{
public sealed partial class MainPage : Page
{
private MediaCapture _mediaCapture;
public MainPage()
{
this.InitializeComponent();
InitializeCameraAsync();
}
private async void InitializeCameraAsync()
{
_mediaCapture = new MediaCapture();
await _mediaCapture.InitializeAsync();
CameraPreview.Source = _mediaCapture;
await _mediaCapture.StartPreviewAsync();
}
}
}
C#
복사
This code initializes a MediaCapture object, which is responsible for outputting a preview of the camera's image in conjunction with a CaptureElement.
3) Camera termination process
When an app is terminated or paused, the camera resource must be released. Therefore, let's handle the app's lifecycle events. Add OnNavigatedFrom method to stop the preview when the app is terminated.
protected override async void OnNavigatedFrom(Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
await _mediaCapture.StopPreviewAsync();
_mediaCapture.Dispose();
_mediaCapture = null;
}
C#
복사
This will stop the preview when the app is closed and resources are safely released.
3. debugging and testing
Build and run your app. Once the app is running, you should see the video captured from the camera in real time appear on the screen.
Debugging Tips:
•
If the camera permissions are not set correctly, an error may occur while the app is running. If this is the case, please double check the camera permissions in the Package.appxmanifest file.
•
It is recommended to test on a real device, as the preview will not be displayed on a virtual machine or in an environment without a camera.
4. Summary
In this post, we looked at how to implement the camera preview functionality with MediaCapture in UWP. Now we can provide a preview screen that allows users to see the camera image in real time when they run the app.
In my next post, I will explain how to take a picture on the preview screen and add a timer feature. This feature will allow us to improve the user experience and create more interactive apps. Looking forward to it!
Next time:
Creating a UWP desktop app in C# 3/5: Taking a picture and adding a 5-second countdown function.
Read in other languages:
Support the Author:
If you enjoy my article, consider supporting me with a coffee!