Android Academy · Pelajaran

Memaparkan Pratonton Kamera

Sediakan pratonton langsung.

Pelajaran 2 daripada 413 langkah

Memaparkan Pratonton Kamera ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Matlamat: Pratonton Langsung

Perkara pertama yang diperlukan oleh hampir setiap aplikasi kamera ialah pratonton langsung — paparan masa nyata tentang perkara yang dilihat kamera. Dalam pelajaran ini, anda akan membina skrin Compose yang memaparkan suapan kamera sepenuh skrin.

Anda akan menggabungkan tiga komponen: PreviewView, kes penggunaan Preview dan ProcessCameraProvider yang telah diikat.

Meminta Kebenaran Kamera

Sebelum memaparkan pratonton, anda memerlukan kebenaran pengguna. Dalam Compose, Accompanist (atau API kebenaran rasmi) memudahkan perkara ini dengan rememberPermissionState.

Mulakan kamera hanya selepas kebenaran diberikan, iaitu apabila 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.")
    }
}

Membenamkan PreviewView dalam Compose

PreviewView ialah View Android klasik, jadi anda mengehoskannya di dalam Compose menggunakan AndroidView. Lambda factory mencipta paparan sekali dan memberikan rujukan yang boleh anda konfigurasikan.

Simpan paparan yang dicipta supaya anda boleh menyambungkan permukaan kamera kepadanya.

@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. Dalam Compose, anda membaca yang semasa dengan LocalLifecycleOwner.current, dan konteks dengan LocalContext.current.

Kedua-duanya diperlukan untuk menyediakan penyedia kamera dan mengikat kes penggunaan.

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

Membina Kes Penggunaan Pratonton

Kes penggunaan Preview menyalurkan bingkai ke permukaan. Selepas membinanya, anda menyambungkannya kepada PreviewView dengan memanggil setSurfaceProvider menggunakan penyedia permukaan paparan.

Inilah pautan yang menyebabkan imej kamera benar-benar muncul pada skrin.

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

Mengikat di Dalam Coroutine

Mendapatkan penyedia dilakukan secara tak segerak, jadi lakukan dalam coroutine. Gunakan LaunchedEffect yang terikat pada paparan supaya ia berjalan sekali. Di dalamnya, tunggu penyedia, nyahikat apa-apa yang terdahulu, kemudian ikat pratonton.

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

Sambungan await()

ProcessCameraProvider.getInstance() mengembalikan ListenableFuture. Sambungan await() daripada kotlinx-coroutines-guava menggantung pelaksanaan sehingga ia selesai, lalu menukar kod panggilan balik kepada kod berjujukan yang kemas.

Tambahkan kebergantungan 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.

Menggabungkan Semuanya

Berikut ialah komponen boleh gubah pratonton yang lengkap. Perhatikan alirannya: cipta PreviewView dalam factory, dapatkan rujukannya, kemudian ikat 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 Skala

Nisbah bidang penderia kamera jarang sepadan dengan skrin anda. PreviewView.ScaleType mengawal cara suapan disesuaikan dengan paparan:

  • FILL_CENTER — memenuhi paparan dengan memangkas tepi (paling biasa).
  • FIT_CENTER — memaparkan keseluruhan bingkai dengan bar hitam.

Pilih FILL_CENTER untuk kamera sepenuh skrin yang mengasyikkan.

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

Bertukar Kamera

Untuk bertukar antara kamera depan dan belakang, simpan pemilih dalam keadaan dan ikat semula apabila ia berubah. Oleh sebab LaunchedEffect berjalan semula apabila kuncinya berubah, anda hanya perlu memasukkan pemilih 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.

Perangkap Lazim

Dua kesilapan menyebabkan pratonton hitam:

  • Terlupa setSurfaceProvider — bingkai tidak mempunyai tempat untuk dihantar.
  • Tidak memanggil unbindAll() sebelum mengikat semula — CameraX akan menghasilkan ralat jika kes penggunaan diikat dua kali.

Ingat juga: pratonton tidak akan bermula sehingga kebenaran benar-benar diberikan.

Semakan Pantas

Semak pemahaman anda tentang penyediaan pratonton.

Ringkasan

Anda telah membina pratonton kamera langsung dalam Compose:

  • Minta kebenaran CAMERA sebelum memulakan kamera.
  • Hoskan PreviewView dengan AndroidView.
  • Tunggu ProcessCameraProvider dalam coroutine.
  • Bina Preview, panggil setSurfaceProvider, unbindAll(), kemudian bindToLifecycle.

Seterusnya, anda akan menambahkan kes penggunaan ImageCapture dan mengambil foto sebenar.

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
36
Pelajaran
152

Soalan Lazim

Adakah pelajaran “Memaparkan Pratonton Kamera” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Memaparkan Pratonton Kamera”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Memaparkan Pratonton Kamera”?

Sediakan pratonton langsung. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Memaparkan Pratonton Kamera” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Gambaran Keseluruhan CameraX
  2. Memaparkan Pratonton Kamera
  3. Mengambil Foto
  4. Merakam Video
← Kembali ke Android Academy