UWP 디바이스 앱을 사용하여 카메라 옵션을 사용자 지정하는 방법
Windows 8.1에서 UWP 디바이스 앱을 사용하면 디바이스 제조업체가 일부 카메라 앱에서 더 많은 카메라 옵션을 표시하는 플라이아웃을 사용자 지정할 수 있습니다. 이 항목에서는 카메라CaptureUI API에 표시되는 기타 옵션 플라이아웃을 소개하고 카메라 샘플용 UWP 디바이스 앱의 C# 버전이 기본 플라이아웃을 사용자 지정 플라이아웃으로 대체하는 방법을 보여 줍니다. 일반적으로 UWP 디바이스 앱에 대한 자세한 내용은 UWP 디바이스 앱 모임을 참조 하세요.
참고 항목
Windows 8.1에서 기본 제공 카메라 앱은 추가 옵션 단추를 표시하지 않으므로 UWP 디바이스 앱을 표시하여 더 많은 카메라 옵션을 표시할 수 없습니다. 그러나 모든 UWP 앱에서 사용할 수 있는 카메라CaptureUI 클래스에는 추가 옵션 단추가 있으며 UWP 디바이스 앱을 표시할 수 있습니다.
카메라용 UWP 디바이스 앱의 C# 버전은 DeviceAppPage.xaml 페이지를 사용하여 더 많은 카메라 옵션을 위한 사용자 지정 플라이아웃의 UI를 보여 줍니다. 또한 이 샘플은 카메라 드라이버 MFT(미디어 파운데이션 변환)를 사용하여 카메라 효과를 적용합니다. 자세한 내용은 카메라 드라이버 MFT 만들기를 참조하세요.
참고 항목
이 항목에 표시된 코드 예제는 카메라 샘플용 UWP 디바이스 앱의 C# 버전을 기반으로 합니다. 이 샘플은 JavaScript 및 C++에서도 사용할 수 있습니다. 샘플을 다운로드하여 최신 버전의 코드를 확인합니다.
카메라에 대한 추가 옵션
카메라 옵션 환경이 많을수록 UWP 디바이스 앱이 다른 앱인 UWP 앱이 카메라CaptureUI API를 사용하여 카메라에서 비디오를 캡처하거나 미리 볼 때 제공하는 기능이 있습니다. 카메라 옵션 창의 추가 옵션 링크를 통해 액세스할 수 있습니다. 전체 화면은 아니지만 플라이아웃 내에 표시됩니다. 이 컨트롤은 사용자가 외부를 클릭하거나 탭할 때 해제되는 가볍고 상황에 맞는 사용자 인터페이스를 표시하기 위한 컨트롤입니다.
이 환경을 사용하여 사용자 지정 비디오 효과를 적용하는 기능과 같은 카메라의 차별화된 기능을 강조 표시할 수 있습니다.
UWP 디바이스 앱이 카메라에 대해 설치되지 않은 경우 Windows는 기본으로 더 많은 카메라 옵션 환경을 제공합니다. Windows에서 UWP 디바이스 앱이 카메라에 설치되어 있고 앱이 확장에 옵트인한 것을 windows.cameraSettings 감지하면 앱이 Windows에서 제공하는 기본 환경을 대체합니다.
더 많은 카메라 옵션에 대한 플라이아웃을 호출하려면 다음을 수행합니다.
카메라CaptureUI API(예: 카메라CaptureUI 샘플)를 사용하는 UWP 앱을 엽니다.
UI에서 옵션 단추를 탭합니다.
이렇게 하면 해상도 및 비디오 안정화 설정에 대한 기본 옵션을 보여 주는 카메라 옵션 플라이아웃이 열립니다.
카메라 옵션 플라이아웃에서 추가 옵션을 탭합니다.
기타 옵션 플라이아웃이 열립니다.
카메라에 대한 UWP 디바이스 앱이 설치되지 않은 경우 기본 플라이아웃이 나타납니다.
카메라용 UWP 디바이스 앱이 설치되면 사용자 지정 플라이아웃 이 나타납니다.
이 이미지는 사용자 지정 플라이아웃의 예 옆에 더 많은 카메라 옵션에 대한 기본 플라이아웃을 보여줍니다.
필수 조건
시작하기 전에 다음을 수행합니다.
개발 PC를 설정합니다. 도구 다운로드 및 개발자 계정 만들기에 대한 자세한 내용은 시작 정보를 참조하세요.
스토어와 앱을 연결합니다. 자세한 내용은 UWP 디바이스 앱 만들기를 참조하세요.
프린터를 앱과 연결하는 디바이스 메타데이터를 만듭니다. 자세한 내용은 디바이스 메타데이터 만들기를 참조하세요.
앱의 기본 페이지에 대한 UI를 빌드합니다. 모든 UWP 디바이스 앱은 시작에서 시작할 수 있으며 여기에서 전체 화면으로 표시됩니다. 시작 환경을 사용하여 디바이스의 특정 브랜딩 및 기능과 일치하는 방식으로 제품 또는 서비스를 강조 표시합니다. 사용할 수 있는 UI 컨트롤 유형에는 특별한 제한이 없습니다. 전체 화면 환경의 디자인을 시작하려면 Microsoft Store 디자인 원칙을 참조하세요.
1단계: 확장 등록
Windows에서 앱이 더 많은 카메라 옵션에 대한 사용자 지정 플라이아웃을 제공할 수 있음을 인식하려면 카메라 설정 확장을 등록해야 합니다. 이 확장은 요소에서 Extension 선언되며 특성은 Category 값 windows.cameraSettings으로 설정됩니다. C# 및 C++ 샘플 Executable 에서 특성이 설정 DeviceAppForWebcam.exe 되고 특성이 EntryPoint .로 DeviceAppForWebcam.App설정됩니다.
Microsoft Visual Studio에서 매니페스트 디자이너의 선언 탭에서 카메라 설정 확장을 추가할 수 있습니다. XML(텍스트) 편집기를 사용하여 앱 패키지 매니페스트 XML을 수동으로 편집할 수도 있습니다. 편집 옵션을 보려면 솔루션 탐색기 Package.appxmanifest 파일을 마우스 오른쪽 단추로 클릭합니다.
이 예제에서는 앱 패키지 매니페스트 파일 Package.appxmanifest에 표시되는 요소의 카메라 설정 확장을 Extension 보여 줍니다.
<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
<Identity Name="Microsoft.SDKSamples.DeviceAppForWebcam.CPP" Publisher="CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US" Version="1.0.0.0" />
<Properties>
<DisplayName>DeviceAppForWebcam CPP sample</DisplayName>
<PublisherDisplayName>Microsoft Corporation</PublisherDisplayName>
<Logo>Assets\storeLogo-sdk.png</Logo>
</Properties>
<Prerequisites>
<OSMinVersion>6.3.0</OSMinVersion>
<OSMaxVersionTested>6.3.0</OSMaxVersionTested>
</Prerequisites>
<Resources>
<Resource Language="x-generate" />
</Resources>
<Applications>
<Application Id="DeviceAppForWebcam.App" Executable="$targetnametoken$.exe" EntryPoint="DeviceAppForWebcam.App">
<VisualElements DisplayName="DeviceAppForWebcam CPP sample" Logo="Assets\squareTile-sdk.png" SmallLogo="Assets\smallTile-sdk.png" Description="DeviceAppForWebcam CPP sample" ForegroundText="light" BackgroundColor="#00b2f0">
<DefaultTile ShortName="DeviceApp CPP" ShowName="allLogos" />
<SplashScreen Image="Assets\splash-sdk.png" BackgroundColor="#00b2f0" />
</VisualElements>
<Extensions>
<Extension Category="windows.cameraSettings" Executable="DeviceAppForWebcam.exe" EntryPoint="DeviceAppForWebcam.App" />
</Extensions>
</Application>
</Applications>
</Package>
2단계: UI 빌드
앱을 빌드하기 전에 디자이너 및 마케팅 팀과 협력하여 사용자 환경을 디자인해야 합니다. 사용자 환경은 회사의 브랜딩 측면을 투영하고 사용자와의 연결을 구축하는 데 도움이 되어야 합니다.
디자인 지침
사용자 지정 플라이아웃을 디자인하기 전에 UWP 앱 플라이아웃 지침을 검토해야 합니다. 지침은 플라이아웃이 다른 UWP 앱과 일치하는 직관적인 환경을 제공하는 데 도움이 됩니다.
앱의 기본 페이지에서 Windows 8.1은 여러 앱을 단일 모니터에 다양한 크기로 표시할 수 있습니다. 화면 크기, 창 크기 및 방향 간에 앱이 정상적으로 재배치되는 방법에 대한 자세한 내용은 다음 지침을 참조하세요.
플라이아웃 차원
더 많은 카메라 옵션을 표시하는 플라이아웃은 높이가 625픽셀이고 너비가 340픽셀입니다. 위쪽에 기타 옵션 텍스트가 포함된 영역은 Windows에서 제공하며 높이가 약 65픽셀이므로 사용자 지정 플라이아웃의 볼 수 있는 영역에는 560픽셀이 남습니다. 사용자 지정 플라이아웃은 너비가 340픽셀을 초과하면 안 됩니다.
참고 항목
사용자 지정 플라이아웃 높이가 560픽셀을 초과하는 경우 사용자가 슬라이드하거나 스크롤하여 보기 가능한 영역 위 또는 아래에 있는 플라이아웃의 일부를 볼 수 있습니다.
제안된 효과
색 효과입니다. 예를 들어 회색조, 세피아 톤 또는 전체 그림의 태양 광화입니다.
얼굴 추적 효과. 그림에서 얼굴이 식별되고 모자나 안경 한 켤레와 같은 오버레이가 그 위에 추가됩니다.
장면 모드. 이러한 모드는 다양한 조명 조건에 대한 미리 설정된 노출 및 포커스 모드입니다.
권장 설정
UWP 디바이스 앱의 사용자 지정 플라이아웃은 제조업체에서 제공하는 색 수정 체계와 같은 하드웨어 구현 설정을 사용하도록 설정하는 스위치를 제공할 수 있습니다.
UWP 디바이스 앱에서 노출하는 다른 설정을 보완하는 기본 속성을 구현합니다. 예를 들어 많은 디바이스는 밝기, 대비, 깜박임, 포커스 및 노출을 조정하기 위한 컨트롤을 노출할 수 있지만 밝기 및 대비를 자동으로 조정하도록 TrueColor를 구현하는 디바이스는 이러한 설정을 제공할 필요가 없습니다.
제한
앱이 스트리밍 또는 캡처되지 않는 경우 기본 앱에서 UWP 디바이스 앱의 사용자 지정 플라이아웃을 열지 마세요(메서드를 호출
CameraOptionsUI.Show하여).미리 보기를 제공하거나 UWP 디바이스 앱의 사용자 지정 플라이아웃 내에서 비디오 스트림의 소유권을 사용하지 마세요. 사용자 지정 플라이아웃은 비디오를 캡처하는 다른 앱의 동반자 역할을 하기 위한 것입니다. 캡처 앱에는 비디오 스트림의 소유권이 있습니다. 하위 수준 API를 사용하여 비디오 스트림에 액세스하려고 하면 안 됩니다. 이로 인해 캡처 앱이 스트림에 대한 액세스 권한을 잃게 되는 예기치 않은 동작이 발생할 수 있습니다.
사용자 지정 플라이아웃에서 해상도를 조정하지 마세요.
사용자 지정 플라이아웃을 위한 영역 외부에 팝업, 알림 또는 대화 상자를 표시하지 마세요. 이러한 유형의 대화는 허용되지 않습니다.
사용자 지정 플라이아웃 내에서 오디오 또는 비디오 캡처를 시작하지 마세요. 사용자 지정 플라이아웃은 캡처 자체를 시작하는 대신 비디오를 캡처하는 다른 앱을 확장하기 위한 것입니다. 또한 오디오 또는 비디오를 캡처하면 시스템 대화 상자가 트리거될 수 있으며 사용자 지정 플라이아웃 내에서 팝업 대화는 허용되지 않습니다.
3단계: 활성화 처리
앱에서 카메라 설정 확장을 선언한 경우 앱 활성화 이벤트를 처리하는 메서드를 구현 OnActivated 해야 합니다. 이 이벤트는 UWP 앱이 카메라CaptureUI 클래스를 사용하여 카메라OptionsUI.Show 메서드를 호출할 때 트리거됩니다. 앱 활성화는 앱이 시작될 때 시작할 페이지를 선택할 수 있는 경우입니다. 카메라 설정 확장을 선언한 앱의 경우 Windows는 활성화된 이벤트 인수인 Windows.ApplicationModel.Activation.IActivatedEventArgs에서 비디오 디바이스를 전달합니다.
UWP 디바이스 앱은 이벤트 인수의 kind 속성이 Windows.ApplicationModel.Activation.ActivationKind.카메라일 때 활성화가 카메라 설정(다른 사용자가 카메라 옵션 대화 상자에서 추가 옵션을 탭한 경우)을 위한 것임을 확인할 수 있습니다.설정.
이 예제에서는 App.xaml.cs 파일에 나타나는 메서드의 OnActivated활성화 이벤트 처리기를 보여 줍니다. 그런 다음 이벤트 인수가 Windows.ApplicationModel.Activation으로 캐스팅됩니다. 카메라설정ActivatedEventArgs이며 사용자 지정 플라이아웃(DeviceAppPage.xaml.cs)의 메서드로 전송 Initialize 됩니다.
protected override void OnActivated(IActivatedEventArgs args)
{
if (args.Kind == ActivationKind.CameraSettings)
{
base.OnActivated(args);
DeviceAppPage page = new DeviceAppPage();
Window.Current.Content = page;
page.Initialize((CameraSettingsActivatedEventArgs)args);
Window.Current.Activate();
}
}
4단계: 설정 및 효과 제어
Initialize 사용자 지정 플라이아웃(DeviceAppPage.xaml.cs)의 메서드가 호출되면 비디오 디바이스가 이벤트 인수를 통해 플라이아웃에 전달됩니다. 이러한 인수는 카메라를 제어하기 위한 속성을 노출합니다.
인수입니다. VideoDeviceController 속성은 Windows.Media.Devices.VideoDeviceController 형식의 개체를 제공합니다. 이 개체는 표준 설정을 조정하는 메서드를 제공합니다.
인수입니다. VideoDeviceExtension 속성은 카메라 드라이버 MFT에 대한 포인터입니다. 드라이버 MFT 인터페이스가 노출되지 않으면 이 속성은 null이 됩니다. 카메라 드라이버 MFT에 대한 자세한 내용은 카메라 드라이버 MFT 만들기를 참조하세요.
이 예제에서는 DeviceAppPage.xaml.cs 파일에 나타나는 메서드의 Initialize 일부를 보여 줍니다. 여기서 비디오 디바이스 컨트롤러(videoDevController 개체) 및 카메라 드라이버 MFT(lcWrapper 개체)가 생성되고 플라이아웃이 현재 카메라 설정으로 채워집니다.
public void Initialize(CameraSettingsActivatedEventArgs args)
{
videoDevController = (VideoDeviceController)args.VideoDeviceController;
if (args.VideoDeviceExtension != null)
{
lcWrapper = new WinRTComponent();
lcWrapper.Initialize(args.VideoDeviceExtension);
}
bool bAuto = false;
double value = 0.0;
if (videoDevController.Brightness.Capabilities.Step != 0)
{
slBrt.Minimum = videoDevController.Brightness.Capabilities.Min;
slBrt.Maximum = videoDevController.Brightness.Capabilities.Max;
slBrt.StepFrequency = videoDevController.Brightness.Capabilities.Step;
videoDevController.Brightness.TryGetValue(out value);
slBrt.Value = value;
}
else
{
slBrt.IsEnabled = false;
}
if (videoDevController.Brightness.Capabilities.AutoModeSupported)
{
videoDevController.Brightness.TryGetAuto(out bAuto);
tsBrtAuto.IsOn = bAuto;
}
else
{
tsBrtAuto.IsOn = false;
tsBrtAuto.IsEnabled = false;
}
if (videoDevController.Contrast.Capabilities.Step != 0)
{
slCrt.Minimum = videoDevController.Contrast.Capabilities.Min;
slCrt.Maximum = videoDevController.Contrast.Capabilities.Max;
slCrt.StepFrequency = videoDevController.Contrast.Capabilities.Step;
videoDevController.Contrast.TryGetValue(out value);
slCrt.Value = value;
}
else
{
slCrt.IsEnabled = false;
}
// . . .
// . . .
// . . .
카메라 드라이버 MFT는 드라이버 MFT 샘플에 설명되어 있습니다. 카메라 드라이버 MFT에 대한 자세한 내용은 카메라 드라이버 MFT 만들기를 참조하세요.
5단계: 변경 내용 적용
플라이아웃에서 컨트롤을 변경하면 해당 컨트롤의 변경된 이벤트를 사용하여 비디오 디바이스 컨트롤러(videoDevController 개체) 및 카메라 드라이버 MFT(lcWrapper 개체)에 변경 내용을 적용합니다.
이 예제에서는 DeviceAppPage.xaml.cs 파일에 나타나는 비디오 디바이스 컨트롤러 및 카메라 드라이버 MFT에 변경 내용을 적용하는 변경된 메서드를 보여 줍니다.
protected void OnBrtAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Brightness.TrySetAuto(tsBrtAuto.IsOn);
slBrt.IsEnabled = !tsBrtAuto.IsOn;
}
protected void OnBrtSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Brightness.TrySetValue(slBrt.Value);
}
protected void OnCrtAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Contrast.TrySetAuto(tsCrtAuto.IsOn);
slCrt.IsEnabled = !tsCrtAuto.IsOn;
}
protected void OnCrtSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Contrast.TrySetValue(slCrt.Value);
}
protected void OnFocusAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Focus.TrySetAuto(tsFocusAuto.IsOn);
slFocus.IsEnabled = !tsFocusAuto.IsOn;
}
protected void OnFocusSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Focus.TrySetValue(slFocus.Value);
}
protected void OnExpAutoToggleChanged(object sender, RoutedEventArgs e)
{
videoDevController.Exposure.TrySetAuto(tsExpAuto.IsOn);
slExp.IsEnabled = !tsExpAuto.IsOn;
}
protected void OnExpSliderValueChanged(object sender, RoutedEventArgs e)
{
videoDevController.Exposure.TrySetValue(slExp.Value);
}
protected void OnEffectEnabledToggleChanged(object sender, RoutedEventArgs e)
{
if (tsEffectEnabled.IsOn)
{
lcWrapper.Enable();
}
else
{
lcWrapper.Disable();
}
slEffect.IsEnabled = tsEffectEnabled.IsOn;
}
protected void OnEffectSliderValueChanged(object sender, RoutedEventArgs e)
{
lcWrapper.UpdateDsp(Convert.ToInt32(slEffect.Value));
}
앱 테스트
이 섹션에서는 카메라 샘플용 UWP 디바이스 앱에 설명된 대로 카메라의 추가 옵션에 대한 사용자 지정 플라이아웃을 제공하는 UWP 디바이스 앱을 설치하는 방법을 설명합니다.
UWP 디바이스 앱을 테스트하려면 먼저 디바이스 메타데이터를 사용하여 카메라에 연결해야 합니다.
- 디바이스 앱 정보를 추가하려면 프린터에 대한 디바이스 메타데이터 패키지의 복사본이 필요합니다. 디바이스 메타데이터가 없는 경우 UWP 디바이스 앱에 대한 디바이스 메타데이터 만들기 항목에 설명된 대로 디바이스 메타데이터 작성 마법사를 사용하여 빌드할 수 있습니다.
참고 항목
디바이스 메타데이터 작성 마법사를 사용하려면 이 항목의 단계를 완료하기 전에 Microsoft Visual Studio Professional, Microsoft Visual Studio Ultimate 또는 Windows 8.1용 독립 실행형 SDK를 설치해야 합니다. Windows용 Microsoft Visual Studio Express를 설치하면 마법사를 포함하지 않는 SDK 버전이 설치됩니다.
다음 단계에서는 앱을 빌드하고 디바이스 메타데이터를 설치합니다.
테스트 서명을 사용하도록 설정합니다.
DeviceMetadataWizard.exe 두 번 클릭하여 %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86에서 디바이스 메타데이터 제작 마법사를 시작합니다.
도구 메뉴에서 테스트 서명 사용을 선택합니다.
컴퓨터를 다시 부팅
솔루션(.sln) 파일을 열어 솔루션을 빌드합니다. F7 키를 누르거나 샘플이 로드된 후 상단 메뉴에서 빌드> 솔루션으로 이동합니다.
프린터 연결을 끊고 제거합니다. 이 단계는 다음에 디바이스가 검색될 때 Windows에서 업데이트된 디바이스 메타데이터를 읽도록 하는 데 필요합니다.
디바이스 메타데이터를 편집하고 저장합니다. 디바이스 앱을 디바이스에 연결하려면 디바이스 앱을 디바이스와 연결해야 합니다.
참고 항목
디바이스 메타데이터를 아직 만들지 않은 경우 UWP 디바이스 앱에 대한 디바이스 메타데이터 만들기를 참조하세요.
디바이스 메타데이터 작성 마법사가 아직 열려 있지 않으면 DeviceMetadataWizard.exe 두 번 클릭하여 %ProgramFiles(x86)%\Windows Kits\8.1\bin\x86에서 시작합니다.
디바이스 메타데이터 편집을 클릭합니다. 이렇게 하면 기존 디바이스 메타데이터 패키지를 편집할 수 있습니다.
열기 대화 상자에서 UWP 디바이스 앱과 연결된 디바이스 메타데이터 패키지를 찾습니다. (devicemetadata-ms 파일 확장명입니다.)
UWP 디바이스 앱 정보 지정 페이지의 UWP 디바이스 앱 상자에 Microsoft Store 앱 정보를 입력합니다. UWP 앱 매니페스트 파일 가져오기를 클릭하여 패키지 이름, 게시자 이름 및 UWP 앱 ID를 자동으로 입력합니다.
완료되면 마침 페이지에 도착할 때까지 다음을 클릭합니다.
디바이스 메타데이터 패키지 검토 페이지에서 모든 설정이 올바른지 확인하고 로컬 컴퓨터 검사 상자의 메타데이터 저장소에 디바이스 메타데이터 패키지 복사를 선택합니다. 그런 다음 Save를 클릭합니다.
디바이스가 연결될 때 Windows에서 업데이트된 디바이스 메타데이터를 읽도록 디바이스를 다시 연결합니다.
외부 카메라가 있는 경우 카메라를 연결하기만 하면 됩니다.
내부 카메라가 있는 경우 디바이스 및 프린터 폴더에서 PC를 새로 고칩니다. 장치 관리자 사용하여 하드웨어 변경 내용을 검색합니다. 디바이스가 검색되면 Windows에서 업데이트된 메타데이터를 읽어야 합니다.
참고 항목
카메라 드라이버 MFT 설치에 대한 자세한 내용은 카메라 드라이버 MFT 만들기의 테스트 섹션을 참조하세요.
샘플 테스트
카메라 옵션 환경을 테스트하려면 먼저 다음 샘플을 다운로드합니다.
그런 다음 드라이버 MFT 샘플 페이지에 제공된 샘플 테스트 지침을 따릅니다.
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기