0Pricing
Android Academy · Aula

Exibindo uma prévia da câmera

Configure uma prévia ao vivo.

Exibindo uma prévia da câmera é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Objetivo: uma visualização ao vivo

A primeira coisa de que quase todo aplicativo de câmera precisa é uma visualização ao vivo — uma exibição em tempo real do que a câmera vê. Nesta lição, você criará uma tela Compose que mostra a transmissão da câmera em tela inteira.

Você combinará três elementos: uma PreviewView, o caso de uso Preview e um ProcessCameraProvider associado.

Solicitando a permissão da câmera

Antes de mostrar uma visualização, você precisa da permissão do usuário. No Compose, o Accompanist (ou a API oficial de permissões) facilita isso com rememberPermissionState.

Inicie a câmera somente depois que a permissão estiver 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.")
    }
}

Incorporando a PreviewView ao Compose

A PreviewView é uma View clássica do Android, portanto você a hospeda dentro do Compose com AndroidView. A lambda factory cria a visualização uma vez e fornece uma referência que você pode configurar.

Armazene a visualização criada para poder associar a superfície da câmera a ela.

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

Obtendo o LifecycleOwner

Para associar a câmera, você precisa de um LifecycleOwner. No Compose, leia o atual com LocalLifecycleOwner.current e o contexto com LocalContext.current.

Ambos são necessários para configurar o provedor da câmera e associar os casos de uso.

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

Criando o caso de uso Preview

O caso de uso Preview transmite quadros para uma superfície. Depois de criá-lo, conecte-o à sua PreviewView chamando setSurfaceProvider com o provedor de superfície da visualização.

Essa é a ligação que faz a imagem da câmera aparecer de fato na tela.

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

Associando dentro de uma corrotina

Obter o provedor é uma operação assíncrona, portanto faça isso em uma corrotina. Use LaunchedEffect vinculado à visualização para que o código seja executado uma vez. Dentro dele, aguarde o provedor, desassocie tudo o que existia anteriormente e, em seguida, associe a visualização.

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

A extensão await()

ProcessCameraProvider.getInstance() retorna um ListenableFuture. A extensão await() de kotlinx-coroutines-guava suspende a execução até que ele seja resolvido, transformando o código baseado em callbacks em um código sequencial limpo.

Adicione a dependência org.jetbrains.kotlinx:kotlinx-coroutines-guava para usá-la.

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.

Juntando tudo

Aqui está o componente composable completo da visualização. Observe o fluxo: crie a PreviewView em factory, capture-a e, depois, associe-a 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 dimensionamento

A proporção do sensor da câmera raramente corresponde à da sua tela. PreviewView.ScaleType controla como a transmissão se ajusta à visualização:

  • FILL_CENTER — preenche a visualização, cortando as bordas (o mais comum).
  • FIT_CENTER — mostra o quadro inteiro com barras laterais.

Escolha FILL_CENTER para uma câmera imersiva em tela inteira.

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

Alternando entre câmeras

Para alternar entre a câmera frontal e a traseira, armazene o seletor no estado e faça a associação novamente quando ele mudar. Como LaunchedEffect é executado novamente quando uma chave muda, basta incluir o seletor como chave.

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.

Erros comuns

Dois erros causam uma visualização preta:

  • Esquecer setSurfaceProvider — os quadros não terão para onde ir.
  • Não chamar unbindAll() antes de associar novamente — a CameraX gera um erro se um caso de uso for associado duas vezes.

Lembre-se também: a visualização não será iniciada até que a permissão seja realmente concedida.

Verificação rápida

Verifique sua compreensão sobre como configurar a visualização.

Recapitulação

Você criou uma visualização da câmera ao vivo no Compose:

  • Solicite a permissão CAMERA antes de iniciar.
  • Hospede uma PreviewView com AndroidView.
  • Aguarde o ProcessCameraProvider em uma corrotina.
  • Crie um Preview, chame setSurfaceProvider, unbindAll() e, depois, bindToLifecycle.

Em seguida, você adicionará o caso de uso ImageCapture e tirará uma foto real.

Perguntas Frequentes

A aula “Exibindo uma prévia da câmera” é grátis?

Sim — o texto completo de “Exibindo uma prévia da câmera” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Exibindo uma prévia da câmera”?

Configure uma prévia ao vivo. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Exibindo uma prévia da câmera”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Visão geral do CameraX
  2. Exibindo uma prévia da câmera
  3. Tirando fotos
  4. Gravando vídeo
← Voltar para Android Academy