CameraView

Offre CameraView la possibilità di connettersi a una fotocamera, visualizzare un'anteprima dalla fotocamera e scattare foto. Offre CameraView inoltre funzionalità per supportare l'acquisizione di foto, il controllo del flash, il salvataggio di supporti acquisiti in un file e l'offerta di hook diversi per gli eventi.

Le sezioni seguenti si baseranno in modo incrementale su come usare CameraView in un'applicazione MAUI .NET. Si basano sull'uso di un oggetto CameraViewModel. che verrà impostato come dell'esempio BindingContext CameraViewPage.

Inizializzazione specifica della piattaforma

Fa CameraView parte del CommunityToolkit.Maui.Camera pacchetto nuget. Per usare prima di tutto, CameraView fare riferimento alla sezione Attività iniziali . È necessaria la configurazione specifica della piattaforma seguente.

Android

Al file devono essere aggiunte Platforms/Android/AndroidManifest.xml le autorizzazioni seguenti:

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

Deve essere aggiunto all'interno dell'elemento <manifest> . Di seguito è riportato un esempio più completo:

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

Al file devono essere aggiunte Platforms/iOS/Info.plist le voci seguenti:

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

Deve essere aggiunto all'interno dell'elemento <dict> . Di seguito è riportato un esempio più completo:

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

Al file devono essere aggiunte Platforms/MacCatalyst/Info.plist le voci seguenti:

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

Deve essere aggiunto all'interno dell'elemento <dict> . Di seguito è riportato un esempio più completo:

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

Non è richiesta alcuna configurazione.

Tizen

Tizen non è attualmente supportato.

Utilizzo di base

L'oggetto CameraView può essere aggiunto a un'applicazione MAUI .NET nel modo seguente.

Inclusione dello spazio dei nomi XAML

Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:

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

Di conseguenza:

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

Verrà modificato in modo da includere l'oggetto xmlns come indicato di seguito:

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

Il risultato sarà una superficie che esegue il rendering dell'output della fotocamera predefinita connessa al dispositivo.

Accedere alla fotocamera corrente

La SelectedCamera proprietà consente di accedere alla fotocamera attualmente selezionata.

Nell'esempio seguente viene illustrato come associare la SelectedCamera proprietà da CameraView a una proprietà in CameraViewModel con lo stesso nome (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>

Zoom del controllo

La SelectedCamera proprietà fornisce sia una MinimumZoomFactor proprietà che una MaximumZoomFactor proprietà, che sono di sola lettura e forniscono agli sviluppatori un modo programmatico per determinare quale zoom può essere applicato alla fotocamera corrente. Per modificare lo zoom sulla fotocamera corrente, fornisce CameraView la ZoomFactor proprietà .

Nota

Se viene fornito un valore all'esterno di MinimumZoomFactor e MaximumZoomFactor verrà CameraView bloccato il valore per mantenerlo all'interno dei limiti.

Nell'esempio seguente viene illustrato come aggiungere un oggetto Slider all'applicazione e configurare le associazioni seguenti:

• Associare la Maximum proprietà dell'oggetto Slider all'oggetto MaximumZoomFactor della SelectedCamera proprietà .
• Associare la Minimum proprietà dell'oggetto Slider all'oggetto MinimumZoomFactor della SelectedCamera proprietà .
• Associare la Value proprietà dell'oggetto Slider alla proprietà nella CurrentZoom CameraViewModel classe .

La modifica finale comporta l'associazione della ZoomFactor proprietà dell'oggetto CameraView alla CurrentZoom proprietà nella CameraViewModel classe .

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

Modalità flash fotocamera

Offre CameraView la possibilità di modificare a livello di codice la modalità flash nel dispositivo, le possibili opzioni sono:

• Off- il flash è spento e non verrà usato.
• On - il flash è acceso e verrà sempre usato.
• Auto - il flash verrà utilizzato automaticamente in base alle condizioni di illuminazione.

La SelectedCamera proprietà fornisce anche il IsFlashSupported che consente di determinare se la fotocamera attualmente selezionata ha un flash che può essere controllato.

Nell'esempio seguente viene illustrato come aggiungere un oggetto Picker all'applicazione e configurare le associazioni seguenti:

• Associare la IsVisible proprietà dell'oggetto Picker all'oggetto IsFlashSupported della SelectedCamera proprietà .
• Associare la ItemsSource proprietà dell'oggetto Picker alla FlashModes proprietà nella CameraViewModel classe , un semplice elenco dei valori possibili dell'enumerazione CameraFlashMode .
• Associare la SelectedItem proprietà dell'oggetto Picker alla proprietà nella FlashMode CameraViewModel classe .

La modifica finale comporta l'associazione della CameraFlashMode proprietà dell'oggetto CameraView alla FlashMode proprietà nella CameraViewModel classe .

<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

Offre CameraView la possibilità di modificare la risoluzione a livello di codice per le immagini acquisite dalla fotocamera corrente.

Nota

La risoluzione visualizzata nell'anteprima non verrà modificata dalla fotocamera.

La SelectedCamera proprietà fornisce anche il SupportedResolutions che consente di determinare quali risoluzioni supportano la fotocamera corrente.

Nell'esempio seguente viene illustrato come aggiungere un oggetto Picker all'applicazione e configurare le associazioni seguenti:

• Associare la ItemsSource proprietà dell'oggetto Picker all'oggetto SupportedResolutions della SelectedCamera proprietà .
• Associare la SelectedItem proprietà dell'oggetto Picker alla proprietà nella SelectedResolution CameraViewModel classe .

La modifica finale comporta l'associazione della ImageCaptureResolution proprietà dell'oggetto CameraView alla SelectedResolution proprietà nella CameraViewModel classe .

<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 Offre la possibilità di attivare a livello di codice un'acquisizione di immagini. Ciò è possibile tramite sia il CaptureImage metodo che l'oggetto CaptureImageCommand.

Nell'esempio seguente viene illustrato come aggiungere un oggetto Button all'applicazione e configurare le associazioni seguenti:

• Associare la Command proprietà dell'oggetto Button alla CaptureImageCommand proprietà nell'oggetto 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>

Nota

Per usare l'immagine acquisita, fornisce CameraView l'evento MediaCaptured .

Avvia anteprima

Offre CameraView la possibilità di avviare l'anteprima a livello di codice dalla fotocamera. Ciò è possibile tramite sia il StartCameraPreview metodo che l'oggetto StartCameraPreviewCommand.

Nell'esempio seguente viene illustrato come aggiungere un oggetto Button all'applicazione e configurare le associazioni seguenti:

• Associare la Command proprietà dell'oggetto Button alla StartCameraPreviewCommand proprietà nell'oggetto 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>

Interrompi anteprima

Offre CameraView la possibilità di arrestare a livello di codice l'anteprima dalla fotocamera. Ciò è possibile tramite sia il StopCameraPreview metodo che l'oggetto StopCameraPreviewCommand.

Nell'esempio seguente viene illustrato come aggiungere un oggetto Button all'applicazione e configurare le associazioni seguenti:

• Associare la Command proprietà dell'oggetto Button alla StopCameraPreviewCommand proprietà nell'oggetto 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>

Esempi

È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per CameraView over nel repository GitHub di .NET MAUI Community Toolkit.