시리즈
안녕하세요! 이번 포스트에서는 UWP 앱에서 카메라 프리뷰 기능을 구현해보겠습니다. 지난 글에서는 UWP 앱 개발 환경을 설정하고 간단한 "Hello World!" 앱을 만들어보았습니다. 이제 본격적으로 카메라를 사용하여 사진을 찍기 위한 첫 단계를 시작할 차례입니다.
이번 글에서는 UWP에서 미디어 캡처 API를 사용하여 카메라 프리뷰를 화면에 출력하는 방법을 배워볼 것입니다.
1. UWP에서 카메라 사용 준비
UWP에서 카메라와 같은 장치를 사용하기 위해서는 먼저 권한을 설정해야 합니다. Package.appxmanifest 파일에서 카메라 사용 권한을 설정할 수 있습니다.
1) 카메라 권한 설정
1.
Package.appxmanifest 파일을 열고 기능 탭으로 이동합니다.
2.
웹캠과 마이크 권한을 체크합니다. 마이크는 음성 녹음 기능이 없더라도 카메라와 함께 사용되는 경우가 있으니 함께 체크해두는 것이 좋습니다.
이렇게 권한을 설정한 후, 이제 UWP 앱에서 카메라에 접근할 수 있게 됩니다.
2. 미디어 캡처 초기화
카메라 프리뷰를 출력하기 위해서는 MediaCapture 객체를 사용해야 합니다. 이 객체는 UWP에서 카메라 영상을 캡처하는 역할을 담당합니다. 카메라를 초기화하고, 캡처한 영상을 UI에 연결하는 과정은 다음과 같습니다.
1) XAML로 UI 구성
먼저, MainPage.xaml 파일을 열고 카메라 프리뷰를 출력할 컨트롤을 추가합니다.
<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
복사
위 코드에서 CaptureElement는 카메라 프리뷰 영상을 출력하는 역할을 합니다. 이 컨트롤에 미디어 캡처 객체를 연결할 것입니다.
2) MediaCapture 객체 초기화
이제 MainPage.xaml.cs 파일로 이동하여 카메라를 초기화하고 프리뷰를 설정하는 코드를 작성하겠습니다.
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#
복사
이 코드는 MediaCapture 객체를 초기화하고, CaptureElement와 연결하여 카메라의 영상을 프리뷰로 출력하는 역할을 합니다.
3) 카메라 종료 처리
앱이 종료되거나 일시 중지될 때는 카메라 자원을 해제해야 합니다. 이를 위해 앱의 라이프사이클 이벤트를 처리해 보겠습니다. OnNavigatedFrom 메서드를 추가하여 앱이 종료될 때 프리뷰를 중지하도록 설정합니다.
protected override async void OnNavigatedFrom(Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
await _mediaCapture.StopPreviewAsync();
_mediaCapture.Dispose();
_mediaCapture = null;
}
C#
복사
이제 앱이 종료될 때 프리뷰가 중지되며, 리소스가 안전하게 해제됩니다.
3. 디버그 및 테스트
이제 앱을 빌드하고 실행해보세요. 앱이 실행되면 카메라에서 실시간으로 캡처된 영상이 화면에 표시되는 것을 확인할 수 있을 것입니다.
디버깅 팁:
•
카메라 권한이 제대로 설정되지 않았을 경우, 앱이 실행 중에 오류가 발생할 수 있습니다. 이럴 때는 Package.appxmanifest 파일의 카메라 권한을 다시 확인해 주세요.
•
가상 머신이나 카메라가 없는 환경에서는 프리뷰가 표시되지 않으니 실제 장치에서 테스트해보는 것이 좋습니다.
4. 마무리
이번 포스트에서는 UWP에서 MediaCapture를 이용해 카메라 프리뷰 기능을 구현하는 방법을 배웠습니다. 이제 사용자가 앱을 실행했을 때 카메라 영상을 실시간으로 확인할 수 있는 프리뷰 화면을 제공할 수 있습니다.
다음 포스트에서는 프리뷰 화면에서 사진을 촬영하고, 타이머 기능을 추가하는 방법을 다룰 예정입니다. 이 기능을 통해 사용자 경험을 개선하고 좀 더 인터랙티브한 앱을 만들 수 있을 것입니다. 기대해 주세요!
다음 회차 예고:
C#으로 UWP 데스크톱 앱 만들기 3/5: 사진 촬영 및 5초 카운트다운 기능 추가
다른 언어로 읽기:
작가 후원하기:
제 기사가 마음에 드셨다면, 커피 한 잔으로 응원해 주세요!