CameraView

Makale
07/18/2024

, CameraView bir kameraya bağlanma, kameradan bir önizleme görüntüleme ve fotoğraf çekme olanağı sağlar. Ayrıca CameraView fotoğraf çekmeyi, flaşı denetlemeyi, yakalanan medyayı bir dosyaya kaydetmeyi ve olaylar için farklı kancalar sunmayı destekleyen özellikler sunar.

Aşağıdaki bölümler bir .NET MAUI uygulamasında nasıl kullanılacağını CameraView artımlı olarak derleyecektir. Bir kullanımına CameraViewModelgüvenirler. örneği CameraViewPageolarak BindingContext ayarlanır.

Platforma özgü başlatma

CameraView nuget paketinin CommunityToolkit.Maui.Camera bir parçasıdır. İlk olarak kullanmaya CameraView başlamak için lütfen Başlarken bölümüne bakın. Aşağıdaki platforma özgü kurulum gereklidir.

Dosyaya aşağıdaki izinlerin eklenmesi Platforms/Android/AndroidManifest.xml gerekir:

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

Bu, öğesinin <manifest> içine eklenmelidir. Aşağıda daha eksiksiz bir örnek gösterilmektedir:

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

Dosyaya aşağıdaki girdilerin eklenmesi Platforms/iOS/Info.plist gerekir:

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

Bu, öğesinin <dict> içine eklenmelidir. Aşağıda daha eksiksiz bir örnek gösterilmektedir:

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

Dosyaya aşağıdaki girdilerin eklenmesi Platforms/MacCatalyst/Info.plist gerekir:

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

Bu, öğesinin <dict> içine eklenmelidir. Aşağıda daha eksiksiz bir örnek gösterilmektedir:

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

Temel kullanım

aşağıdaki CameraView şekilde bir .NET MAUI uygulamasına eklenebilir.

XAML ad alanını dahil edin

Araç setini XAML'de kullanmak için sayfanıza veya görünümünüzde aşağıdakilerin xmlns eklenmesi gerekir:

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

Bu nedenle aşağıdakiler:

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

aşağıdakiler dahil xmlns edilecek şekilde değiştirilir:

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

Sonuç, cihaza bağlı varsayılan kameranın çıkışını işleyecek bir yüzey olacaktır.

Geçerli kameraya erişme

özelliği, SelectedCamera seçili durumdaki kameraya erişme olanağı sağlar.

Aşağıdaki örnekte, özelliğinin SelectedCamera CameraView üzerinde aynı ada (SelectedCamera ) sahip bir özelliğe CameraViewModel nasıl bağlanacağınız gösterilmektedir.

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

Yakınlaştırmayı Denetleme

SelectedCamera özelliği hem bir MinimumZoomFactor hem de bir MaximumZoomFactor özellik sağlar, bunlar salt okunurdur ve geliştiricilere geçerli kameraya hangi yakınlaştırmanın uygulanabileceğini belirlemek için programlı bir yöntem sağlar. Geçerli kameradaki CameraView yakınlaştırmayı değiştirmek için özelliği sağlanır ZoomFactor .

Not

dışında bir değer sağlanırsa MinimumZoomFactor ve MaximumZoomFactor CameraView değeri sınırlar içinde tutmak için sıkıştıracaktır.

Aşağıdaki örnekte uygulamaya nasıl bir Slider ekleneceği ve aşağıdaki bağlamaların nasıl ayarleneceği gösterilmektedir:

Maximum özelliğini özelliğine Slider MaximumZoomFactor SelectedCamera bağlayın.
Minimum özelliğini özelliğine Slider MinimumZoomFactor SelectedCamera bağlayın.
öğesinin Value Slider özelliğini sınıfındaki CurrentZoom özelliğine CameraViewModel bağlayın.

Son değişiklik, öğesinin ZoomFactor CameraView özelliğini sınıfındaki özelliğine CurrentZoom bağlamayı CameraViewModel içerir.

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

Kamera Flash Modu

, CameraView cihazdaki flash modunu program aracılığıyla değiştirme olanağı sağlar, olası seçenekler şunlardır:

Off- flaş kapalıdır ve kullanılmaz.
On- flaş açık ve her zaman kullanılacaktır.
Auto - flaş aydınlatma koşullarına göre otomatik olarak kullanılır.

Özelliği SelectedCamera ayrıca, seçili olan kameranın kontrol edilebilen bir flaşa sahip olup olmadığını belirlemeyi mümkün kılan özelliğini de sağlar IsFlashSupported .

Aşağıdaki örnekte uygulamaya nasıl bir Picker ekleneceği ve aşağıdaki bağlamaların nasıl ayarleneceği gösterilmektedir:

IsVisible özelliğini özelliğine Picker IsFlashSupported SelectedCamera bağlayın.
öğesinin ItemsSource Picker özelliğini sınıfındaki FlashModes CameraViewModel özelliğine bağlayın. Sabit listesinin olası değerlerinin CameraFlashMode basit bir listesi.
öğesinin SelectedItem Picker özelliğini sınıfındaki FlashMode özelliğine CameraViewModel bağlayın.

Son değişiklik, öğesinin CameraFlashMode CameraView özelliğini sınıfındaki özelliğine FlashMode bağlamayı CameraViewModel içerir.

<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 geçerli kameradan yakalanan görüntüler için çözünürlüğü program aracılığıyla değiştirme olanağı sağlar.

Not

Bu, kameradan önizlemede görüntülenen çözünürlüğü değiştirmez.

Özelliği SelectedCamera , geçerli kameranın hangi çözünürlükleri desteklediğini SupportedResolutions belirlemeyi mümkün kılan özelliğini de sağlar.

Aşağıdaki örnekte uygulamaya nasıl bir Picker ekleneceği ve aşağıdaki bağlamaların nasıl ayarleneceği gösterilmektedir:

ItemsSource özelliğini özelliğine Picker SupportedResolutions SelectedCamera bağlayın.
öğesinin SelectedItem Picker özelliğini sınıfındaki SelectedResolution özelliğine CameraViewModel bağlayın.

Son değişiklik, öğesinin ImageCaptureResolution CameraView özelliğini sınıfındaki özelliğine SelectedResolution bağlamayı CameraViewModel içerir.

<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 bir görüntü yakalamayı program aracılığıyla tetikleyebilme olanağı sağlar. Bu, hem yöntemi CaptureImageCommandhem de CaptureImage aracılığıyla mümkündür.

Aşağıdaki örnekte uygulamaya nasıl bir Button ekleneceği ve aşağıdaki bağlamaların nasıl ayarleneceği gösterilmektedir:

Command özelliğini Button üzerindeki özelliğine CaptureImageCommand CameraViewbağlayın.

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

Not

Yakalanan CameraView görüntüyü kullanmak için olayı sağlar MediaCaptured .

Önizlemeyi başlatma

, CameraView kameradan program aracılığıyla önizlemeyi başlatma olanağı sağlar. Bu, hem yöntemi StartCameraPreviewCommandhem de StartCameraPreview aracılığıyla mümkündür.

Aşağıdaki örnekte uygulamaya nasıl bir Button ekleneceği ve aşağıdaki bağlamaların nasıl ayarleneceği gösterilmektedir:

Command özelliğini Button üzerindeki özelliğine StartCameraPreviewCommand CameraViewbağlayın.

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

Önizlemeyi durdur

, CameraView kameradan program aracılığıyla önizlemeyi durdurma olanağı sağlar. Bu, hem yöntemi StopCameraPreviewCommandhem de StopCameraPreview aracılığıyla mümkündür.

Aşağıdaki örnekte uygulamaya nasıl bir Button ekleneceği ve aşağıdaki bağlamaların nasıl ayarleneceği gösterilmektedir:

Command özelliğini Button üzerindeki özelliğine StopCameraPreviewCommand CameraViewbağlayın.

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

Örnekler

Bu özelliğin bir örneğini .NET MAUI Community Toolkit Örnek Uygulaması'nda çalışır durumda bulabilirsiniz.

API

üzerinde için CameraView kaynak kodunu .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.

Aracılığıyla paylaş

CameraView

Platforma özgü başlatma

Temel kullanım

XAML ad alanını dahil edin

Geçerli kameraya erişme

Yakınlaştırmayı Denetleme

Kamera Flash Modu

ImageCaptureResolution

CaptureImage

Önizlemeyi başlatma

Önizlemeyi durdur

Örnekler

API

Ek kaynaklar