Tampilan Kamera

Komponen ini menyediakan kemampuan untuk terhubung ke kamera, menampilkan pratinjau dari kamera, mengambil foto, dan merekam video. Ini CameraView juga menawarkan fitur untuk mendukung pengontrol flash dan obor, menyesuaikan zoom, 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. ditetapkan sebagai BindingContext dari contoh CameraViewPage.

Inisialisasi yang spesifik untuk platform

CameraView adalah bagian dari paket NuGet CommunityToolkit.Maui.Camera. Untuk menggunakan CameraView pertama kali, 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" />

Jika Anda berencana merekam video, minta izin Mikrofon:

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

Ini harus ditambahkan di dalam elemen <manifest>. 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" />

    <!--Optional. Only for video recording-->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

</manifest>

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

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

Jika Anda berencana merekam video, minta izin Mikrofon:

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

Ini harus ditambahkan di dalam elemen <dict>. 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>

    <key>NSMicrophoneUsageDescription</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>

Jika Anda berencana merekam video, minta izin Mikrofon:

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

Ini harus ditambahkan di dalam elemen <dict>. 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>

    <key>NSMicrophoneUsageDescription</key>
    <string>PROVIDE YOUR REASON HERE</string>
</dict>
</plist>

Detail selengkapnya dapat ditemukan di sini: https://developer.apple.com/documentation/avfoundation/requesting-authorization-to-capture-and-save-media

Penggunaan dasar

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

Meminta izin

Pengembang harus secara manual meminta izin kamera dan/atau izin mikrofon.

var cameraPermissionsRequest = await Permissions.RequestAsync<Permissions.Camera>();

Jika Anda berencana merekam video, minta izin Mikrofon:

var microphonePermissionsRequest = await Permissions.RequestAsync<Permissions.Microphone>();

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 properti dari SelectedCamera ke properti pada CameraView dengan nama yang sama (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}" />
    </Grid>

</ContentPage>

Kontrol Zoom

Properti SelectedCamera ini menyediakan baik MinimumZoomFactor maupun MaximumZoomFactor sebagai properti yang bersifat hanya-baca, yang memberi pengembang cara terprogram untuk menentukan zoom apa yang dapat diterapkan ke kamera saat ini. Untuk mengubah zoom di kamera saat ini, CameraView menyediakan properti ZoomFactor.

Catatan

Jika sebuah nilai disediakan di luar MinimumZoomFactor dan MaximumZoomFactor, maka CameraView akan menjepit nilai tersebut untuk menyimpannya dalam batas.

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

Ikat properti Maximum dari Slider ke MaximumZoomFactor dari properti SelectedCamera.
Ikat properti Minimum dari Slider ke MinimumZoomFactor dari properti SelectedCamera.
Hubungkan properti Value dari Slider ke properti CurrentZoom pada kelas CameraViewModel.

Perubahan akhir melibatkan pengikatan properti ZoomFactor dari CameraView ke properti CurrentZoom pada kelas 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>

Mode Lampu Kilat Kamera

CameraView memberikan kemampuan untuk mengubah mode flash perangkat secara terprogram, dengan 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 properti IsVisible dari Picker ke IsFlashSupported dari properti SelectedCamera.
Ikat properti ItemsSource dari Picker ke properti FlashModes pada kelas CameraViewModel - daftar sederhana kemungkinan nilai dari enum CameraFlashMode.
Hubungkan properti SelectedItem dari Picker ke properti FlashMode pada kelas CameraViewModel.

Perubahan akhir melibatkan pengikatan properti CameraFlashMode dari CameraView ke properti FlashMode pada kelas 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>

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 properti ItemsSource dari Picker ke SupportedResolutions dari properti SelectedCamera.
Hubungkan properti SelectedItem dari Picker ke properti SelectedResolution pada kelas CameraViewModel.

Perubahan akhir melibatkan pengikatan properti ImageCaptureResolution dari CameraView ke properti SelectedResolution pada kelas 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}"
            ImageCaptureResolution="{Binding SelectedResolution}" />

        <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 menyediakan kemampuan untuk memicu pengambilan gambar melalui pemrograman. Ini dimungkinkan melalui baik metode CaptureImage atau CaptureImageCommand.

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

