CameraView

카메라에 CameraView 연결하고, 카메라에서 미리 보기를 표시하고, 사진을 찍을 수 있는 기능을 제공합니다. CameraView 또한 사진 촬영, 플래시 제어, 캡처된 미디어를 파일에 저장 및 이벤트에 대한 다양한 후크를 제공하는 기능을 제공합니다.

다음 섹션에서는 .NET MAUI 애플리케이션에서 사용하는 CameraView 방법을 증분 방식으로 작성합니다. 그들은 의 사용에 의존 .CameraViewModel 는 예제CameraViewPage의 BindingContext로 설정됩니다.

플랫폼별 초기화

Nuget CameraView 패키지의 CommunityToolkit.Maui.Camera 일부입니다. 먼저 사용 CameraView 하려면 시작 섹션을 참조하세요. 다음 플랫폼별 설정이 필요합니다.

Android

파일에 다음 권한을 추가 Platforms/Android/AndroidManifest.xml 해야 합니다.

<uses-permission android:name="android.permission.CAMERA" />

요소 내에 <manifest> 추가해야 합니다. 다음은 보다 완전한 예제를 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true" />

    <uses-permission android:name="android.permission.CAMERA" />

</manifest>

iOS

다음 항목을 파일에 추가 Platforms/iOS/Info.plist 해야 합니다.

<key>NSCameraUsageDescription</key>
<string>PROVIDE YOUR REASON HERE</string>

요소 내에 <dict> 추가해야 합니다. 다음은 보다 완전한 예제를 보여줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>UIDeviceFamily</key>
    <array>
        <integer>1</integer>
        <integer>2</integer>
    </array>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>arm64</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>XSAppIconAssets</key>
    <string>Assets.xcassets/appicon.appiconset</string>

    <key>NSCameraUsageDescription</key>
    <string>PROVIDE YOUR REASON HERE</string>
</dict>
</plist>

Mac Catalyst

다음 항목을 파일에 추가 Platforms/MacCatalyst/Info.plist 해야 합니다.

<key>NSCameraUsageDescription</key>
<string>PROVIDE YOUR REASON HERE</string>

요소 내에 <dict> 추가해야 합니다. 다음은 보다 완전한 예제를 보여줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>UIDeviceFamily</key>
    <array>
        <integer>1</integer>
        <integer>2</integer>
    </array>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>arm64</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>XSAppIconAssets</key>
    <string>Assets.xcassets/appicon.appiconset</string>

    <key>NSCameraUsageDescription</key>
    <string>PROVIDE YOUR REASON HERE</string>
</dict>
</plist>

Windows

설정은 필요하지 않습니다.

Tizen

Tizen은 현재 지원되지 않습니다.

기본 사용법

다음과 CameraView 같은 방법으로 .NET MAUI 애플리케이션에 추가할 수 있습니다.

XAML 네임스페이스 포함

XAML에서 도구 키트를 사용하려면 페이지 또는 보기에 다음 xmlns 을 추가해야 합니다.

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

따라서 다음을 수행합니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

다음과 같이 포함 xmlns 하도록 수정됩니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30">
        <toolkit:CameraView 
            Grid.ColumnSpan="3" 
            Grid.Row="0" />
    </Grid>

</ContentPage>

그 결과 디바이스에 연결된 기본 카메라의 출력을 렌더링하는 표면이 생성됩니다.

현재 카메라 액세스

이 속성은 SelectedCamera 현재 선택한 카메라에 액세스할 수 있는 기능을 제공합니다.

다음 예제에서는 동일한 이름 (SelectedCamera)의 속성에서 속성을 바인딩 SelectedCamera CameraView 하는 CameraViewModel 방법을 보여 줍니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
        <toolkit:CameraView 
            Grid.ColumnSpan="3" 
            Grid.Row="0" 
            SelectedCamera="{Binding SelectedCamera}" />
    </Grid>

</ContentPage>

컨트롤 확대/축소

이 속성은 SelectedCamera a MinimumZoomFactor 와 속성을 모두 제공하며 MaximumZoomFactor 읽기 전용이며 개발자에게 현재 카메라에 적용할 수 있는 확대/축소를 결정하는 프로그래밍 방식의 방법을 제공합니다. 현재 카메라 CameraView 의 확대/축소를 변경하기 위해 속성을 제공합니다 ZoomFactor .

참고 항목

값이 외부 MinimumZoomFactor MaximumZoomFactor 에 제공되고 값이 CameraView 범위 내에 유지되도록 클램프합니다.

다음 예제에서는 애플리케이션에 추가하고 Slider 다음 바인딩을 설정하는 방법을 보여 줍니다.

• 속성의 Maximum Slider MaximumZoomFactor 속성을 바인딩합니다 SelectedCamera .
• 속성의 Minimum Slider MinimumZoomFactor 속성을 바인딩합니다 SelectedCamera .
• 클래스의 Value 속성에 Slider CurrentZoom 속성을 바인딩합니다 CameraViewModel .

마지막 변경에는 클래스의 속성에 CameraView 대한 속성을 바인딩 ZoomFactor 하는 CameraViewModel 작업이 CurrentZoom 포함됩니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
        <toolkit:CameraView 
            Grid.ColumnSpan="3" 
            Grid.Row="0"
            SelectedCamera="{Binding SelectedCamera}"
            ZoomFactor="{Binding CurrentZoom}" />

        <Slider 
            Grid.Column="0"
            Grid.Row="1"
            Value="{Binding CurrentZoom}"
            Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
            Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>
    </Grid>

</ContentPage>

카메라 플래시 모드

디바이스 CameraView 에서 플래시 모드를 프로그래밍 방식으로 변경하는 기능을 제공합니다. 가능한 옵션은 다음과 같습니다.

• Off - 플래시가 꺼져 있으며 사용되지 않습니다 .
• On - 플래시가 켜지고 항상 사용됩니다.
• Auto - 플래시는 조명 조건에 따라 자동으로 사용됩니다.

또한 이 속성은 SelectedCamera 현재 선택한 카메라에 제어할 수 있는 플래시가 있는지 여부를 확인할 수 있는 기능을 제공합니다 IsFlashSupported .

다음 예제에서는 애플리케이션에 추가하고 Picker 다음 바인딩을 설정하는 방법을 보여 줍니다.

• 속성의 IsVisible Picker IsFlashSupported 속성을 바인딩합니다 SelectedCamera .
• ItemsSource 열거형의 Picker FlashModes 가능한 값에 대한 간단한 목록인 클래스의 속성에 CameraViewModel CameraFlashMode 속성을 바인딩합니다.
• 클래스의 SelectedItem 속성에 Picker FlashMode 속성을 바인딩합니다 CameraViewModel .

마지막 변경에는 클래스의 속성에 CameraView 대한 속성을 바인딩 CameraFlashMode 하는 CameraViewModel 작업이 FlashMode 포함됩니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
        <toolkit:CameraView 
            Grid.ColumnSpan="3" 
            Grid.Row="0"
            SelectedCamera="{Binding SelectedCamera}"
            ZoomFactor="{Binding CurrentZoom}"
            CameraFlashMode="{Binding FlashMode}" />

        <Slider 
            Grid.Column="0"
            Grid.Row="1"
            Value="{Binding CurrentZoom}"
            Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
            Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>

        <Picker 
            Grid.Column="1"
            Grid.Row="1"
            Title="Flash"
            IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
            ItemsSource="{Binding FlashModes}"
            SelectedItem="{Binding FlashMode}" />
    </Grid>

</ContentPage>

ImageCaptureResolution

현재 CameraView 카메라에서 캡처한 이미지의 해상도를 프로그래밍 방식으로 변경하는 기능을 제공합니다.

참고 항목

이렇게 하면 미리 보기에 표시된 해상도가 카메라에서 변경되지 않습니다.

또한 이 속성은 SelectedCamera 현재 카메라가 지원하는 해상도를 확인할 수 있는 기능을 제공합니다 SupportedResolutions .

다음 예제에서는 애플리케이션에 추가하고 Picker 다음 바인딩을 설정하는 방법을 보여 줍니다.

• 속성의 ItemsSource Picker SupportedResolutions 속성을 바인딩합니다 SelectedCamera .
• 클래스의 SelectedItem 속성에 Picker SelectedResolution 속성을 바인딩합니다 CameraViewModel .

마지막 변경에는 클래스의 속성에 CameraView 대한 속성을 바인딩 ImageCaptureResolution 하는 CameraViewModel 작업이 SelectedResolution 포함됩니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
        <toolkit:CameraView 
            Grid.ColumnSpan="3" 
            Grid.Row="0"
            SelectedCamera="{Binding SelectedCamera}"
            ZoomFactor="{Binding CurrentZoom}"
            CameraFlashMode="{Binding FlashMode}" />

        <Slider 
            Grid.Column="0"
            Grid.Row="1"
            Value="{Binding CurrentZoom}"
            Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
            Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>

        <Picker 
            Grid.Column="1"
            Grid.Row="1"
            Title="Flash"
            IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
            ItemsSource="{Binding FlashModes}"
            SelectedItem="{Binding FlashMode}" />

        <Picker 
            Grid.Column="2"
            Grid.Row="1"
            Title="Available Resolutions"
            ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
            SelectedItem="{Binding SelectedResolution}" />
    </Grid>

</ContentPage>

CaptureImage

프로그래밍 CameraView 방식으로 이미지 캡처를 트리거하는 기능을 제공합니다. 이 작업은 CaptureImage 메서드 또는 CaptureImageCommand.

다음 예제에서는 애플리케이션에 추가하고 Button 다음 바인딩을 설정하는 방법을 보여 줍니다.

• 의 Command 속성에 Button CaptureImageCommand CameraView속성을 바인딩합니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
        <toolkit:CameraView
            x:Name="Camera" 
            Grid.ColumnSpan="3" 
            Grid.Row="0"
            SelectedCamera="{Binding SelectedCamera}"
            ZoomFactor="{Binding CurrentZoom}"
            CameraFlashMode="{Binding FlashMode}" />

        <Slider 
            Grid.Column="0"
            Grid.Row="1"
            Value="{Binding CurrentZoom}"
            Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
            Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>

        <Picker 
            Grid.Column="1"
            Grid.Row="1"
            Title="Flash"
            IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
            ItemsSource="{Binding FlashModes}"
            SelectedItem="{Binding FlashMode}" />

        <Picker 
            Grid.Column="2"
            Grid.Row="1"
            Title="Available Resolutions"
            ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
            SelectedItem="{Binding SelectedResolution}" />

        <Button
            Grid.Column="0"
            Grid.Row="2"
            Command="{Binding CaptureImageCommand, Source={x:Reference Camera}}"
            Text="Capture Image" />
    </Grid>

</ContentPage>

참고 항목

캡처된 CameraView 이미지를 사용하기 위해 이벤트를 제공합니다 MediaCaptured .

미리 보기 시작

카메라 CameraView 에서 미리 보기를 프로그래밍 방식으로 시작하는 기능을 제공합니다. 이 작업은 StartCameraPreview 메서드 또는 StartCameraPreviewCommand.

다음 예제에서는 애플리케이션에 추가하고 Button 다음 바인딩을 설정하는 방법을 보여 줍니다.

• 의 Command 속성에 Button StartCameraPreviewCommand CameraView속성을 바인딩합니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
        <toolkit:CameraView
            x:Name="Camera"  
            Grid.ColumnSpan="3" 
            Grid.Row="0"
            SelectedCamera="{Binding SelectedCamera}"
            ZoomFactor="{Binding CurrentZoom}"
            CameraFlashMode="{Binding FlashMode}" />

        <Slider 
            Grid.Column="0"
            Grid.Row="1"
            Value="{Binding CurrentZoom}"
            Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
            Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>

        <Picker 
            Grid.Column="1"
            Grid.Row="1"
            Title="Flash"
            IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
            ItemsSource="{Binding FlashModes}"
            SelectedItem="{Binding FlashMode}" />

        <Picker 
            Grid.Column="2"
            Grid.Row="1"
            Title="Available Resolutions"
            ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
            SelectedItem="{Binding SelectedResolution}" />

        <Button
            Grid.Column="0"
            Grid.Row="2"
            Command="{Binding CaptureImageCommand, Source={x:Reference Camera}}"
            Text="Capture Image" />

        <Button
            Grid.Column="1"
            Grid.Row="2"
            Command="{Binding StartCameraPreviewCommand, Source={x:Reference Camera}}"
            Text="Capture Image" />
    </Grid>

</ContentPage>

미리 보기 중지

카메라 CameraView 에서 미리 보기를 프로그래밍 방식으로 중지하는 기능을 제공합니다. 이 작업은 StopCameraPreview 메서드 또는 StopCameraPreviewCommand.

다음 예제에서는 애플리케이션에 추가하고 Button 다음 바인딩을 설정하는 방법을 보여 줍니다.

• 의 Command 속성에 Button StopCameraPreviewCommand CameraView속성을 바인딩합니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.CameraViewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    
    <Grid ColumnDefinitions="*,*,*" RowDefinitions="*,30,30">
        <toolkit:CameraView
            x:Name="Camera"  
            Grid.ColumnSpan="3" 
            Grid.Row="0"
            SelectedCamera="{Binding SelectedCamera}"
            ZoomFactor="{Binding CurrentZoom}"
            CameraFlashMode="{Binding FlashMode}" />

        <Slider 
            Grid.Column="0"
            Grid.Row="1"
            Value="{Binding CurrentZoom}"
            Maximum="{Binding SelectedCamera.MaximumZoomFactor, FallbackValue=1}"
            Minimum="{Binding SelectedCamera.MinimumZoomFactor, FallbackValue=1}"/>

        <Picker 
            Grid.Column="1"
            Grid.Row="1"
            Title="Flash"
            IsVisible="{Binding Path=SelectedCamera.IsFlashSupported, FallbackValue=false}"
            ItemsSource="{Binding FlashModes}"
            SelectedItem="{Binding FlashMode}" />

        <Picker 
            Grid.Column="2"
            Grid.Row="1"
            Title="Available Resolutions"
            ItemsSource="{Binding SelectedCamera.SupportedResolutions}"
            SelectedItem="{Binding SelectedResolution}" />

        <Button
            Grid.Column="0"
            Grid.Row="2"
            Command="{Binding CaptureImageCommand, Source={x:Reference Camera}}"
            Text="Capture Image" />

        <Button
            Grid.Column="1"
            Grid.Row="2"
            Command="{Binding StartCameraPreviewCommand, Source={x:Reference Camera}}"
            Text="Capture Image" />

        <Button
            Grid.Column="2"
            Grid.Row="2"
            Command="{Binding StopCameraPreviewCommand, Source={x:Reference Camera}}"
            Text="Capture Image" />
    </Grid>

</ContentPage>

예제

.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 작동 중인 이 기능의 예를 찾을 수 있습니다.

API

.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 CameraView 소스 코드를 찾을 수 있습니다.