Android Academy · Les

Een cameravoorbeeld tonen

Sluit een live voorbeeld aan.

Les 2 van 413 stappen

Een cameravoorbeeld tonen is een gratis Android Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Android Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Android Academy bevat in totaal 4 lessen.

Doel: een livevoorbeeld

Het eerste wat bijna elke camera-app nodig heeft, is een livevoorbeeld — een realtimeweergave van wat de camera ziet. In deze les bouw je een Compose-scherm dat de camerabeelden schermvullend toont.

Je combineert drie onderdelen: een PreviewView, het gebruiksscenario Preview en een gekoppelde ProcessCameraProvider.

Toestemming voor de camera aanvragen

Voordat je een voorbeeld kunt tonen, heb je toestemming van de gebruiker nodig. In Compose maakt Accompanist (of de officiële API voor toestemmingen) dit eenvoudig met rememberPermissionState.

Start de camera pas zodra de toestemming granted is.

@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 insluiten in Compose

PreviewView is een klassieke Android-View, dus je host deze in Compose met AndroidView. De lambda factory maakt de weergave één keer aan en geeft je een verwijzing die je kunt configureren.

Sla de aangemaakte weergave op, zodat je het cameraoppervlak eraan kunt koppelen.

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

De LifecycleOwner ophalen

Om de camera te koppelen heb je een LifecycleOwner nodig. In Compose lees je de huidige eigenaar uit met LocalLifecycleOwner.current en de context met LocalContext.current.

Je hebt beide nodig om de cameraprovider in te stellen en gebruiksscenario's te koppelen.

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

Het gebruiksscenario Preview bouwen

Het gebruiksscenario Preview streamt frames naar een oppervlak. Nadat je het hebt gebouwd, verbind je het met je PreviewView door setSurfaceProvider aan te roepen met de surface provider van de weergave.

Dit is de verbinding waardoor het camerabeeld daadwerkelijk op het scherm verschijnt.

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

Koppelen binnen een coroutine

Het ophalen van de provider gebeurt asynchroon, dus doe dit in een coroutine. Gebruik LaunchedEffect, gekoppeld aan de weergave, zodat het één keer wordt uitgevoerd. Wacht daarin op de provider, ontkoppel eerdere koppelingen en koppel vervolgens het voorbeeld.

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

De await()-extensie

ProcessCameraProvider.getInstance() retourneert een ListenableFuture. De await()-extensie uit kotlinx-coroutines-guava pauzeert totdat de future is opgelost en zet callbackcode om in duidelijke opeenvolgende code.

Voeg de afhankelijkheid org.jetbrains.kotlinx:kotlinx-coroutines-guava toe om deze te gebruiken.

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.

Alles samenvoegen

Hier is de volledige composable voor het voorbeeld. Let op de stappen: maak de PreviewView aan in factory, sla deze op en koppel hem vervolgens binnen 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()
    )
}

Schaaltypen

De beeldverhouding van de camerasensor komt zelden overeen met die van je scherm. PreviewView.ScaleType bepaalt hoe de camerabeelden in de weergave passen:

FILL_CENTER — vul de weergave en snijd de randen bij (het meest gebruikelijk).
FIT_CENTER — toon het volledige beeld met balken aan de zijkanten of boven- en onderkant.

Kies FILL_CENTER voor een meeslepende schermvullende camera.

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

Van camera wisselen

Als je wilt wisselen tussen de camera aan de voor- en achterzijde, sla je de selector op in de status en koppel je opnieuw wanneer deze verandert. Omdat LaunchedEffect opnieuw wordt uitgevoerd wanneer een sleutel verandert, hoef je de selector alleen als sleutel op te nemen.

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.

Veelvoorkomende valkuilen

Twee fouten veroorzaken een zwart voorbeeld:

setSurfaceProvider vergeten — frames hebben dan geen bestemming.
unbindAll() niet aanroepen voordat je opnieuw koppelt — CameraX geeft een fout als een gebruiksscenario twee keer is gekoppeld.

Onthoud ook dat het voorbeeld pas start nadat de toestemming daadwerkelijk is verleend.

Korte controle

Controleer je begrip van het verbinden van het voorbeeld.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt een live cameravoorbeeld gebouwd in Compose:

Vraag de toestemming CAMERA aan voordat je start.
Host een PreviewView met AndroidView.
Wacht in een coroutine op de ProcessCameraProvider.
Bouw een Preview, roep setSurfaceProvider en unbindAll() aan en gebruik daarna bindToLifecycle.

Vervolgens voeg je het gebruiksscenario ImageCapture toe en maak je een echte foto.

Gratis beginnen

Leer Kotlin met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 36
Lessen: 152

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Een cameravoorbeeld tonen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Een cameravoorbeeld tonen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Android Academy bevat in totaal 4 lessen.

Wat leer ik in “Een cameravoorbeeld tonen”?

Sluit een live voorbeeld aan. Je oefent met Android Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Android Academy te beginnen?

Ervaring vooraf is niet nodig. Android Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Een cameravoorbeeld tonen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Android Academy?

Ja. Elke les over Android Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Android Academy