Ikat properti Command dari Button ke properti CaptureImageCommand 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 menyediakan MediaCaptured acara.

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);
    }
}

Perekaman Video

CameraView memberikan kemampuan untuk merekam video. Ini dimungkinkan melalui baik metode StartVideoRecording atau StartVideoRecordingCommand.

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

Ikat properti Command dari Button ke properti StartVideoRecordingCommand 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 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>

Catatan

Anda harus menyediakan aliran yang lancar untuk merekam video.

Contoh berikut menunjukkan cara menggunakan StartVideoRecording metode :

Catatan

Kode C# di bawah ini menggunakan bidang Kamera yang ditentukan di atas dalam XAML (<toolkit:CameraView x:Name="Camera" />)

async void StartCameraRecordingWithCustomStream(object? sender, EventArgs e)
{
    using var threeSecondVideoRecordingStream = new FileStream("recording.mp4", FileMode.Create);
    await Camera.StartVideoRecording(threeSecondVideoRecordingStream, CancellationToken.None);

    await Task.Delay(TimeSpan.FromSeconds(3));
    
    await Camera.StopVideoRecording(CancellationToken.None);
    await FileSaver.SaveAsync("recording.mp4", threeSecondVideoRecordingStream);
}

Jika Anda ingin merekam video pendek dan merekam video di MemoryStream, Anda dapat menggunakan overloading metode VideoRecording berikutnya.

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);
}

Mulai pratinjau

CameraView menyediakan kemampuan untuk memulai pratinjau dari kamera secara programatik. Ini dimungkinkan melalui baik metode StartCameraPreview atau StartCameraPreviewCommand.

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

Ikat properti Command dari Button ke properti StartCameraPreviewCommand 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="Start Preview" />
    </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

CameraView memberikan kemampuan untuk menghentikan pratinjau dari kamera secara terprogram. Ini dimungkinkan melalui baik metode StopCameraPreview atau StopCameraPreviewCommand.

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

Ikat properti Command dari Button ke properti StopCameraPreviewCommand 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="Start Preview" />

        <Button
            Grid.Column="2"
            Grid.Row="2"
            Command="{Binding StopCameraPreviewCommand, Source={x:Reference Camera}}"
            Text="Stop Preview" />
    </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);
    }
}

Karakteristik

Harta benda	Tipe	Deskripsi	Nilai Bawaan
`CameraFlashMode`	`CameraFlashMode`	Mendapatkan atau mengatur mode lampu kilat untuk kamera. Ini adalah properti yang dapat diikat.	`CameraFlashMode.Off`
`ImageCaptureResolution`	`Size`	Mendapatkan atau mengatur resolusi untuk pengambilan gambar. Tidak memengaruhi resolusi pratinjau. Ini adalah properti yang dapat diikat.	`Size.Zero`
`IsAvailable`	`bool`	Mengecek apakah kamera tersedia pada gawai. Ini adalah properti yang dapat diikat baca-saja.	`false`
`IsBusy`	`bool`	Mendapatkan apakah kamera saat ini sibuk (misalnya menangkap gambar atau rekaman). Ini adalah properti yang dapat diikat baca-saja.	`false`
`IsTorchOn`	`bool`	Mendapatkan atau mengatur apakah lampu kilat (senter) kamera diaktifkan. Ini adalah properti yang dapat diikat.	`false`
`SelectedCamera`	`CameraInfo?`	Mendapatkan atau menyetel perangkat kamera yang saat ini dipilih. Ini adalah properti yang dapat diikat dengan pengikatan dua arah.	`null`
`ZoomFactor`	`float`	Mendapatkan atau mengatur faktor zoom kamera. Nilai secara otomatis dibatasi sesuai dengan `MinimumZoomFactor` dan `MaximumZoomFactor` pada kamera yang dipilih. Ini adalah properti yang dapat diikat.	`1f`

Perintah

