CameraView

CameraView vous permet de vous connecter à un appareil photo, d’afficher un aperçu de l’appareil photo et de prendre des photos. CameraView offre également des fonctionnalités permettant de prendre des photos, de contrôler le flash, d’enregistrer des supports capturés dans un fichier et d’offrir différents hooks pour les événements.

Les sections suivantes s’appuient de manière incrémentielle sur l’utilisation de CameraView dans une application .NET MAUI. Elles s’appuient sur l’utilisation d’un CameraViewModel. qui sera défini comme BindingContext de l’exemple CameraViewPage.

Initialisation spécifique à la plateforme

Le CameraView fait partie du package nuget CommunityToolkit.Maui.Camera. Pour commencer à utiliser CameraView, reportez-vous à la section Prise en main. La configuration spécifique à la plateforme suivante est requise.

Android

Les autorisations suivantes doivent être ajoutées au fichier Platforms/Android/AndroidManifest.xml :

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

Cela doit être ajouté à l’intérieur de l’élément <manifest>. Voici un exemple plus complet :

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

Les entrées suivantes doivent être ajoutées au fichier Platforms/iOS/Info.plist :

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

Cela doit être ajouté à l’intérieur de l’élément <dict>. Voici un exemple plus complet :

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

Les entrées suivantes doivent être ajoutées au fichier Platforms/MacCatalyst/Info.plist :

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

Cela doit être ajouté à l’intérieur de l’élément <dict>. Voici un exemple plus complet :

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

Aucune configuration n’est requise.

Tizen

Tizen n’est pas pris en charge actuellement.

Utilisation de base

CameraView peut être ajouté à une application .NET MAUI de la manière suivante.

Y compris l’espace de noms XAML

Pour utiliser le kit de ressources dans XAML, le xmlns suivant doit être ajouté à votre page ou à votre affichage :

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

Il en résulte ce qui suit :

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

Serait modifié pour inclure le xmlns de la manière suivante :

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

Le résultat est une surface qui affiche la sortie de la caméra par défaut connectée à l’appareil.

Accéder à la caméra actuelle

La propriété SelectedCamera permet d’accéder à la caméra actuellement sélectionnée.

L’exemple suivant montre comment lier la propriété SelectedCamera de CameraView à une propriété sur CameraViewModel portant le même nom (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>

Contrôler le zoom

La propriété SelectedCamera fournit à la fois une propriété MinimumZoomFactor et MaximumZoomFactor, elles sont en lecture seule et fournissent aux développeurs un moyen programmatique de déterminer quel zoom peut être appliqué à la caméra actuelle. Pour modifier le zoom sur la caméra actuelle, CameraView fournit la propriété ZoomFactor.

Remarque

Si une valeur est fournie en dehors de MinimumZoomFactor et MaximumZoomFactor, CameraView limite la valeur pour la maintenir dans ses limites.

L’exemple suivant montre comment ajouter Slider dans l’application et configurer les liaisons suivantes :

• Liez la propriété Maximum de Slider à MaximumZoomFactor de la propriété SelectedCamera.
• Liez la propriété Minimum de Slider à MinimumZoomFactor de la propriété SelectedCamera.
• Liez la propriété Value de Slider à la propriété CurrentZoom sur la classe CameraViewModel.

La modification finale implique la liaison de la propriété ZoomFactor de CameraView à la propriété CurrentZoom sur la classe 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}"
            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>

Mode flash de l’appareil photo

CameraView offre la possibilité de modifier par programmation le mode flash sur l’appareil. Les options disponibles sont les suivantes :

• Off : le flash est désactivé et ne sera pas utilisé.
• On : le flash est activé et sera toujours utilisé.
• Auto : le flash sera utilisé de manière automatique, en fonction des conditions d’éclairage.

La propriété SelectedCamera fournit également IsFlashSupported qui permet de déterminer si l’appareil photo actuellement sélectionné dispose d’un flash qui peut être contrôlé.

L’exemple suivant montre comment ajouter Picker dans l’application et comment configurer les liaisons suivantes :

• Liez la propriété IsVisible de Picker à IsFlashSupported de la propriété SelectedCamera.
• Liez la propriété ItemsSource de Picker à la propriété FlashModes sur la classe CameraViewModel, une liste simple des valeurs possibles de l’énumération CameraFlashMode.
• Liez la propriété SelectedItem de Picker à la propriété FlashMode sur la classe CameraViewModel.

La modification finale implique la liaison de la propriété CameraFlashMode de CameraView à la propriété FlashMode sur la classe 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}"
            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 permet de modifier par programmation la résolution des images capturées à partir de la caméra actuelle.

Remarque

Cela ne modifie pas la résolution affichée dans l’aperçu de l’appareil photo.

La propriété SelectedCamera fournit également SupportedResolutions qui permet de déterminer les résolutions prises en charge par la caméra actuelle.

L’exemple suivant montre comment ajouter Picker dans l’application et comment configurer les liaisons suivantes :

• Liez la propriété ItemsSource de Picker à SupportedResolutions de la propriété SelectedCamera.
• Liez la propriété SelectedItem de Picker à la propriété SelectedResolution sur la classe CameraViewModel.

La modification finale implique la liaison de la propriété ImageCaptureResolution de CameraView à la propriété SelectedResolution sur la classe 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}"
            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 permet de déclencher par programmation une capture d’image. Cela est possible à la fois par le biais de la méthode CaptureImage ou de CaptureImageCommand.

L’exemple suivant montre comment ajouter Button dans l’application et comment configurer les liaisons suivantes :

• Liez la propriété Command de Button à la propriété CaptureImageCommand sur 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>

Remarque

Pour utiliser l’image qui a été capturée, CameraView fournit l’événement MediaCaptured.

Démarrer l’aperçu

CameraView offre la possibilité de démarrer par programmation l’aperçu à partir de l’appareil photo. Cela est possible à la fois par le biais de la méthode StartCameraPreview ou de StartCameraPreviewCommand.

L’exemple suivant montre comment ajouter Button dans l’application et comment configurer les liaisons suivantes :

• Liez la propriété Command de Button à la propriété StartCameraPreviewCommand sur 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>

Arrêter la préversion

CameraView offre la possibilité d’arrêter de manière programmatique l’aperçu de la caméra. Cela est possible à la fois par le biais de la méthode StopCameraPreview ou de StopCameraPreviewCommand.

L’exemple suivant montre comment ajouter Button dans l’application et comment configurer les liaisons suivantes :

• Liez la propriété Command de Button à la propriété StopCameraPreviewCommand sur 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>

Exemples

Vous trouverez un exemple d’utilisation de cette fonctionnalité dans l’exemple d’application du toolkit de la communauté .NET MAUI.

API

Vous pouvez trouver le code source deCameraView sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.