Panduan
Cara menggunakan Camera Preview di Capacitor
Menggunakan @capgo/camera-preview
Antarmuka utama untuk plugin CameraPreview.
Instal
bun add @capgo/camera-preview
bunx cap sync
bunx cap sync menyalin code native plugin ke dalam proyek native Anda. Jalankan kembali setiap kali melakukan upgrade plugin.
Impor
import { CameraPreview } from '@capgo/camera-preview';
Sekilas tentang API
| Metode | Deskripsi |
|---|---|
start |
Memulai camera preview. |
stop |
Menghentikan camera preview. |
capture |
Mengambil foto dari kamera. |
captureSample |
Mengambil satu frame dari stream camera preview. |
startBarcodeScanner |
Memulai pemindaian barcode pada camera preview yang aktif. |
stopBarcodeScanner |
Menghentikan pemindaian barcode sambil tetap menjalankan camera preview. |
getSupportedFlashModes |
Mendapatkan mode flash yang didukung oleh kamera aktif. |
setAspectRatio |
Mengatur aspect ratio camera preview. |
getAspectRatio |
Mendapatkan aspect ratio camera preview saat ini. |
setGridMode |
Mengatur mode grid pada overlay camera preview. |
getGridMode |
Mendapatkan mode grid overlay camera preview saat ini. |
checkPermissions |
Mengecek status izin kamera (dan mikrofon, opsional) saat ini tanpa memunculkan dialog sistem. |
requestPermissions |
Meminta izin kamera (dan mikrofon opsional). Jika izin sudah diberikan atau ditolak, status saat ini akan dikembalikan tanpa prompt. Jika showSettingsAlert jika bernilai true dan izin ditolak, peringatan khusus platform akan muncul untuk mengarahkan pengguna ke pengaturan aplikasi. |
getHorizontalFov |
Mendapatkan horizontal field of view (FoV) untuk kamera yang aktif. Catatan: Ini bisa berupa estimasi pada beberapa perangkat. |
getSupportedPictureSizes |
Mendapatkan ukuran foto yang didukung untuk semua kamera. |
setFlashMode |
Mengatur mode flash untuk kamera yang aktif. |
flip |
Beralih antara kamera depan dan belakang. |
setOpacity |
Mengatur opasitas preview kamera. |
stopRecordVideo |
Menghentikan rekaman video yang sedang berjalan. |
startRecordVideo |
Memulai rekaman video. |
setVideoQuality |
Mengatur kualitas rekaman video untuk sesi kamera yang aktif. |
getVideoQuality |
Mendapatkan kualitas rekaman video saat ini. |
getSupportedVideoQualities |
Mengembalikan kualitas video yang didukung oleh kamera aktif. |
setVideoCodec |
Mengatur video codec yang digunakan saat merekam. |
getVideoCodec |
Mendapatkan video codec yang sedang digunakan untuk merekam. |
getSupportedVideoCodecs |
Mengembalikan video codec yang didukung oleh kamera aktif. |
isVideoStabilizationSupported |
Memeriksa apakah stabilisasi video didukung oleh kamera aktif. |
getSupportedVideoStabilizationModes |
Mengembalikan mode stabilisasi video yang didukung kamera aktif. |
getVideoStabilizationMode |
Mendapatkan mode stabilisasi video saat ini. |
setVideoStabilizationMode |
Mengatur mode stabilisasi video saat merekam. Tidak dapat diubah saat proses rekaman sedang berjalan. Anda juga dapat mengirimkan videoStabilizationMode di startRecordVideo() opsi. |
isRunning |
Memeriksa apakah preview kamera sedang berjalan. |
getAvailableDevices |
Mengambil semua perangkat kamera yang tersedia. |
getZoom |
Mendapatkan status zoom saat ini, termasuk min/max dan info lensa saat ini. |
getZoomButtonValues |
Mengembalikan nilai tombol zoom untuk perpindahan cepat. - iOS/Android: menyertakan 0.5 jika ultra-wide tersedia; 1 dan 2 jika wide tersedia; 3 jika telephoto tersedia - Web: tidak didukung. |
setZoom |
Mengatur level zoom kamera. |
getFlashMode |
Mendapatkan mode flash saat ini. |
setDeviceId |
Mengalihkan kamera aktif ke kamera dengan spesifikasi tertentu deviceId. |
getDeviceId |
Mendapatkan ID perangkat kamera yang sedang terhubung. Pada Android, jika permintaan lensa fisik beralih ke kamera logis, ini akan mengembalikan ID kamera logis yang terhubung. |
getPreviewSize |
Mendapatkan ukuran dan posisi preview saat ini. |
setPreviewSize |
Mengatur ukuran dan posisi preview. |
setFocus |
Mengatur fokus kamera ke titik tertentu pada preview. |
deleteFile |
Menghapus file pada path absolut tertentu di perangkat. Gunakan ini untuk membersihkan gambar sementara yang dibuat dengan storeToFile. Pada web, fitur ini tidak didukung dan akan memunculkan error. |
getSafeAreaInsets |
Mendapatkan safe area insets untuk perangkat. Mengembalikan inset notch/cutout kamera sesuai orientasi dan orientasi saat ini. Dalam mode portrait: mengembalikan top inset (notch di atas). Dalam mode landscape: mengembalikan left inset (notch di samping). Ini khusus menargetkan area cutout (notch, punch hole, dll.) yang ada pada semua ponsel modern. |
getOrientation |
Mendapatkan orientasi perangkat saat ini dalam format lintas platform. |
getExposureModes |
Mengembalikan mode eksposur yang didukung oleh kamera aktif. Mode dapat berupa: 'locked', 'auto', 'continuous', 'custom'. |
getExposureMode |
Mengembalikan mode eksposur saat ini. |
setExposureMode |
Mengatur mode eksposur. |
getExposureCompensationRange |
Mengembalikan rentang kompensasi eksposur (EV bias) yang didukung. |
getExposureCompensation |
Mengembalikan kompensasi eksposur (EV bias) saat ini. |
setExposureCompensation |
Mengatur kompensasi eksposur (EV bias). Nilai akan dibatasi sesuai rentang. |
getWhiteBalanceModes |
Mengembalikan mode white-balance yang didukung oleh kamera aktif. Mode dapat berupa: 'AUTO', 'LOCK', 'CONTINUOUS'. CUSTOM tidak terdaftar sampai dukungan manual gains diimplementasikan. |
getWhiteBalanceMode |
Mengembalikan mode white-balance saat ini. |
setWhiteBalanceMode |
Mengatur mode white-balance. CONTINUOUS menjaga auto white balance tetap berjalan (direkomendasikan; menghindari efek warna hangat/kuning), LOCK membekukan gain saat ini, AUTO melakukan penyesuaian satu kali. CUSTOM direservasi dan akan ditolak sampai dukungan manual gain diimplementasikan. |
getSupportedVideoFrameRates |
Menampilkan daftar frame rate video yang didukung oleh kamera aktif untuk format saat ini. Nilai yang didukung bergantung pada kamera, lensa, dan kualitas video yang dipilih. |
getVideoFrameRate |
Mengembalikan konfigurasi video frame rate untuk kamera aktif. Pada Android, frame rate rekaman aktual masih bisa bervariasi dalam kondisi minim cahaya atau saat terjadi thermal pressure. |
setVideoFrameRate |
Mengatur target video frame rate untuk sesi kamera aktif. Disarankan untuk mengirimkan frameRate ke startRecordVideo() saat memulai rekaman. Menolak nilai yang tidak didukung dengan pesan error yang jelas. |
Contoh
start()
Memulai camera preview.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.start({ parent: 'parent' });
console.log(result);
stop()
Menghentikan camera preview.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();
capture()
Mengambil foto dari kamera.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.capture({ height: 1920 });
console.log(result);
captureSample()
Mengambil satu frame dari stream camera preview.
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.captureSample({
quality: 85,
mirrorFrontCamera: false,
});
console.log(result);
startBarcodeScanner()
Memulai pemindaian barcode pada camera preview yang aktif.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startBarcodeScanner();
stopBarcodeScanner()
Menghentikan pemindaian barcode sambil tetap menjalankan camera preview.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopBarcodeScanner();
Tabel di atas mencantumkan 56 metode inti. Dokumentasi untuk listener, helper versi, serta kontrak lengkap dari setiap metode tersedia di repositori GitHub.
Mendengarkan event
addListener mengembalikan sebuah handle. Panggil handle.remove() saat layar di-unmount, atau CameraPreview.removeAllListeners() untuk menghapus semua listener.
Referensi lengkap
Lanjutkan dari Menggunakan @capgo/camera-preview
Jika Anda menggunakan Menggunakan @capgo/camera-preview untuk merencanakan perilaku media dan antarmuka native, hubungkan dengan @capgo/camera-preview untuk detail implementasi di @capgo/camera-preview, Panduan Memulai untuk detail implementasi di Getting Started, Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, dan Menggunakan @capgo/capacitor-video-player untuk kapabilitas native saat menggunakan @capgo/capacitor-video-player.