Perintah	Parameter Perintah	Deskripsi
`CaptureImageCommand`	—	Mengaktifkan pengambilan gambar. Gambar yang diambil dikembalikan dalam acara `MediaCaptured`.
`StartCameraPreviewCommand`	—	Memulai tampilan pratinjau kamera.
`StartVideoRecordingCommand`	`Stream` (pilihan)	Memulai perekaman video. Secara opsional, lewatkan `Stream` untuk merekam.
`StopCameraPreviewCommand`	—	Menghentikan tampilan pratinjau kamera.
`StopVideoRecordingCommand`	—	Menghentikan perekaman video dan mengembalikan aliran yang direkam.

Events

Event	Tipe	Deskripsi
`MediaCaptured`	`EventHandler<MediaCapturedEventArgs>`	Dimunculkan ketika gambar berhasil diambil. `MediaCapturedEventArgs` berisi properti `Media` dari jenis `Stream` yang berisi data gambar yang diambil.
`MediaCaptureFailed`	`EventHandler<MediaCaptureFailedEventArgs>`	Dimunculkan saat pengambilan gambar gagal. `MediaCaptureFailedEventArgs` berisi sebuah properti `FailureReason` yang berisi pesan kesalahan.

Metode

Metode	Tipe Pengembalian	Deskripsi
`CaptureImage(CancellationToken)`	`Task`	Mengambil satu gambar dari kamera. Hasilnya disampaikan melalui `MediaCaptured` acara.
`GetAvailableCameras(CancellationToken)`	`ValueTask<IReadOnlyList<CameraInfo>>`	Mengambil daftar perangkat kamera yang tersedia pada perangkat.
`StartCameraPreview(CancellationToken)`	`Task`	Mulai menampilkan pratinjau kamera.
`StartVideoRecording(CancellationToken)`	`Task`	Mulai merekam video ke penyimpanan internal `MemoryStream`.
`StartVideoRecording(Stream, CancellationToken)`	`Task`	Mulai merekam video ke destinasi yang ditentukan `Stream`.
`StopCameraPreview()`	`void`	Berhenti menampilkan pratinjau kamera.
`StopVideoRecording(CancellationToken)`	`Task<Stream>`	Menghentikan perekaman video dan mengembalikan yang direkam `Stream`.

CameraInfo

Kelas CameraInfo mewakili informasi tentang perangkat kamera yang tersedia pada sistem.

Harta benda	Tipe	Deskripsi
`DeviceId`	`string`	Pengidentifikasi unik perangkat kamera.
`IsFlashSupported`	`bool`	Apakah kamera mendukung flash.
`MaximumZoomFactor`	`float`	Faktor zoom maksimum yang didukung.
`MinimumZoomFactor`	`float`	Faktor zoom minimum yang didukung.
`Name`	`string`	Nama perangkat kamera.
`Position`	`CameraPosition`	Posisi fisik kamera pada perangkat (`Front`, , `Rear`atau `Unknown`).
`SupportedResolutions`	`IReadOnlyList<Size>`	Daftar resolusi yang didukung oleh kamera untuk pengambilan gambar.

CameraFlashMode

CameraFlashMode Enum menentukan mode lampu kilat yang tersedia.

Nilai	Deskripsi
`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.

PosisiKamera

CameraPosition Enum mendefinisikan kemungkinan posisi fisik kamera pada perangkat.

Nilai	Deskripsi
`Unknown`	Posisi kamera tidak diketahui.
`Front`	Kamera berada di bagian depan perangkat (menghadap pengguna).
`Rear`	Kamera berada di bagian belakang perangkat (menghadap jauh dari pengguna).

Contoh

Anda dapat menemukan contoh fitur ini secara langsung di Aplikasi Sampel Toolkit Komunitas .NET MAUI.

API

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

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-03-18

Tampilan Kamera

Inisialisasi yang spesifik untuk platform

Penggunaan dasar

Meminta izin

Menyertakan namespace XAML

Mengakses kamera saat ini

Kontrol Zoom

Mode Lampu Kilat Kamera

ResolusiPengambilanGambar

CaptureImage

Perekaman Video

Mulai pratinjau

Hentikan pratinjau

Karakteristik

Perintah

Events

Metode

CameraInfo

CameraFlashMode

PosisiKamera

Contoh

API

Saran dan Komentar

Sumber Daya Tambahan: