일반적으로 올리는 UWP 소스는 C#, XAML 을 기준으로 합니다.
잘못된 부분이 있거나 궁금하신게 있으면 댓글 달아주세요
오늘은 UWP로 windows10 OS를 사용하는 PC, 노트북에 연결된 웹 카메라의 화면을 불러오는 방법과
추가적으로 불러온 웹 캠 화면의 이동과 크기조절을 할 수 있는 예제를 올려본다
웹카메라를 불러올 때, 종료할 때 각각 Loading, Closing 텍스트 문구를 추가해서 진행 상태를 표기했다.
캠화면 크기 조절 시의 비율은 ScaleX, ScaleY를 각각 1.0으로 주어 가로, 세로 동시에 1:1 비율로 늘어나게 함
캠 화면을 불러올 때 Captureelement의 stretch속성을 fill로 주어서 개체에 꽉찬 화면으로 보이게했다
+캠 이동 중 화면 밖으로 나간 경우, 화면 테두리에 쿠션을 주어 막는 방법 대신
캠화면을 다시 불러왔을 때 고정 좌표에 카메라 화면을 띄우도록했다.
코드 보기 앞서
UI 조작 관련 내용이 낯선 사람들은 내가 이해한 대로 간략하게 적어봤으니 참고하길 바람
개체에 대한 이동, 크기조절, 회전 등의 조작을 가능하게 하는 것 - ManipulationDelta
개체에 대한 크기 조절 - RenderTransform
cs 코드
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Popups; // 팝업 메세지
using Windows.Media.Capture; //카메라 화면
using Windows.UI.Xaml.Media; //카메라 화면 UI 이동
using Windows.UI.Xaml.Input; //카메라 화면 UI 이동, 조작 시
// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다.
namespace test
{
/// <summary>
/// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
/// </summary>
public sealed partial class MainPage : Page
{
int Cam_switch = 0;
MediaCapture _mediaCapture = new MediaCapture();
private TranslateTransform dragTranslation;
public MainPage()
{
this.InitializeComponent();
Cam_grid.Visibility = Visibility.Collapsed;
dragTranslation = new TranslateTransform();
Cam_grid.ManipulationDelta += Cam_grid_ManipulationDelta;
Cam_grid.RenderTransform = this.dragTranslation;
}
async private void Webcam_Click(object sender, RoutedEventArgs e)
{
if (Cam_switch == 0)
{
var devices = await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync(Windows.Devices.Enumeration.DeviceClass.VideoCapture);
if (devices.Count < 1)
{
var msg_cam = new MessageDialog("연결된 카메라가 없습니다");
await msg_cam.ShowAsync();
return;
}
else
{
_mediaCapture = new MediaCapture();
try
{
dragTranslation.X = 5;
dragTranslation.Y = 5;
Cam_close.Visibility = Visibility.Collapsed;
Cam_grid.Visibility = Visibility.Visible;
Cam_load.Visibility = Visibility.Visible;
await _mediaCapture.InitializeAsync();
PreviewControl.Source = _mediaCapture;
await _mediaCapture.StartPreviewAsync();
Cam_switch = 1;
Cam_load.Visibility = Visibility.Collapsed;
}
catch (System.Exception)
{
}
}
}
else
{
dragTranslation.X = 5;
dragTranslation.Y = 5;
Cam_close.Visibility = Visibility.Visible;
PreviewControl.Source = null;
await _mediaCapture.StopPreviewAsync();
Cam_grid.Visibility = Visibility.Collapsed;
Cam_switch = 0;
Cam_scale.ScaleX = 1;
Cam_scale.ScaleY = 1;
Cam_bd_scale.ScaleX = 1;
Cam_bd_scale.ScaleY = 1;
}
}
private void Cam_grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
dragTranslation.X += e.Delta.Translation.X;
dragTranslation.Y += e.Delta.Translation.Y;
Cam_scale.ScaleX *= e.Delta.Scale;
Cam_scale.ScaleY *= e.Delta.Scale;
Cam_bd_scale.ScaleX *= e.Delta.Scale;
Cam_bd_scale.ScaleY *= e.Delta.Scale;
}
}
}
웹 캠 화면을 닫고나서 PreviewControl.Source (=리소스)를 null로 줌
xaml 코드
<Page
x:Class="test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test"
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>
<Button x:Name="Webcam" Click="Webcam_Click">
<SymbolIcon Symbol="Camera"></SymbolIcon>
</Button>
<Grid Name="Cam_grid" Margin="0,49,0,0" CanDrag="False" Canvas.ZIndex="11" VerticalAlignment="Top" ManipulationMode="All" Width="420" Height="350" HorizontalAlignment="Left" >
<TextBox Name="Cam_load" Text="Loading..."/>
<CaptureElement Name="PreviewControl" CanDrag="False" Stretch="Fill" ManipulationMode="All" >
<CaptureElement.RenderTransform>
<ScaleTransform x:Name="Cam_scale" ScaleX="1.0" ScaleY="1.0" />
</CaptureElement.RenderTransform>
</CaptureElement>
<Border BorderBrush="SkyBlue" BorderThickness="2" >
<Border.RenderTransform>
<ScaleTransform x:Name="Cam_bd_scale" ScaleX="1.0" ScaleY="1.0" />
</Border.RenderTransform>
</Border>
<TextBox Name="Cam_close" Text="Closing..." />
</Grid>
</Grid>
</Page>
예시 사진
먼저 카메라에 접근하기 위해서는 어플리케이션을 다운받고 연락처나 카메라 접근 허가해주듯 허가 요청에 대한
명시가 따로 필요한데 이것을 manifest라고 부름
따라서 UWP 또한 접근할 기능에 대한 앱 매니페스토 허용이 필요하여 우측의 솔루션 탐색기에서
Package.appxmanifest 파일을 더블클릭하여 수정을 해주면된다
상단의 기능탭을 클릭하여 웹캠, 마이크를 체크해준 다음 프로그램 빌드/디버그를 진행해서 테스트하면 된다.
실행 시 카메라 아이콘을 입혀둔 버튼을 확인할 수 있다
아담한 저 버튼을 클릭하면 연결한 웹캠의 화면이 이제 나타난다
버튼 클릭 후 액세스 허용을 해준다면 말이지
액세스 허용 시 나타나는 화면
불러온 카메라 리소스를 이동시켜줌
+연결된 카메라를 확인 후 카메라 연결이 없을 때 나타나는 팝업 창
앞에서 허용해준 앱 액세스 값 변경하는 법
윈도우의 기본 설정값을 변경해주면 된다
과정은 다음과 같으니 액세스 허용 후에 관한 변경사항이 필요할 경우, 참고하길 바람
참고사이트
MediaCapture를 사용하여 기본적인 사진, 비디오 및 오디오 캡처 - UWP applications
이 문서에서는 MediaCapture 클래스를 사용 하 여 사진과 비디오를 캡처하는 가장 간단한 방법을 보여 줍니다.
docs.microsoft.com
'UWP' 카테고리의 다른 글
| [UWP] 유니버셜 Windows 플랫폼 프로젝트 시작하기 (0) | 2020.12.09 |
|---|---|
| [UWP] 내 PC에서 로컬 이미지 가져오는법 (0) | 2020.12.08 |
| [UWP] 응용프로그램에서 웹 페이지 사용하기 (0) | 2020.11.30 |
| [UWP] 로컬에서 불러온 동영상 이동, 크기 조절하기 (0) | 2020.11.17 |
| [UWP] 미디어 플레이어 사용해서 로컬 동영상 파일 불러오기 (0) | 2020.11.16 |
