Android Academy · Pelajaran

Menampilkan Pratinjau Kamera

Siapkan pratinjau langsung.

Menampilkan Pratinjau Kamera adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Tujuan: Pratinjau Langsung

Hal pertama yang dibutuhkan hampir semua aplikasi kamera adalah pratinjau langsung—tampilan waktu nyata dari apa yang dilihat kamera. Dalam pelajaran ini, Anda akan membuat layar Compose yang menampilkan umpan kamera dalam layar penuh.

Anda akan menggabungkan tiga bagian: PreviewView, kasus penggunaan Preview, dan ProcessCameraProvider yang telah diikat.

Meminta Izin Kamera

Sebelum menampilkan pratinjau, Anda memerlukan izin pengguna. Di Compose, Accompanist (atau API izin resmi) mempermudah hal ini dengan rememberPermissionState.

Mulai kamera hanya setelah izin berstatus granted.

@OptIn(ExperimentalPermissionsApi::class)
@Composable
fun CameraScreen() {
    val permission = rememberPermissionState(Manifest.permission.CAMERA)

    LaunchedEffect(Unit) { permission.launchPermissionRequest() }

    if (permission.status.isGranted) {
        CameraPreview()
    } else {
        Text("Camera permission is required.")
    }
}

Menyematkan PreviewView di Compose

PreviewView adalah View Android klasik, jadi Anda menampungnya di dalam Compose dengan AndroidView. Lambda factory membuat View satu kali dan memberi Anda referensi yang dapat dikonfigurasi.

Simpan View yang dibuat agar Anda dapat memasang permukaan kamera padanya.

@Composable
fun CameraPreview(modifier: Modifier = Modifier) {
    AndroidView(
        modifier = modifier.fillMaxSize(),
        factory = { context ->
            PreviewView(context).apply {
                scaleType = PreviewView.ScaleType.FILL_CENTER
            }
        }
    )
}

Mendapatkan LifecycleOwner

Untuk mengikat kamera, Anda memerlukan LifecycleOwner. Di Compose, Anda membaca komponen yang sedang digunakan dengan LocalLifecycleOwner.current, dan konteksnya dengan LocalContext.current.

Keduanya diperlukan untuk menyiapkan provider kamera dan mengikat kasus penggunaan.

val context = LocalContext.current
val lifecycleOwner = LocalLifecycleOwner.current

Membangun Kasus Penggunaan Pratinjau

Kasus penggunaan Preview mengalirkan bingkai ke sebuah permukaan. Setelah membuatnya, hubungkan ke PreviewView dengan memanggil setSurfaceProvider menggunakan provider permukaan milik View.

Inilah penghubung yang membuat gambar kamera benar-benar muncul di layar.

val preview = Preview.Builder().build()
preview.setSurfaceProvider(previewView.surfaceProvider)

Mengikat di Dalam Coroutine

Mendapatkan provider berlangsung secara asinkron, jadi lakukan di dalam coroutine. Gunakan LaunchedEffect yang dikaitkan dengan View agar dijalankan satu kali. Di dalamnya, tunggu provider, lepaskan apa pun yang sebelumnya terikat, lalu ikat pratinjau.

LaunchedEffect(previewView) {
    val cameraProvider = ProcessCameraProvider.getInstance(context).await()
    val preview = Preview.Builder().build().also {
        it.setSurfaceProvider(previewView.surfaceProvider)
    }
    cameraProvider.unbindAll()
    cameraProvider.bindToLifecycle(
        lifecycleOwner,
        CameraSelector.DEFAULT_BACK_CAMERA,
        preview
    )
}

Ekstensi await()

ProcessCameraProvider.getInstance() mengembalikan ListenableFuture. Ekstensi await() dari kotlinx-coroutines-guava menangguhkan eksekusi hingga hasil tersedia, sehingga kode callback menjadi kode berurutan yang rapi.

Tambahkan dependensi org.jetbrains.kotlinx:kotlinx-coroutines-guava untuk menggunakannya.

import kotlinx.coroutines.guava.await

// Without await you'd use a listener:
// future.addListener({ val provider = future.get() }, executor)
// await() makes it a single suspend call instead.

Menyatukan Semuanya

Berikut composable pratinjau lengkap. Perhatikan alurnya: buat PreviewView di factory, ambil referensinya, lalu lakukan pengikatan di dalam LaunchedEffect.

@Composable
fun CameraPreview(modifier: Modifier = Modifier) {
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current
    val previewView = remember { PreviewView(context) }

    LaunchedEffect(previewView) {
        val provider = ProcessCameraProvider.getInstance(context).await()
        val preview = Preview.Builder().build().also {
            it.setSurfaceProvider(previewView.surfaceProvider)
        }
        provider.unbindAll()
        provider.bindToLifecycle(
            lifecycleOwner,
            CameraSelector.DEFAULT_BACK_CAMERA,
            preview
        )
    }

    AndroidView(
        factory = { previewView },
        modifier = modifier.fillMaxSize()
    )
}

Jenis Penskalaan

Rasio aspek sensor kamera jarang sama dengan layar Anda. PreviewView.ScaleType mengatur cara umpan menyesuaikan diri dengan View:

FILL_CENTER—memenuhi View dan memotong tepinya (paling umum).
FIT_CENTER—menampilkan seluruh bingkai dengan bilah hitam.

Pilih FILL_CENTER untuk kamera layar penuh yang imersif.

previewView.scaleType = PreviewView.ScaleType.FILL_CENTER
// or
previewView.scaleType = PreviewView.ScaleType.FIT_CENTER

Beralih Kamera

Untuk beralih antara kamera depan dan belakang, simpan selector dalam state dan lakukan pengikatan ulang saat nilainya berubah. Karena LaunchedEffect dijalankan kembali saat kuncinya berubah, Anda cukup menyertakan selector sebagai kunci.

var selector by remember { mutableStateOf(CameraSelector.DEFAULT_BACK_CAMERA) }

LaunchedEffect(selector) {
    val provider = ProcessCameraProvider.getInstance(context).await()
    provider.unbindAll()
    provider.bindToLifecycle(lifecycleOwner, selector, preview)
}

// Flip button toggles 'selector' between front and back.

Kesalahan Umum

Dua kesalahan dapat menyebabkan pratinjau berwarna hitam:

Lupa memanggil setSurfaceProvider—bingkai tidak memiliki tujuan.
Tidak memanggil unbindAll() sebelum mengikat ulang—CameraX akan menghasilkan kesalahan jika kasus penggunaan diikat dua kali.

Ingat juga: pratinjau tidak akan dimulai sampai izin benar-benar diberikan.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang cara menghubungkan pratinjau.

Ringkasan

Anda telah membuat pratinjau kamera langsung di Compose:

Minta izin CAMERA sebelum memulai.
Gunakan AndroidView untuk menampung PreviewView.
Tunggu ProcessCameraProvider di dalam coroutine.
Buat Preview, panggil setSurfaceProvider, unbindAll(), lalu bindToLifecycle.

Selanjutnya, Anda akan menambahkan kasus penggunaan ImageCapture dan mengambil foto sungguhan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menampilkan Pratinjau Kamera” gratis?

Ya — teks lengkap “Menampilkan Pratinjau Kamera” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menampilkan Pratinjau Kamera”?

Siapkan pratinjau langsung. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menampilkan Pratinjau Kamera” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Ikhtisar CameraX
Menampilkan Pratinjau Kamera
Mengambil Foto
Merekam Video

← Kembali ke Android Academy