CameraView

menyediakan CameraView kemampuan untuk terhubung ke kamera, menampilkan pratinjau dari kamera dan mengambil foto. Ini CameraView juga menawarkan fitur untuk mendukung pengambilan foto, mengontrol flash, menyimpan media yang diambil ke file, dan menawarkan kait yang berbeda untuk peristiwa.

Bagian berikut akan secara bertahap dibangun berdasarkan cara menggunakan CameraView dalam aplikasi .NET MAUI. Mereka mengandalkan penggunaan CameraViewModel. yang akan ditetapkan sebagai BindingContext contoh CameraViewPage.

Inisialisasi khusus platform

adalah CameraView bagian CommunityToolkit.Maui.Camera dari paket nuget. Untuk terlebih dahulu CameraView menggunakan, silakan merujuk ke bagian Memulai . Penyiapan khusus platform berikut diperlukan.

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

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

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

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

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

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

Penggunaan dasar

CameraView dapat ditambahkan ke aplikasi .NET MAUI dengan cara berikut.

Menyertakan namespace XAML

Untuk menggunakan toolkit di XAML, hal berikut xmlns perlu ditambahkan ke halaman atau tampilan Anda:

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

Oleh karena itu hal-hal berikut:

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

Akan dimodifikasi untuk menyertakan xmlns sebagai berikut:

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

Hasilnya akan menjadi permukaan yang merender output kamera default yang terhubung ke perangkat.

Mengakses kamera saat ini

Properti SelectedCamera ini menyediakan kemampuan untuk mengakses kamera yang saat ini dipilih.

Contoh berikut menunjukkan cara mengikat SelectedCamera properti dari ke CameraView properti pada CameraViewModel dengan nama yang sama (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>

Perbesar Kontrol

Properti SelectedCamera ini menyediakan MinimumZoomFactor properti dan MaximumZoomFactor , ini bersifat baca-saja dan memberi pengembang cara terprogram untuk menentukan zoom apa yang dapat diterapkan ke kamera saat ini. Untuk mengubah zoom pada kamera saat ini, CameraView properti menyediakan ZoomFactor .

Contoh berikut menunjukkan cara menambahkan Slider ke dalam aplikasi dan menyiapkan pengikatan berikut:

• Ikat Maximum properti ke Slider MaximumZoomFactor SelectedCamera properti .
• Ikat Minimum properti ke Slider MinimumZoomFactor SelectedCamera properti .
• Ikat Value properti ke Slider CurrentZoom properti di CameraViewModel kelas .

Perubahan akhir melibatkan pengikatan ZoomFactor properti ke CameraView CurrentZoom properti di CameraViewModel kelas .

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

Mode Lampu Kilat Kamera

menyediakan CameraView kemampuan untuk mengubah mode flash secara terprogram pada perangkat, opsi yang mungkin adalah:

• Off- lampu kilat mati dan tidak akan digunakan.
• On - lampu kilat menyala dan akan selalu digunakan.
• Auto - lampu kilat akan secara otomatis digunakan berdasarkan kondisi pencahayaan.

Properti SelectedCamera ini juga menyediakan IsFlashSupported yang memungkinkan untuk menentukan apakah kamera yang saat ini dipilih memiliki lampu kilat yang dapat dikontrol.

Contoh berikut menunjukkan cara menambahkan Picker ke dalam aplikasi dan menyiapkan pengikatan berikut:

• Ikat IsVisible properti ke Picker IsFlashSupported SelectedCamera properti .
• Ikat ItemsSource properti ke Picker FlashModes properti di CameraViewModel kelas - daftar sederhana dari kemungkinan nilai CameraFlashMode enum.
• Ikat SelectedItem properti ke Picker FlashMode properti di CameraViewModel kelas .

Perubahan akhir melibatkan pengikatan CameraFlashMode properti ke CameraView FlashMode properti di CameraViewModel kelas .

<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

memberikan CameraView kemampuan untuk mengubah resolusi secara terprogram untuk gambar yang diambil dari kamera saat ini.

Properti SelectedCamera ini juga menyediakan SupportedResolutions yang memungkinkan untuk menentukan resolusi mana yang didukung kamera saat ini.

Contoh berikut menunjukkan cara menambahkan Picker ke dalam aplikasi dan menyiapkan pengikatan berikut:

• Ikat ItemsSource properti ke Picker SupportedResolutions SelectedCamera properti .
• Ikat SelectedItem properti ke Picker SelectedResolution properti di CameraViewModel kelas .

Perubahan akhir melibatkan pengikatan ImageCaptureResolution properti ke CameraView SelectedResolution properti di CameraViewModel kelas .

<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

menyediakan CameraView kemampuan untuk memicu pengambilan gambar secara terprogram. Ini dimungkinkan CaptureImage CaptureImageCommandmelalui metode atau .

Contoh berikut menunjukkan cara menambahkan Button ke dalam aplikasi dan menyiapkan pengikatan berikut:

• Ikat Command properti ke Button CaptureImageCommand properti pada 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>

Mulai pratinjau

menyediakan CameraView kemampuan untuk memulai pratinjau secara terprogram dari kamera. Ini dimungkinkan StartCameraPreview StartCameraPreviewCommandmelalui metode atau .

Contoh berikut menunjukkan cara menambahkan Button ke dalam aplikasi dan menyiapkan pengikatan berikut:

• Ikat Command properti ke Button StartCameraPreviewCommand properti pada 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>

Hentikan pratinjau

menyediakan CameraView kemampuan untuk menghentikan pratinjau secara terprogram dari kamera. Ini dimungkinkan StopCameraPreview StopCameraPreviewCommandmelalui metode atau .

Contoh berikut menunjukkan cara menambahkan Button ke dalam aplikasi dan menyiapkan pengikatan berikut:

• Ikat Command properti ke Button StopCameraPreviewCommand properti pada 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>

Contoh

Anda dapat menemukan contoh fitur ini dalam tindakan di Aplikasi Sampel Toolkit Komunitas .NET MAUI.

API

Anda dapat menemukan kode sumber untuk CameraView lebih pada repositori GitHub .NET MAUI Community Toolkit.