CameraView

Die CameraView bietet die Möglichkeit, eine Verbindung mit einer Kamera herzustellen, eine Vorschau von der Kamera anzuzeigen und Fotos aufzunehmen. Darüber hinaus bietet CameraView Funktionen, die das Aufnehmen von Fotos unterstützen, den Blitz steuern, aufgenommene Medien in einer Datei speichern und verschiedene Hooks für Ereignisse anbieten.

In den folgenden Abschnitten wird schrittweise erläutert, wie Sie CameraView in einer .NET MAUI-Anwendung verwenden. Sie bauen auf die Verwendung eines CameraViewModel, das als BindingContext des Beispiels CameraViewPage festgelegt wird.

Plattformspezifische Initialisierung

Der CameraView ist Teil des Nuget-Pakets CommunityToolkit.Maui.Camera. Informationen zur ersten Verwendung von CameraView finden Sie im Abschnitt Erste Schritte. Das folgende plattformspezifische Setup ist erforderlich.

Android

Die folgenden Berechtigungen müssen der Platforms/Android/AndroidManifest.xml-Datei hinzugefügt werden:

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

Dies sollte innerhalb des <manifest>-Elements hinzugefügt werden. Nachfolgend sehen Sie ein vollständiges Beispiel:

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

Die folgenden Einträge müssen der Platforms/iOS/Info.plist-Datei hinzugefügt werden:

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

Dies sollte innerhalb des <dict>-Elements hinzugefügt werden. Nachfolgend sehen Sie ein vollständiges Beispiel:

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

Die folgenden Einträge müssen der Platforms/MacCatalyst/Info.plist-Datei hinzugefügt werden:

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

Dies sollte innerhalb des <dict>-Elements hinzugefügt werden. Nachfolgend sehen Sie ein vollständiges Beispiel:

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

Es ist kein Setup erforderlich.

Tizen

Tizen wird derzeit nicht unterstützt.

Grundlegende Verwendung

CameraView kann auf folgende Weise einer .NET MAUI-Anwendung hinzugefügt werden.

Einbinden des XAML-Namespace

Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:

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

Der folgende Abschnitt:

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

Würde dann geändert werden, um xmlns einzubinden:

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

Das Ergebnis ist eine Oberfläche, die die Ausgabe der Standardkamera rendert, die mit dem Gerät verbunden ist.

Zugreifen auf die aktuelle Kamera

Die SelectedCamera-Eigenschaft bietet die Möglichkeit, auf die aktuell ausgewählte Kamera zuzugreifen.

Das folgende Beispiel zeigt, wie Sie die SelectedCamera-Eigenschaft von CameraView an eine Eigenschaft des CameraViewModel mit demselben Namen (SelectedCamera) binden.

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

Steuerelementzoom

Die SelectedCamera-Eigenschaft stellt sowohl eine MinimumZoomFactor- als auch eine MaximumZoomFactor-Eigenschaft bereit. Diese sind schreibgeschützt und bieten Entwickler*innen eine programmgesteuerte Möglichkeit, zu bestimmen, welche Zoomfunktion auf die aktuelle Kamera angewendet werden kann. Um den Zoom auf der aktuellen Kamera zu ändern, stellt CameraView die ZoomFactor-Eigenschaft bereit.

Hinweis

Wenn ein Wert außerhalb des MinimumZoomFactor und MaximumZoomFactor bereitgestellt wird, wird CameraView den Wert einklammern, um ihn innerhalb der Grenzen zu halten.

Das folgende Beispiel zeigt, wie Sie der Anwendung einen Slider hinzufügen und die folgenden Bindungen einrichten:

• Binden Sie die Maximum-Eigenschaft des Slider an den MaximumZoomFactor der SelectedCamera-Eigenschaft.
• Binden Sie die Minimum-Eigenschaft des Slider an den MinimumZoomFactor der SelectedCamera-Eigenschaft.
• Binden Sie die Value-Eigenschaft des Slider an die CurrentZoom-Eigenschaft der CameraViewModel-Klasse.

Die endgültige Änderung umfasst das Binden der ZoomFactor-Eigenschaft von CameraView an die CurrentZoom-Eigenschaft der CameraViewModel-Klasse.

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

Kamerablitzmodus

