0Pricing
Android Academy · Lección

Cómo mostrar una vista previa de la cámara

Configure una vista previa en directo

Cómo mostrar una vista previa de la cámara es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

Objetivo: una vista previa en directo

Lo primero que necesita casi cualquier aplicación de cámara es una vista previa en directo: una vista en tiempo real de lo que ve la cámara. En esta lección creará una pantalla de Compose que muestra la imagen de la cámara a pantalla completa.

Combinará tres elementos: un PreviewView, el caso de uso Preview y un ProcessCameraProvider vinculado.

Solicitud del permiso de cámara

Antes de mostrar una vista previa, necesita el permiso del usuario. En Compose, Accompanist (o la API oficial de permisos) facilita esta tarea mediante rememberPermissionState.

Inicie la cámara únicamente cuando el permiso tenga el estado 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.")
    }
}

Integración de PreviewView en Compose

PreviewView es un View clásico de Android, por lo que debe alojarlo dentro de Compose mediante AndroidView. La lambda factory crea la vista una vez y le proporciona una referencia que puede configurar.

Guarde la vista creada para poder conectarle la superficie de la cámara.

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

Obtención del LifecycleOwner

Para vincular la cámara necesita un LifecycleOwner. En Compose, puede obtener el actual mediante LocalLifecycleOwner.current y el contexto mediante LocalContext.current.

Ambos son necesarios para configurar el proveedor de la cámara y vincular los casos de uso.

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

Creación del caso de uso Preview

El caso de uso Preview transmite fotogramas a una superficie. Después de crearlo, conéctelo a su PreviewView llamando a setSurfaceProvider con el proveedor de superficie de la vista.

Este es el vínculo que hace que la imagen de la cámara aparezca realmente en pantalla.

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

Vinculación dentro de una corrutina

La obtención del proveedor es asíncrona, por lo que debe realizarse en una corrutina. Use LaunchedEffect vinculado a la vista para que se ejecute una vez. Dentro de él, espere al proveedor, desvincule cualquier elemento anterior y, después, vincule la vista previa.

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

La extensión await()

ProcessCameraProvider.getInstance() devuelve un ListenableFuture. La extensión await() de kotlinx-coroutines-guava suspende la ejecución hasta que se resuelve, convirtiendo el código basado en callbacks en código secuencial y limpio.

Agregue la dependencia org.jetbrains.kotlinx:kotlinx-coroutines-guava para utilizarla.

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.

Integración de todos los elementos

A continuación se muestra el composable completo de la vista previa. Observe el flujo: cree el PreviewView en factory, capture su referencia y, después, vincúlelo dentro de 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()
    )
}

Tipos de escalado

La relación de aspecto del sensor de la cámara rara vez coincide con la de su pantalla. PreviewView.ScaleType controla cómo se adapta la imagen a la vista:

  • FILL_CENTER: rellena la vista y recorta los bordes (es la opción más habitual).
  • FIT_CENTER: muestra el fotograma completo con bandas.

Elija FILL_CENTER para obtener una cámara inmersiva a pantalla completa.

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

Cambio de cámara

Para alternar entre la cámara frontal y la trasera, guarde el selector en el estado y vuelva a vincularlo cuando cambie. Como LaunchedEffect se ejecuta de nuevo cuando cambia una clave, solo tiene que incluir el selector como clave.

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.

Errores habituales

Dos errores provocan una vista previa en negro:

  • Olvidar setSurfaceProvider: los fotogramas no tienen dónde mostrarse.
  • No llamar a unbindAll() antes de volver a vincular: CameraX produce un error si un caso de uso se vincula dos veces.

Recuerde también que la vista previa no se iniciará hasta que el permiso se haya concedido realmente.

Comprobación rápida

Compruebe cuánto ha entendido de la configuración de la vista previa.

Resumen

Ha creado una vista previa de cámara en directo en Compose:

  • Solicite el permiso CAMERA antes de iniciar la cámara.
  • Aloje un PreviewView mediante AndroidView.
  • Espere al ProcessCameraProvider dentro de una corrutina.
  • Construya un Preview, llame a setSurfaceProvider, unbindAll() y, después, bindToLifecycle.

A continuación, agregará el caso de uso ImageCapture y tomará una foto real.

Preguntas frecuentes

¿La lección «Cómo mostrar una vista previa de la cámara» es gratis?

Sí — el texto completo de «Cómo mostrar una vista previa de la cámara» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Cómo mostrar una vista previa de la cámara»?

Configure una vista previa en directo Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Cómo mostrar una vista previa de la cámara»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Descripción general de CameraX
  2. Cómo mostrar una vista previa de la cámara
  3. Cómo tomar fotografías
  4. Grabación de vídeo
← Volver a Android Academy