Android Academy · Lezione

Mostrare un'anteprima della fotocamera

Configuri un'anteprima in tempo reale

Lezione 2 di 413 passaggi

Mostrare un'anteprima della fotocamera è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 4 lezioni in totale.

Obiettivo: un'anteprima dal vivo

La prima funzionalità di cui ha bisogno quasi ogni app per fotocamera è una anteprima dal vivo: una visualizzazione in tempo reale di ciò che vede la fotocamera. In questa lezione creerà una schermata Compose che mostra il flusso della fotocamera a schermo intero.

Combinerà tre elementi: una PreviewView, il caso d'uso Preview e un ProcessCameraProvider associato.

Richiesta dell'autorizzazione per la fotocamera

Prima di mostrare un'anteprima, ha bisogno dell'autorizzazione dell'utente. In Compose, Accompanist (o l'API ufficiale per le autorizzazioni) semplifica questa operazione con rememberPermissionState.

Avvii la fotocamera solo quando l'autorizzazione è 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.")
    }
}

Incorporamento di PreviewView in Compose

PreviewView è una View Android classica, quindi la inserisca in Compose con AndroidView. La lambda factory crea la vista una sola volta e fornisce un riferimento che può configurare.

Conservi la vista creata per poter collegare a essa la superficie della fotocamera.

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

Recupero del LifecycleOwner

Per associare la fotocamera ha bisogno di un LifecycleOwner. In Compose recuperi quello corrente con LocalLifecycleOwner.current e il contesto con LocalContext.current.

Entrambi sono necessari per configurare il provider della fotocamera e associare i casi d'uso.

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

Creazione del caso d'uso Preview

Il caso d'uso Preview trasmette i fotogrammi a una superficie. Dopo averlo creato, lo colleghi alla PreviewView chiamando setSurfaceProvider con il provider della superficie della vista.

Questo collegamento fa sì che l'immagine della fotocamera appaia effettivamente sullo schermo.

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

Associazione all'interno di una coroutine

Il recupero del provider è asincrono, quindi lo esegua in una coroutine. Usi LaunchedEffect associato alla vista, in modo che venga eseguito una sola volta. Al suo interno attenda il provider, annulli eventuali associazioni precedenti, quindi associ l'anteprima.

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

L'estensione await()

ProcessCameraProvider.getInstance() restituisce un ListenableFuture. L'estensione await() di kotlinx-coroutines-guava sospende l'esecuzione finché non viene risolto, trasformando il codice basato su callback in codice sequenziale pulito.

Aggiunga la dipendenza org.jetbrains.kotlinx:kotlinx-coroutines-guava per utilizzarla.

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.

Assemblaggio dei componenti

Ecco il composable completo per l'anteprima. Noti il flusso: crei la PreviewView in factory, ne acquisisca il riferimento, quindi associ tutto all'interno di 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()
    )
}

Tipi di ridimensionamento

Il rapporto d'aspetto del sensore della fotocamera raramente coincide con quello dello schermo. PreviewView.ScaleType controlla il modo in cui il flusso si adatta alla vista:

FILL_CENTER — riempie la vista ritagliando i bordi (il caso più comune).
FIT_CENTER — mostra l'intero fotogramma aggiungendo bande.

Scelga FILL_CENTER per una fotocamera immersiva a schermo intero.

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

Passaggio da una fotocamera all'altra

Per passare dalla fotocamera anteriore a quella posteriore e viceversa, conservi il selettore nello stato e ripeta l'associazione quando cambia. Poiché LaunchedEffect viene rieseguito quando cambia una chiave, Le basta includere il selettore come chiave.

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.

Problemi comuni

Due errori causano un'anteprima nera:

Dimenticare setSurfaceProvider: i fotogrammi non hanno una destinazione.
Non chiamare unbindAll() prima di una nuova associazione: CameraX genera un'eccezione se un caso d'uso viene associato due volte.

Ricordi inoltre che l'anteprima non si avvia finché l'autorizzazione non è stata effettivamente concessa.

Verifica rapida

Verifichi la Sua comprensione della configurazione dell'anteprima.

Rispondi nella lezione interattiva

Riepilogo

Ha creato un'anteprima dal vivo della fotocamera in Compose:

Richieda l'autorizzazione CAMERA prima dell'avvio.
Inserisca una PreviewView con AndroidView.
Attenda il ProcessCameraProvider in una coroutine.
Crei una Preview, chiami setSurfaceProvider, unbindAll(), quindi bindToLifecycle.

Nella prossima lezione aggiungerà il caso d'uso ImageCapture e scatterà una vera foto.

Gratis per iniziare

Impara Kotlin con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 36
Lezioni: 152

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Mostrare un'anteprima della fotocamera» è gratuita?

Sì — il testo completo di «Mostrare un'anteprima della fotocamera» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 4 lezioni in totale.

Cosa imparerò in «Mostrare un'anteprima della fotocamera»?

Configuri un'anteprima in tempo reale Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Mostrare un'anteprima della fotocamera»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Panoramica di CameraX
Mostrare un'anteprima della fotocamera
Scattare foto
Registrare video

← Torna a Android Academy