Android Academy · Ders

Kamera Önizlemesi Gösterme

Canlı önizlemeyi bağlayın.

Kamera Önizlemesi Gösterme, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Hedef: Canlı Önizleme

Neredeyse her kamera uygulamasının ihtiyaç duyduğu ilk şey canlı önizlemedir — kameranın gördüklerinin gerçek zamanlı görüntüsü. Bu derste kamera görüntü akışını tam ekran gösteren bir Compose ekranı oluşturacaksınız.

Üç parçayı birleştireceksiniz: bir PreviewView, Preview kullanım senaryosu ve bağlanmış bir ProcessCameraProvider.

Kamera İznini İsteme

Önizlemeyi gösterebilmeniz için önce kullanıcının iznine ihtiyacınız vardır. Compose'da Accompanist (veya resmî izin API'si), rememberPermissionState ile bu işlemi kolaylaştırır.

Kamerayı yalnızca izin granted olduktan sonra başlatın.

@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.")
    }
}

PreviewView'ı Compose'a Gömme

PreviewView klasik bir Android View olduğundan onu Compose içinde AndroidView ile barındırırsınız. factory lambda'sı görünümü bir kez oluşturur ve yapılandırabileceğiniz bir başvuru sağlar.

Kameranın yüzeyini bu görünüme bağlayabilmek için oluşturulan görünümü saklayın.

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

LifecycleOwner'ı Alma

Kamerayı bağlamak için bir LifecycleOwner'a ihtiyacınız vardır. Compose'da mevcut olanı LocalLifecycleOwner.current ile, bağlamı ise LocalContext.current ile alırsınız.

Kamera sağlayıcısını kurmak ve kullanım senaryolarını bağlamak için ikisi de gereklidir.

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

Preview Kullanım Senaryosunu Oluşturma

Preview kullanım senaryosu, kareleri bir yüzeye aktarır. Oluşturduktan sonra görünümün yüzey sağlayıcısını setSurfaceProvider ile vererek onu PreviewView'ınıza bağlarsınız.

Kamera görüntüsünün gerçekten ekranda görünmesini sağlayan bağlantı budur.

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

Bir İş Birimi İçinde Bağlama

Sağlayıcının alınması eşzamansız olduğundan bu işlemi bir iş birimi içinde yapın. Görünüme bağlı bir kez çalışacak şekilde LaunchedEffect kullanın. İçinde sağlayıcıyı bekleyin, önceki tüm bağlantıları kaldırın, ardından önizlemeyi bağlayın.

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

await() Uzantısı

ProcessCameraProvider.getInstance() bir ListenableFuture döndürür. kotlinx-coroutines-guava içindeki await() uzantısı, sonuç çözülene kadar bekler ve geri çağırma kodunu temiz, sıralı bir koda dönüştürür.

Kullanmak için org.jetbrains.kotlinx:kotlinx-coroutines-guava bağımlılığını ekleyin.

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.

Her Şeyi Birleştirme

İşte önizlemeyi oluşturan bileşimin tamamı. Akışa dikkat edin: factory içinde PreviewView'ı oluşturun, onu alın, ardından LaunchedEffect içinde bağlayın.

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

Ölçek Türleri

Kamera sensörünün en-boy oranı ekranınızla nadiren aynıdır. PreviewView.ScaleType, görüntü akışının görünüme nasıl sığacağını belirler:

FILL_CENTER — kenarları kırparak görünümü doldurur (en yaygın seçenek).
FIT_CENTER — tüm kareyi kenarlarda boşluk bırakarak gösterir.

Sürükleyici, tam ekran bir kamera için FILL_CENTER seçin.

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

Kameralar Arasında Geçiş Yapma

Ön ve arka kamera arasında geçiş yapmak için seçiciyi durumda saklayın ve değiştiğinde yeniden bağlayın. LaunchedEffect bir anahtar değiştiğinde yeniden çalıştığından seçiciyi anahtar olarak eklemeniz yeterlidir.

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.

Yaygın Hatalar

Siyah bir önizlemeye iki hata neden olur:

setSurfaceProvider çağrısını unutmak — karelerin gönderileceği bir yer kalmaz.
Yeniden bağlamadan önce unbindAll() çağırmamak — bir kullanım senaryosu iki kez bağlanırsa CameraX hata verir.

Ayrıca şunu unutmayın: önizleme, izin gerçekten verilene kadar başlamaz.

Kısa Kontrol

Önizlemeyi bağlama işlemini anlayıp anlamadığınızı kontrol edin.

Özet

Compose'da canlı bir kamera önizlemesi oluşturdunuz:

Başlatmadan önce CAMERA iznini isteyin.
Bir PreviewView'ı AndroidView ile barındırın.
Bir iş birimi içinde ProcessCameraProvider sonucunu bekleyin.
Bir Preview oluşturun, setSurfaceProvider çağrısını yapın, unbindAll() çağırın ve ardından bindToLifecycle kullanın.

Sırada ImageCapture kullanım senaryosunu ekleyip gerçek bir fotoğraf çekeceksiniz.

Sıkça Sorulan Sorular

“Kamera Önizlemesi Gösterme” dersi ücretsiz mi?

Evet — “Kamera Önizlemesi Gösterme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“Kamera Önizlemesi Gösterme” dersinde ne öğreneceğim?

Canlı önizlemeyi bağlayın. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Kamera Önizlemesi Gösterme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön