Tampilan Kamera

2025-06-11

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.

Izin berikut perlu ditambahkan ke Platforms/Android/AndroidManifest.xml file:

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

Ini harus ditambahkan di <manifest> dalam elemen . Di bawah ini menunjukkan contoh yang lebih lengkap:

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

Entri berikut perlu ditambahkan ke Platforms/iOS/Info.plist file:

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

Ini harus ditambahkan di <dict> dalam elemen . Di bawah ini menunjukkan contoh yang lebih lengkap:

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

Entri berikut perlu ditambahkan ke Platforms/MacCatalyst/Info.plist file:

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

Ini harus ditambahkan di <dict> dalam elemen . Di bawah ini menunjukkan contoh yang lebih lengkap:

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

Catatan

Jika nilai disediakan di luar MinimumZoomFactor dan MaximumZoomFactorCameraView akan menjepit nilai untuk menyimpannya dalam batas.

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

Ikat Maximum properti ke SliderMaximumZoomFactorSelectedCamera properti .
Ikat Minimum properti ke SliderMinimumZoomFactorSelectedCamera properti .
Ikat Value properti ke SliderCurrentZoom properti di CameraViewModel kelas .

Perubahan akhir melibatkan pengikatan ZoomFactor properti ke CameraViewCurrentZoom 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 PickerIsFlashSupportedSelectedCamera properti .
Ikat ItemsSource properti ke PickerFlashModes properti di CameraViewModel kelas - daftar sederhana dari kemungkinan nilai CameraFlashMode enum.
Ikat SelectedItem properti ke PickerFlashMode properti di CameraViewModel kelas .

Perubahan akhir melibatkan pengikatan CameraFlashMode properti ke CameraViewFlashMode 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>

ResolusiPengambilanGambar

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

Catatan

Ini tidak akan mengubah resolusi yang ditampilkan dalam pratinjau dari kamera.

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 PickerSupportedResolutionsSelectedCamera properti .
Ikat SelectedItem properti ke PickerSelectedResolution properti di CameraViewModel kelas .

Perubahan akhir melibatkan pengikatan ImageCaptureResolution properti ke CameraViewSelectedResolution 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 CaptureImageCaptureImageCommandmelalui metode atau .

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

Ikat Command properti ke ButtonCaptureImageCommand 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>

Catatan

Untuk menggunakan gambar yang telah diambil, CameraView berikan MediaCaptured peristiwa.

Contoh berikut menunjukkan cara menggunakan CaptureImage metode :

Catatan

Kode C# di bawah ini menggunakan bidang Kamera yang ditentukan di atas dalam 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);
    }
}

Mulai pratinjau

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

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

Ikat Command properti ke ButtonStartCameraPreviewCommand 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>

Contoh berikut menunjukkan cara menggunakan StartCameraPreview metode :

Catatan

Kode C# di bawah ini menggunakan bidang Kamera yang ditentukan di atas dalam 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);
    }
}

Hentikan pratinjau

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

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

Ikat Command properti ke ButtonStopCameraPreviewCommand 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 berikut menunjukkan cara menggunakan StopCameraPreview metode :

Catatan

Kode C# di bawah ini menggunakan bidang Kamera yang ditentukan di atas dalam 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);
    }
}

Contoh

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

Antarmuka Pemrograman Aplikasi (API)

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

Bagikan melalui

Tampilan Kamera

Inisialisasi khusus platform

Penggunaan dasar

Menyertakan namespace XAML

Mengakses kamera saat ini

Perbesar Kontrol

Mode Lampu Kilat Kamera

ResolusiPengambilanGambar

CaptureImage

Mulai pratinjau

Hentikan pratinjau

Contoh

Antarmuka Pemrograman Aplikasi (API)

Saran dan Komentar

Sumber Daya Tambahan: