CameraView

Zapewnia CameraView możliwość nawiązywania połączenia z aparatem, wyświetlania podglądu z aparatu i robienia zdjęć. Oferuje CameraView również funkcje do obsługi robienia zdjęć, kontrolowania błysku, zapisywania przechwyconych multimediów do pliku i oferowania różnych haków dla zdarzeń.

Poniższe sekcje będą przyrostowo opierać się na sposobie używania obiektu CameraView w aplikacji .NET MAUI. Polegają one na użyciu obiektu CameraViewModel. zostanie ustawiona BindingContext jako przykład CameraViewPage.

Inicjowanie specyficzne dla platformy

Element CameraView jest częścią CommunityToolkit.Maui.Camera pakietu nuget. Aby najpierw użyć sekcji CameraView Wprowadzenie, zapoznaj się z sekcją Wprowadzenie . Wymagana jest następująca konfiguracja specyficzna dla platformy.

Android

Do pliku należy dodać Platforms/Android/AndroidManifest.xml następujące uprawnienia:

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

Należy go dodać wewnątrz <manifest> elementu . Poniżej przedstawiono bardziej kompletny przykład:

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

Do pliku należy dodać Platforms/iOS/Info.plist następujące wpisy:

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

Należy go dodać wewnątrz <dict> elementu . Poniżej przedstawiono bardziej kompletny przykład:

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

Katalizator mac

Do pliku należy dodać Platforms/MacCatalyst/Info.plist następujące wpisy:

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

Należy go dodać wewnątrz <dict> elementu . Poniżej przedstawiono bardziej kompletny przykład:

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

Nie jest wymagana żadna konfiguracja.

Tizen

Tizen nie jest obecnie obsługiwany.

Podstawowy sposób użycia

Element CameraView można dodać do aplikacji .NET MAUI w następujący sposób.

Dołączanie przestrzeni nazw XAML

Aby można było używać zestawu narzędzi w języku XAML, należy dodać następujące xmlns elementy do strony lub widoku:

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

W związku z tym następujące elementy:

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

Zostanie zmodyfikowana tak, aby zawierała następujące xmlns elementy:

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

Wynikiem będzie renderowanie danych wyjściowych domyślnego aparatu podłączonego do urządzenia.

Uzyskiwanie dostępu do bieżącego aparatu

Właściwość SelectedCamera umożliwia dostęp do aktualnie wybranego aparatu.

W poniższym przykładzie pokazano, jak powiązać SelectedCamera właściwość z CameraView właściwością z właściwością o CameraViewModel tej samej nazwie (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>

Powiększenie kontrolki

Właściwość SelectedCamera zapewnia zarówno właściwość , jak MinimumZoomFactor i MaximumZoomFactor , są to tylko do odczytu i zapewniają deweloperom programowy sposób określania, jakie powiększenie można zastosować do bieżącego aparatu. Aby zmienić powiększenie bieżącego aparatu, CameraView zapewnia ZoomFactor właściwość .

Uwaga

Jeśli wartość jest podana poza MinimumZoomFactor wartością , a CameraView MaximumZoomFactor wartość będzie zaciskać, aby zachować ją w granicach.

W poniższym przykładzie pokazano, jak dodać element Slider do aplikacji i skonfigurować następujące powiązania:

• Powiąż Maximum właściwość Slider właściwości z MaximumZoomFactor właściwością SelectedCamera .
• Powiąż Minimum właściwość Slider właściwości z MinimumZoomFactor właściwością SelectedCamera .
• Powiąż Value właściwość właściwości Slider z właściwością klasy .CameraViewModel CurrentZoom

Ostateczna zmiana polega na powiązaniu ZoomFactor właściwości CameraView właściwości z właściwością CurrentZoom klasy 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>

Tryb błysku aparatu

Zapewnia CameraView możliwość programowego zmieniania trybu flash na urządzeniu, możliwe są następujące opcje:

• Off- lampa błyskowa jest wyłączona i nie będzie używana.
• On- lampa błyskowa jest włączona i zawsze będzie używana.
• Auto - lampa błyskowa będzie automatycznie używana na podstawie warunków oświetlenia.

Właściwość SelectedCamera udostępnia IsFlashSupported również element, który umożliwia określenie, czy aktualnie wybrany aparat ma lampę błyskową, którą można kontrolować.

W poniższym przykładzie pokazano, jak dodać element Picker do aplikacji i skonfigurować następujące powiązania:

• Powiąż IsVisible właściwość Picker właściwości z IsFlashSupported właściwością SelectedCamera .
• Powiąż ItemsSource właściwość właściwości Picker z właściwością FlashModes klasy CameraViewModel — prostą listę możliwych wartości wyliczenia CameraFlashMode .
• Powiąż SelectedItem właściwość właściwości Picker z właściwością klasy .CameraViewModel FlashMode

Ostateczna zmiana polega na powiązaniu CameraFlashMode właściwości CameraView właściwości z właściwością FlashMode klasy 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

Zapewnia CameraView możliwość programowego zmieniania rozdzielczości obrazów przechwyconych z bieżącego aparatu.

Uwaga

Nie spowoduje to zmiany rozdzielczości wyświetlanej w podglądzie aparatu.

Właściwość SelectedCamera udostępnia SupportedResolutions również funkcję, która umożliwia określenie rozdzielczości, które obsługuje bieżąca kamera.

W poniższym przykładzie pokazano, jak dodać element Picker do aplikacji i skonfigurować następujące powiązania:

• Powiąż ItemsSource właściwość Picker właściwości z SupportedResolutions właściwością SelectedCamera .
• Powiąż SelectedItem właściwość właściwości Picker z właściwością klasy .CameraViewModel SelectedResolution

Ostateczna zmiana polega na powiązaniu ImageCaptureResolution właściwości CameraView właściwości z właściwością SelectedResolution klasy 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

Zapewnia CameraView możliwość programowego wyzwalania przechwytywania obrazu. Jest to możliwe zarówno za pomocą metody , jak CaptureImage i metody CaptureImageCommand.

W poniższym przykładzie pokazano, jak dodać element Button do aplikacji i skonfigurować następujące powiązania:

• Powiąż Command właściwość właściwości Button z właściwością CaptureImageCommand w obiekcie 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>

Uwaga

Aby użyć obrazu, który został przechwycony CameraView , dostarcza MediaCaptured zdarzenie.

Rozpocznij wersję zapoznawcza

Zapewnia CameraView możliwość programowego uruchamiania podglądu z aparatu. Jest to możliwe zarówno za pomocą metody , jak StartCameraPreview i metody StartCameraPreviewCommand.

W poniższym przykładzie pokazano, jak dodać element Button do aplikacji i skonfigurować następujące powiązania:

• Powiąż Command właściwość właściwości Button z właściwością StartCameraPreviewCommand w obiekcie 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>

Zatrzymaj podgląd

Zapewnia CameraView możliwość programowego zatrzymywania podglądu z aparatu. Jest to możliwe zarówno za pomocą metody , jak StopCameraPreview i metody StopCameraPreviewCommand.

W poniższym przykładzie pokazano, jak dodać element Button do aplikacji i skonfigurować następujące powiązania:

• Powiąż Command właściwość właściwości Button z właściwością StopCameraPreviewCommand w obiekcie 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>

Przykłady

Przykład tej funkcji można znaleźć w aplikacji przykładowej zestawu narzędzi .NET MAUI Community Toolkit.

interfejs API

Kod źródłowy można CameraView znaleźć w repozytorium GitHub zestawu narzędzi .NET MAUI Community Toolkit.