Android Academy · Lektion

Eine Kameravorschau anzeigen

Eine Live-Vorschau einrichten

Eine Kameravorschau anzeigen ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Ziel: Eine Live-Vorschau

Das Erste, was fast jede Kamera-App benötigt, ist eine Live-Vorschau – eine Echtzeitansicht dessen, was die Kamera sieht. In dieser Lektion erstellen Sie einen Compose-Bildschirm, der das Kamerabild bildschirmfüllend anzeigt.

Sie kombinieren drei Bestandteile: eine PreviewView, den Anwendungsfall Preview und einen gebundenen ProcessCameraProvider.

Kameraberechtigung anfordern

Bevor Sie eine Vorschau anzeigen können, benötigen Sie die Berechtigung der Person. In Compose erleichtert Accompanist (oder die offizielle Permissions API) dies mit rememberPermissionState.

Starten Sie die Kamera erst, sobald der Status granted lautet.

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

PreviewView ist eine klassische Android-View. Daher binden Sie sie mit AndroidView in Compose ein. Die Lambda-Funktion factory erstellt die View einmalig und stellt Ihnen eine Referenz bereit, die Sie konfigurieren können.

Speichern Sie die erstellte View, damit Sie die Kameraoberfläche daran anhängen können.

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

LifecycleOwner abrufen

Um die Kamera zu binden, benötigen Sie einen LifecycleOwner. In Compose lesen Sie den aktuellen Owner mit LocalLifecycleOwner.current und den Kontext mit LocalContext.current aus.

Beide werden benötigt, um den Camera-Provider einzurichten und die Anwendungsfälle zu binden.

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

Den Preview-Anwendungsfall erstellen

Der Anwendungsfall Preview streamt Einzelbilder an eine Oberfläche. Nach dem Erstellen verbinden Sie ihn mit Ihrer PreviewView, indem Sie setSurfaceProvider mit dem Surface-Provider der View aufrufen.

Diese Verbindung sorgt dafür, dass das Kamerabild tatsächlich auf dem Bildschirm erscheint.

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

Innerhalb einer Coroutine binden

Das Abrufen des Providers erfolgt asynchron, daher sollten Sie dies in einer Coroutine durchführen. Verwenden Sie LaunchedEffect, das an die View gebunden ist, damit der Code einmal ausgeführt wird. Warten Sie darin auf den Provider, heben Sie zunächst alle vorherigen Bindungen auf und binden Sie anschließend die Vorschau.

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

Die Erweiterung await()

ProcessCameraProvider.getInstance() gibt ein ListenableFuture zurück. Die Erweiterung await() aus kotlinx-coroutines-guava hält die Ausführung an, bis das Future aufgelöst wird, und verwandelt Callback-Code in klaren, sequenziellen Code.

Fügen Sie die Abhängigkeit org.jetbrains.kotlinx:kotlinx-coroutines-guava hinzu, um sie zu verwenden.

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 zusammenführen

Hier ist das vollständige Preview-Composable. Beachten Sie den Ablauf: Erstellen Sie die PreviewView in factory, übernehmen Sie sie und binden Sie sie anschließend innerhalb von 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()
    )
}

Skalierungstypen

Das Seitenverhältnis des Kamerasensors stimmt nur selten mit dem Ihres Bildschirms überein. PreviewView.ScaleType legt fest, wie das Kamerabild in die View eingepasst wird:

FILL_CENTER – füllt die View aus und schneidet dabei die Ränder ab (am häufigsten).
FIT_CENTER – zeigt das vollständige Bild mit Balken an.

Wählen Sie FILL_CENTER für eine immersive, bildschirmfüllende Kameraansicht.

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

Kameras wechseln

Um zwischen Front- und Rückkamera zu wechseln, speichern Sie den Selektor im State und binden Sie ihn bei Änderungen erneut. Da LaunchedEffect bei einer Änderung seines Schlüssels erneut ausgeführt wird, müssen Sie den Selektor lediglich als Schlüssel angeben.

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.

Häufige Fehler

Zwei Fehler führen zu einer schwarzen Vorschau:

setSurfaceProvider wird vergessen – die Einzelbilder haben kein Ziel.
unbindAll() wird vor einer erneuten Bindung nicht aufgerufen – CameraX löst eine Ausnahme aus, wenn ein Anwendungsfall zweimal gebunden wird.

Denken Sie außerdem daran: Die Vorschau startet erst, wenn die Berechtigung tatsächlich erteilt wurde.

Kurze Überprüfung

Überprüfen Sie Ihr Verständnis für die Einrichtung der Vorschau.

Zusammenfassung

Sie haben in Compose eine Live-Kameravorschau erstellt:

Fordern Sie vor dem Start die Berechtigung CAMERA an.
Binden Sie eine PreviewView mit AndroidView ein.
Warten Sie in einer Coroutine auf den ProcessCameraProvider.
Erstellen Sie ein Preview, rufen Sie setSurfaceProvider und unbindAll() auf und verwenden Sie anschließend bindToLifecycle.

Als Nächstes fügen Sie den Anwendungsfall ImageCapture hinzu und nehmen ein echtes Foto auf.

Häufig gestellte Fragen

Ist die Lektion „Eine Kameravorschau anzeigen“ kostenlos?

Ja — der vollständige Text von „Eine Kameravorschau anzeigen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eine Kameravorschau anzeigen“?

Eine Live-Vorschau einrichten Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Eine Kameravorschau anzeigen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy