CameraView

Poskytuje CameraView možnost připojit se k fotoaparátu, zobrazit náhled z fotoaparátu a pořizovat fotky. Nabízí CameraView také funkce, které podporují pořizování fotek, ovládání blesku, ukládání zachycených médií do souboru a nabízí různé háky pro události.

Následující části postupně vycházejí z toho, jak používat CameraView aplikaci .NET MAUI. Spoléhají na použití CameraViewModel. bude nastaven jako BindingContext příklad CameraViewPage.

Inicializace specifická pro platformu

Je CameraView součástí CommunityToolkit.Maui.Camera balíčku NuGet. Pokud chcete nejprve použít CameraView část Začínáme, přečtěte si prosím část Začínáme . Vyžaduje se následující nastavení specifické pro platformu.

Android

Do souboru je potřeba přidat Platforms/Android/AndroidManifest.xml následující oprávnění:

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

To by mělo být přidáno uvnitř elementu <manifest> . Níže vidíte úplný příklad:

<?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

Do souboru je potřeba přidat Platforms/iOS/Info.plist následující položky:

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

To by mělo být přidáno uvnitř elementu <dict> . Níže vidíte úplný příklad:

<?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

Do souboru je potřeba přidat Platforms/MacCatalyst/Info.plist následující položky:

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

To by mělo být přidáno uvnitř elementu <dict> . Níže vidíte úplný příklad:

<?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

Není vyžadováno žádné nastavení.

Tizen

Tizen se v současné době nepodporuje.

Základní použití

Aplikaci CameraView .NET MAUI je možné přidat následujícím způsobem.

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

<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>

Bylo by změněno tak, aby zahrnovalo xmlns následující:

<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>

Výsledkem bude povrch vykreslovací výstup výchozí kamery připojené k zařízení.

Přístup k aktuální kameře

Tato SelectedCamera vlastnost umožňuje přístup k aktuálně vybrané kameře.

Následující příklad ukazuje, jak vytvořit vazbu SelectedCamera vlastnosti z CameraView vlastnosti na vlastnost se CameraViewModel stejným názvem (SelectedCamera).

<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>

Lupa ovládacího prvku

Tato SelectedCamera vlastnost poskytuje jak vlastnost MinimumZoomFactor MaximumZoomFactor , tak i vlastnost, které jsou určené jen pro čtení, a poskytují vývojářům programový způsob, jak určit, co lze na aktuální kameru použít. Pokud chcete změnit přiblížení aktuální kamery, CameraView poskytuje ZoomFactor vlastnost.

Poznámka:

Pokud je hodnota poskytnuta mimo MinimumZoomFactor MaximumZoomFactor CameraView a uchytá hodnotu tak, aby byla zachována v mezích.

Následující příklad ukazuje, jak přidat do aplikace a Slider nastavit následující vazby:

• Maximum Vytvořte vazbu vlastnosti na MaximumZoomFactor SelectedCamera vlastnostSlider.
• Minimum Vytvořte vazbu vlastnosti na MinimumZoomFactor SelectedCamera vlastnostSlider.
• Value Vytvořte vazbu vlastnosti na CurrentZoom vlastnost Slider třídyCameraViewModel.

Konečná změna zahrnuje vazbu ZoomFactor vlastnosti na CurrentZoom vlastnost CameraView třídyCameraViewModel.

<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>

Režim blesku z fotoaparátu

Poskytuje CameraView možnost programově změnit režim blesku na zařízení, možné možnosti jsou:

• Off- Blesk je vypnutý a nebude použit.
• On - Blesk je zapnutý a bude vždy používán.
• Auto - blesk se automaticky použije na základě světelných podmínek.

Vlastnost SelectedCamera také poskytuje IsFlashSupported , což umožňuje určit, zda aktuálně vybraná kamera má blesk, který lze ovládat.

Následující příklad ukazuje, jak přidat do aplikace a Picker nastavit následující vazby:

• IsVisible Vytvořte vazbu vlastnosti na IsFlashSupported SelectedCamera vlastnostPicker.
• ItemsSource Vytvořte vazbu vlastnosti na FlashModes vlastnost Picker třídy CameraViewModel - jednoduchý seznam možných hodnot výčtuCameraFlashMode.
• SelectedItem Vytvořte vazbu vlastnosti na FlashMode vlastnost Picker třídyCameraViewModel.

Konečná změna zahrnuje vazbu CameraFlashMode vlastnosti na FlashMode vlastnost CameraView třídyCameraViewModel.

<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

Umožňuje CameraView programově změnit rozlišení obrázků zachycených z aktuální kamery.

Poznámka:

Tím se nezmění rozlišení zobrazené v náhledu z fotoaparátu.

Vlastnost SelectedCamera také poskytuje SupportedResolutions , což umožňuje určit, která rozlišení aktuální fotoaparát podporuje.

Následující příklad ukazuje, jak přidat do aplikace a Picker nastavit následující vazby:

• ItemsSource Vytvořte vazbu vlastnosti na SupportedResolutions SelectedCamera vlastnostPicker.
• SelectedItem Vytvořte vazbu vlastnosti na SelectedResolution vlastnost Picker třídyCameraViewModel.

Konečná změna zahrnuje vazbu ImageCaptureResolution vlastnosti na SelectedResolution vlastnost CameraView třídyCameraViewModel.

<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

Umožňuje CameraView programově aktivovat zachytávání obrázků. To je možné prostřednictvím CaptureImage metody nebo CaptureImageCommand.

Následující příklad ukazuje, jak přidat do aplikace a Button nastavit následující vazby:

• Command Vytvořte vazbu vlastnosti Button na CaptureImageCommand vlastnost v objektu 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>

Poznámka:

Pokud chcete použít image, která byla zachycena, CameraView poskytuje MediaCaptured událost.

Spustit náhled

Umožňuje CameraView programově spustit náhled z fotoaparátu. To je možné prostřednictvím StartCameraPreview metody nebo StartCameraPreviewCommand.

Následující příklad ukazuje, jak přidat do aplikace a Button nastavit následující vazby:

• Command Vytvořte vazbu vlastnosti Button na StartCameraPreviewCommand vlastnost v objektu 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>

Zastavit náhled

Poskytuje CameraView možnost programově zastavit náhled z fotoaparátu. To je možné prostřednictvím StopCameraPreview metody nebo StopCameraPreviewCommand.

Následující příklad ukazuje, jak přidat do aplikace a Button nastavit následující vazby:

• Command Vytvořte vazbu vlastnosti Button na StopCameraPreviewCommand vlastnost v objektu 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>

Příklady

Příklad této funkce najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód CameraView najdete v úložišti .NET MAUI Community Toolkit na GitHubu.