Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
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 CameraViewModel. che verrà impostato come il BindingContext dell'esempio CameraViewPage.
Inizializzazione specifica della piattaforma
Il CameraView fa parte del CommunityToolkit.Maui.Camera pacchetto NuGet. Per il primo utilizzo, CameraView fare riferimento alla sezione Guida introduttiva. È necessaria la configurazione specifica della piattaforma seguente.
Devono essere aggiunte le seguenti autorizzazioni al file Platforms/Android/AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" />
Se si prevede di registrare video, richiedere le autorizzazioni microfono:
<uses-permission android:name="android.permission.RECORD_AUDIO" />
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" />
<!--Optional. Only for video recording-->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
</manifest>
Utilizzo di base
L'oggetto CameraView può essere aggiunto a un'applicazione MAUI .NET nel modo seguente.
Richiedere autorizzazioni
Gli sviluppatori devono richiedere manualmente i permessi per la fotocamera e/o il microfono:
var cameraPermissionsRequest = await Permissions.RequestAsync<Permissions.Camera>();
Se si prevede di registrare video, richiedere le autorizzazioni microfono:
var microphonePermissionsRequest = await Permissions.RequestAsync<Permissions.Microphone>();
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 renderizza l'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>
Controlla lo zoom
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, il CameraView fornisce la proprietà ZoomFactor.
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
Maximumproprietà diSliderallaMaximumZoomFactordiSelectedCamera. - Associare la proprietà
MinimumdiSlideralla proprietàSelectedCameradiMinimumZoomFactor. - Associare la proprietà
ValuediSlideralla proprietàCurrentZoomnella classeCameraViewModel.
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 proprietà
IsVisiblediPickeraIsFlashSupporteddella proprietàSelectedCamera. - Associare la
ItemsSourceproprietà dell'oggettoPickerallaFlashModesproprietà nellaCameraViewModelclasse , un semplice elenco dei valori possibili dell'enumerazioneCameraFlashMode. - Associare la proprietà
SelectedItemdell'oggettoPickeralla proprietàFlashModenella classeCameraViewModel.
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
CameraView offre la possibilità di modificare la risoluzione delle immagini acquisite dalla fotocamera corrente a livello di programmazione.
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 proprietà
ItemsSourcediPickeraSupportedResolutionsdella proprietàSelectedCamera. - Collega la proprietà
SelectedItemdell'oggettoPickeralla proprietàSelectedResolutiondella classeCameraViewModel.
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
Commandproprietà dell'oggettoButtonallaCaptureImageCommandproprietà nell'oggettoCameraView.
<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, il CameraView fornisce l'evento MediaCaptured.
Nell'esempio seguente viene illustrato come usare il CaptureImage metodo :
Nota
Il codice C# seguente usa il campo Fotocamera definito in precedenza in XAML (<toolkit:CameraView x:Name="Camera" />)
async void HandleCaptureButtonTapped(object? sender, EventArgs e)
{
try
{
// Use the Camera field defined above in XAML (`<toolkit:CameraView x:Name="Camera" />`)
var captureImageCTS = new CancellationTokenSource(TimeSpan.FromSeconds(3));
Stream stream = await Camera.CaptureImage(captureImageCTS.Token);
}
catch(Exception e)
{
// Handle Exception
Trace.WriteLine(e);
}
}
Registrazione video
CameraView offre la possibilità di registrare video. Ciò è possibile tramite sia il StartVideoRecording metodo che l'oggetto StartVideoRecordingCommand.
Nell'esempio seguente viene illustrato come aggiungere un oggetto Button all'applicazione e configurare le associazioni seguenti:
- Associare la
Commandproprietà dell'oggettoButtonallaStartVideoRecordingCommandproprietà nell'oggettoCameraView.
<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 Clicked="StartCameraRecording"
Text="StartVideoRecording" />
<Button Command="{Binding StartVideoRecordingCommand, Source={x:Reference Camera}, x:DataType=toolkit:CameraView}"
CommandParameter="{Binding Stream}"
Text="StartVideoRecording" />
<Button Command="{Binding StopVideoRecordingCommand, Source={x:Reference Camera}, x:DataType=toolkit:CameraView}"
CommandParameter="{Binding Token}"
Text="StopVideoRecording" />
</Grid>
</ContentPage>
Nota
È necessario fornire un flusso pulito per registrare il video.
Nell'esempio seguente viene illustrato come usare il StartVideoRecording metodo :
Nota
Il codice C# seguente usa il campo Fotocamera definito in precedenza in XAML (<toolkit:CameraView x:Name="Camera" />)
async void StartCameraRecordingWithCustomStream(object? sender, EventArgs e)
{
using var threeSecondVideoRecordingStream = new FileStream("recording.mp4");
await Camera.StartVideoRecording(stream, CancellationToken.None);
await Task.Delay(TimeSpan.FromSeconds(3));
await Camera.StopVideoRecording(CancellationToken.None);
await FileSaver.SaveAsync("recording.mp4", threeSecondVideoRecordingStream);
}
Se vuoi registrare un breve video e registrare video in MemoryStream puoi usare l'overload successivo di VideoRecording:
async void StartCameraRecording(object? sender, EventArgs e)
{
await Camera.StartVideoRecording(CancellationToken.None);
await Task.Delay(TimeSpan.FromSeconds(3));
var threeSecondVideoRecordingStream = await Camera.StopVideoRecording(CancellationToken.None);
await FileSaver.SaveAsync("recording.mp4", threeSecondVideoRecordingStream);
}
Avvia anteprima
Offre CameraView la possibilità di avviare programmaticamente l'anteprima 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
Commandproprietà dell'oggettoButtonallaStartCameraPreviewCommandproprietà nell'oggettoCameraView.
<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>
Nell'esempio seguente viene illustrato come usare il StartCameraPreview metodo :
Nota
Il codice C# seguente usa il campo Fotocamera definito in precedenza in XAML (<toolkit:CameraView x:Name="Camera" />)
async void HandleStartCameraPreviewButtonTapped(object? sender, EventArgs e)
{
try
{
var startCameraPreviewTCS = new CancellationTokenSource(TimeSpan.FromSeconds(3));
// Use the Camera field defined above in XAML (`<toolkit:CameraView x:Name="Camera" />`)
await Camera.StartCameraPreview(startCameraPreviewTCS.Token);
}
catch(Exception e)
{
// Handle Exception
Trace.WriteLine(e);
}
}
Interrompi anteprima
Offre CameraView la possibilità di arrestare programmaticamente 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
Commandproprietà dell'oggettoButtonallaStopCameraPreviewCommandproprietà nell'oggettoCameraView.
<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>
Nell'esempio seguente viene illustrato come usare il StopCameraPreview metodo :
Nota
Il codice C# seguente usa il campo Fotocamera definito in precedenza in XAML (<toolkit:CameraView x:Name="Camera" />)
void HandleStopCameraPreviewButtonTapped(object? sender, EventArgs e)
{
try
{
// Use the Camera field defined above in XAML (`<toolkit:CameraView x:Name="Camera" />`)
Camera.StopCameraPreview();
}
catch(Exception e)
{
// Handle Exception
Trace.WriteLine(e);
}
}
Esempi
È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit.
API (Interfaccia di Programmazione delle Applicazioni)
È possibile trovare il codice sorgente per CameraView nel repository GitHub del .NET MAUI Community Toolkit.
.NET MAUI Community Toolkit