Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Het CameraView biedt de mogelijkheid om verbinding te maken met een camera, een voorbeeld van de camera weer te geven en foto's te maken. De CameraView biedt ook functies voor het maken van foto's, het beheren van de flash, het opslaan van vastgelegde media in een bestand en het aanbieden van verschillende hooks voor gebeurtenissen.
De volgende secties bouwen stapsgewijs voort op het gebruik van de CameraView in een .NET MAUI-toepassing. Ze zijn afhankelijk van het gebruik van een CameraViewModel. die zal worden ingesteld als de BindingContext van het voorbeeld CameraViewPage.
Platformspecifieke initialisatie
Het CameraView maakt deel uit van het CommunityToolkit.Maui.Camera nuget-pakket. Om de CameraView voor de eerste keer te gebruiken, raadpleegt u de sectie Aan de slag. De volgende platformspecifieke installatie is vereist.
De volgende machtigingen moeten worden toegevoegd aan het Platforms/Android/AndroidManifest.xml bestand:
<uses-permission android:name="android.permission.CAMERA" />
Dit moet in het <manifest> element worden toegevoegd. Hieronder ziet u een completer voorbeeld:
<?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>
Basaal gebruik
De CameraView kan op de volgende manier worden toegevoegd aan een .NET MAUI-toepassing.
Inclusief de XAML-naamruimte
Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Daarom volgt het volgende:
<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>
Zou als volgt worden gewijzigd om de xmlns op te nemen:
<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>
Het resultaat is een oppervlak dat de uitvoer weer geeft van de standaardcamera die is verbonden met het apparaat.
Toegang tot de huidige camera
De SelectedCamera eigenschap biedt de mogelijkheid om toegang te krijgen tot de geselecteerde camera.
In het volgende voorbeeld ziet u hoe u de SelectedCamera eigenschap verbindt van de CameraView eigenschap naar een eigenschap op dezelfde CameraViewModel naam (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 bedienen
De SelectedCamera eigenschap biedt zowel een MinimumZoomFactor als een MaximumZoomFactor eigenschap. Deze eigenschappen zijn alleen-lezen en bieden ontwikkelaars een programmatische methode om vast te stellen welke zoom op de huidige camera kan worden toegepast. Om de zoom van de huidige camera te wijzigen, biedt de CameraView de eigenschap ZoomFactor aan.
Opmerking
Als er een waarde buiten de MinimumZoomFactor en MaximumZoomFactor wordt opgegeven, zal de CameraView de waarde vastzetten om deze binnen de grenzen te houden.
In het volgende voorbeeld ziet u hoe u een Slider in de toepassing toevoegt en de volgende koppelingen instelt:
- Bind de
Maximumeigenschap van deSlidereigenschap aan deMaximumZoomFactorSelectedCameraeigenschap. - Bind de
Minimumeigenschap van deSlidereigenschap aan deMinimumZoomFactorSelectedCameraeigenschap. - Bind de
Valueeigenschap van deSlidereigenschap aan deCurrentZoomeigenschap in deCameraViewModelklasse.
De laatste wijziging omvat het binden van de ZoomFactor eigenschap aan CameraView de CurrentZoom eigenschap in de 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>
Flitsmodus van de camera
De CameraView biedt de mogelijkheid om programmatisch de flashmodus op het apparaat te wijzigen, de mogelijke opties zijn:
-
Off- de flits is uitgeschakeld en wordt niet gebruikt. -
On- de flits is ingeschakeld en zal altijd worden gebruikt. -
Auto- de flits wordt automatisch gebruikt op basis van de lichtomstandigheden.
De SelectedCamera eigenschap biedt ook de IsFlashSupported mogelijkheid om te bepalen of de geselecteerde camera een flits heeft die kan worden bestuurd.
In het volgende voorbeeld ziet u hoe u een Picker in de toepassing toevoegt en de volgende koppelingen instelt:
- Bind de
IsVisibleeigenschap van dePickereigenschap aan deIsFlashSupportedSelectedCameraeigenschap. - Bind de
ItemsSourceeigenschap van dePickeraan deFlashModeseigenschap in deCameraViewModelklasse - een eenvoudige lijst van de mogelijke waarden van deCameraFlashModeenumeratie. - Bind de
SelectedItemeigenschap van dePickereigenschap aan deFlashModeeigenschap in deCameraViewModelklasse.
De laatste wijziging omvat het binden van de CameraFlashMode eigenschap aan CameraView de FlashMode eigenschap in de 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>
Beeldopnameresolutie
De CameraView functie biedt de mogelijkheid om programmatisch de resolutie te wijzigen voor afbeeldingen die zijn vastgelegd vanaf de huidige camera.
Opmerking
Hiermee wordt de resolutie die in het voorbeeld van de camera wordt weergegeven, niet gewijzigd.
De SelectedCamera eigenschap biedt ook de SupportedResolutions, waardoor het mogelijk is te bepalen welke resoluties de huidige camera ondersteunt.
In het volgende voorbeeld ziet u hoe u een Picker in de toepassing toevoegt en de volgende koppelingen instelt:
- Bind de
ItemsSourceeigenschap van dePickereigenschap aan deSupportedResolutionsSelectedCameraeigenschap. - Bind de
SelectedItemeigenschap van dePickereigenschap aan deSelectedResolutioneigenschap in deCameraViewModelklasse.
De laatste wijziging omvat het binden van de ImageCaptureResolution eigenschap aan CameraView de SelectedResolution eigenschap in de 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>
FotoVastleggen
De CameraView functie biedt de mogelijkheid om programmatisch een opname van afbeeldingen te activeren. Dit is mogelijk via zowel de CaptureImage methode als de CaptureImageCommand.
In het volgende voorbeeld ziet u hoe u een Button in de toepassing toevoegt en de volgende koppelingen instelt:
- Bind de
Commandeigenschap van deButtoneigenschap aan deCaptureImageCommandeigenschap op deCameraView.
<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>
Opmerking
Om de vastgelegde afbeelding te gebruiken, biedt CameraView de MediaCaptured gebeurtenis aan.
In het volgende voorbeeld ziet u hoe u de CaptureImage methode gebruikt:
Opmerking
De onderstaande C#-code maakt gebruik van het hierboven gedefinieerde cameraveld 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);
}
}
Video-opname
De CameraView functie biedt de mogelijkheid om video's op te nemen. Dit is mogelijk via zowel de StartVideoRecording methode als de StartVideoRecordingCommand.
In het volgende voorbeeld ziet u hoe u een Button in de toepassing toevoegt en de volgende koppelingen instelt:
- Bind de
Commandeigenschap van deButtoneigenschap aan deStartVideoRecordingCommandeigenschap op deCameraView.
<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>
Opmerking
U moet een storingsvrije stream opgeven om de video op te nemen.
In het volgende voorbeeld ziet u hoe u de StartVideoRecording methode gebruikt:
Opmerking
De onderstaande C#-code maakt gebruik van het hierboven gedefinieerde cameraveld 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);
}
Als u een korte video wilt opnemen in MemoryStream, kunt u de volgende overload van VideoRecording gebruiken.
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);
}
Voorbeeld starten
De CameraView biedt de mogelijkheid om de weergave vanaf de camera programmatisch te starten. Dit is mogelijk via zowel de StartCameraPreview methode als de StartCameraPreviewCommand.
In het volgende voorbeeld ziet u hoe u een Button in de toepassing toevoegt en de volgende koppelingen instelt:
- Bind de
Commandeigenschap van deButtoneigenschap aan deStartCameraPreviewCommandeigenschap op deCameraView.
<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>
In het volgende voorbeeld ziet u hoe u de StartCameraPreview methode gebruikt:
Opmerking
De onderstaande C#-code maakt gebruik van het hierboven gedefinieerde cameraveld 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);
}
}
Stop voorbeeld
De CameraView biedt de mogelijkheid om de cameravoorvertoning programmatisch te onderbreken. Dit is mogelijk via zowel de StopCameraPreview methode als de StopCameraPreviewCommand.
In het volgende voorbeeld ziet u hoe u een Button in de toepassing toevoegt en de volgende koppelingen instelt:
- Bind de
Commandeigenschap van deButtoneigenschap aan deStopCameraPreviewCommandeigenschap op deCameraView.
<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>
In het volgende voorbeeld ziet u hoe u de StopCameraPreview methode gebruikt:
Opmerking
De onderstaande C#-code maakt gebruik van het hierboven gedefinieerde cameraveld 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);
}
}
Voorbeelden
U vindt een voorbeeld van deze functie in actie in de .NET COMMUNITY Toolkit Sample Application.
API (Application Programming Interface)
U vindt de broncode voor CameraView in de .NET MAUI Community Toolkit GitHub-opslagplaats.
.NET MAUI Community Toolkit