코딩하는 핑구

일반적으로 올리는 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 파일을 더블클릭하여 수정을 해주면된다

상단의 기능탭을 클릭하여 웹캠, 마이크를 체크해준 다음 프로그램 빌드/디버그를 진행해서 테스트하면 된다.

실행 시 카메라 아이콘을 입혀둔 버튼을 확인할 수 있다

아담한 저 버튼을 클릭하면 연결한 웹캠의 화면이 이제 나타난다

버튼 클릭 후 액세스 허용을 해준다면 말이지

액세스 허용 시 나타나는 화면

불러온 카메라 리소스를 이동시켜줌

+연결된 카메라를 확인 후 카메라 연결이 없을 때 나타나는 팝업 창

앞에서 허용해준 앱 액세스 값 변경하는 법

윈도우의 기본 설정값을 변경해주면 된다

과정은 다음과 같으니 액세스 허용 후에 관한 변경사항이 필요할 경우, 참고하길 바람

참고사이트

docs.microsoft.com/ko-kr/windows/uwp/audio-video-camera/basic-photo-video-and-audio-capture-with-mediacapture

일반적으로 올리는 UWP 소스는 C#, XAML 을 기준으로 합니다.

잘못된 부분이 있거나 궁금하신게 있으면 댓글 달아주세요

기존 올린 예제에 불러온 동영상 파일의 위치 이동 및 크기 조절이 가능한 기능을 덧붙인 예제입니다.

이때, 크기조절은 터치가 가능한 터치 모니터, 스크린에서만 가능합니다

CS

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media; //UI 이동

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다.

namespace testing
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //동영상 on,off 변수
        int Mov_open_switch = 0;

        //동영상 이동
        private TranslateTransform dragTranslation_M;

        

        public MainPage()
        {
            this.InitializeComponent();

            //동영상 이동
            dragTranslation_M = new TranslateTransform();
            MediaPlayerPopup.ManipulationDelta += MediaPlayerPopup_ManipulationDelta;
            MediaPlayerPopup.RenderTransform = this.dragTranslation_M;

            //동영상 트랙바
            MOV.AreTransportControlsEnabled = false;

        }


        private async void Media_open_Click(object sender, RoutedEventArgs e)
        {
            if (Mov_open_switch == 0)
            {
                var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

                openPicker.FileTypeFilter.Add(".wmv");
                openPicker.FileTypeFilter.Add(".mp4");
                openPicker.FileTypeFilter.Add(".wma");
                openPicker.FileTypeFilter.Add(".mp3");
                openPicker.FileTypeFilter.Add(".avi");


                var file = await openPicker.PickSingleFileAsync();

                // mediaPlayer is M_right MediaElement defined in XAML
                if (file != null)
                {
                    if (!MediaPlayerPopup.IsOpen) { MediaPlayerPopup.IsOpen = true; }
                    var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
                    MOV.SetSource(stream, file.ContentType);
                    MOV.AreTransportControlsEnabled = true;
                    MOV.TransportControls.IsZoomButtonVisible = true;
                    MOV.TransportControls.IsZoomEnabled = true;

                    MOV_C.Visibility = Visibility.Visible;
                    Mov_open_switch = 1;
                    MOV.Play();
                }
                else
                {
                    this.textBlock.Text = "Operation cancelled.";
                    Mov_open_switch = 0;
                    return;

                }

            }
            //동영상 닫기
            else
            {
                Mov_open_switch = 0;
                if (MediaPlayerPopup.IsOpen) { MediaPlayerPopup.IsOpen = false; }
                dragTranslation_M.X = 0;
                dragTranslation_M.Y = 0;
            }
        }

        // 동영상 닫기
        private void MOV_C_Click(object sender, RoutedEventArgs e)
        {
            if (MediaPlayerPopup.IsOpen) { MediaPlayerPopup.IsOpen = false; }
            Mov_open_switch = 0;
            dragTranslation_M.X = 0;
            dragTranslation_M.Y = 0;
        }
        
        private void OnMEFullWindowChanged(DependencyObject sender, DependencyProperty dp)
        {
            MediaElement me = (MediaElement)sender;

            if (me != null && dp == MediaElement.IsFullWindowProperty)
            {
                if (me.IsFullWindow == true)
                {
                    MediaPlayerPopup.Visibility = Visibility.Collapsed;
                }
                else
                {
                    MediaPlayerPopup.Visibility = Visibility.Visible;
                }
            }
        }


        

        //동영상 크기조절
        private void MOV_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            MediaPlayerPopup.Width = Window.Current.Bounds.Width;
            MediaPlayerPopup.Height = Window.Current.Bounds.Height;
        }

        private void MediaPlayerPopup_ManipulationDelta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e)
        {
            dragTranslation_M.X += e.Delta.Translation.X;
            dragTranslation_M.Y += e.Delta.Translation.Y;
            //동영상 크기조절
            ScaleTransformm.ScaleX *= e.Delta.Scale;
            ScaleTransformm.ScaleY *= e.Delta.Scale;
        }
    }
}

XAML

<Page
    x:Class="testing.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:testing"
    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="openMedia" Click="Media_open_Click">동영상 불러오기</Button>
        <TextBlock Width="1" Height="1" VerticalAlignment="Top" HorizontalAlignment="Right" x:Name="textBlock" ></TextBlock>
        <!--동영상-->
        <Popup x:Name="MediaPlayerPopup" VerticalAlignment="Top" HorizontalAlignment="Left" Canvas.ZIndex="5"  Width="720" Height="405"  ManipulationMode="All" >
            <!--VerticalAlignment="Bottom" HorizontalAlignment="Center"-->
            <Grid >
                <Grid ManipulationDelta="MediaPlayerPopup_ManipulationDelta" ManipulationMode="Scale">
                    <MediaElement x:Name="MOV" SizeChanged="MOV_SizeChanged" AreTransportControlsEnabled="True" Height="405" Width="720" ManipulationMode="All" >                        
                        <MediaElement.RenderTransform>
                            <ScaleTransform x:Name="ScaleTransformm" ScaleX="1.0" ScaleY="1.0"/>
                        </MediaElement.RenderTransform>
                    </MediaElement>
                </Grid>
                <!--동영상 닫기-->
                <Button x:Name="MOV_C" Background="White" Click="MOV_C_Click" VerticalAlignment="Top" HorizontalAlignment="Left" >
                    <SymbolIcon Symbol="Cancel"/>
                </Button>
            </Grid>
        </Popup>
    </Grid>
</Page>

ScaleX, ScaleY의 값에 1.0, 1.5 등을 넣음으로써 크기 조절 시 가로, 세로 증감하는 길이에 대한 비율을 정할 수 있다

위의 코드 실행 이미지

참고 사이트

docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.scaletransform?view=winrt-19041