CameraView bietet die Möglichkeit, den Blitzmodus auf dem Gerät programmgesteuert zu ändern. Die folgenden Optionen sind möglich:

• Off: der Blitz ist ausgeschaltet und wird nicht verwendet.
• On: der Blitz ist eingeschaltet und wird immer verwendet.
• Auto: der Blitz wird automatisch basierend auf den Beleuchtungsbedingungen verwendet.

Die SelectedCamera-Eigenschaft stellt außerdem IsFlashSupported bereit. So kann ermittelt werden, ob die aktuell ausgewählte Kamera über einen Blitz verfügt, der gesteuert werden kann.

Das folgende Beispiel zeigt, wie Sie der Anwendung einen Picker hinzufügen und die folgenden Bindungen einrichten:

• Binden Sie die IsVisible-Eigenschaft des Picker an den IsFlashSupported der SelectedCamera-Eigenschaft.
• Binden Sie die ItemsSource-Eigenschaft des Picker an die FlashModes-Eigenschaft der CameraViewModel-Klasse – eine einfache Liste der möglichen Werte der CameraFlashMode-Enumeration.
• Binden Sie die SelectedItem-Eigenschaft des Picker an die FlashMode-Eigenschaft der CameraViewModel-Klasse.

Die endgültige Änderung umfasst das Binden der CameraFlashMode-Eigenschaft von CameraView an die FlashMode-Eigenschaft der CameraViewModel-Klasse.

<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 bietet die Möglichkeit, die Auflösung für Bilder, die von der aktuellen Kamera aufgenommen werden, programmgesteuert zu ändern.

Hinweis

Dadurch wird die in der Vorschau der Kamera angezeigte Auflösung nicht verändert.

Die SelectedCamera-Eigenschaft stellt auch SupportedResolutions bereit. So kann ermittelt werden, welche Auflösungen die aktuelle Kamera unterstützt.

Das folgende Beispiel zeigt, wie Sie der Anwendung einen Picker hinzufügen und die folgenden Bindungen einrichten:

• Binden Sie die ItemsSource-Eigenschaft des Picker an den SupportedResolutions der SelectedCamera-Eigenschaft.
• Binden Sie die SelectedItem-Eigenschaft des Picker an die SelectedResolution-Eigenschaft der CameraViewModel-Klasse.

Die endgültige Änderung umfasst das Binden der ImageCaptureResolution-Eigenschaft von CameraView an die SelectedResolution-Eigenschaft der CameraViewModel-Klasse.

<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

Die CameraView bietet die Möglichkeit, Bildaufnahmen programmgesteuert auszulösen. Dies ist sowohl über die CaptureImage-Methode als auch mit CaptureImageCommand möglich.

Das folgende Beispiel zeigt, wie Sie der Anwendung einen Button hinzufügen und die folgenden Bindungen einrichten:

• Binden Sie die Command-Eigenschaft von Button an die CaptureImageCommand-Eigenschaft von 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>

Hinweis

Um das Bild zu verwenden, das erfasst wurde, stellt CameraView das MediaCaptured-Ereignis bereit.

Vorschau starten

CameraView bietet die Möglichkeit, die Vorschau programmgesteuert über die Kamera zu starten. Dies ist sowohl über die StartCameraPreview-Methode als auch mit StartCameraPreviewCommand möglich.

Das folgende Beispiel zeigt, wie Sie der Anwendung einen Button hinzufügen und die folgenden Bindungen einrichten:

• Binden Sie die Command-Eigenschaft von Button an die StartCameraPreviewCommand-Eigenschaft von 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>

Vorschau beenden

CameraView bietet die Möglichkeit, die Vorschau programmgesteuert über die Kamera zu stoppen. Dies ist sowohl über die StopCameraPreview-Methode als auch mit StopCameraPreviewCommand möglich.

Das folgende Beispiel zeigt, wie Sie der Anwendung einen Button hinzufügen und die folgenden Bindungen einrichten:

• Binden Sie die Command-Eigenschaft von Button an die StopCameraPreviewCommand-Eigenschaft von 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>

Beispiele

Sie finden ein Beispiel für dieses Feature in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.

API

Sie finden den Quellcode für CameraView über das GitHub-Repository für das .NET MAUI Community Toolkit.