0Pricing
Android Academy · Leçon

Afficher un aperçu de la caméra

Mettez en place un aperçu en direct.

Afficher un aperçu de la caméra est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Objectif : un aperçu en direct

La première chose dont presque toute application de caméra a besoin est un aperçu en direct : une vue en temps réel de ce que voit la caméra. Dans cette leçon, vous allez créer un écran Compose qui affiche le flux de la caméra en plein écran.

Vous combinerez trois éléments : une PreviewView, le cas d’utilisation Preview et un ProcessCameraProvider lié.

Demande de l’autorisation d’utiliser la caméra

Avant d’afficher un aperçu, vous devez obtenir l’autorisation de l’utilisateur. Dans Compose, Accompanist (ou l’API officielle des autorisations) simplifie cette opération avec rememberPermissionState.

Ne démarrez la caméra qu’une fois l’autorisation 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.")
    }
}

Intégration de PreviewView dans Compose

PreviewView est une View Android classique ; vous l’hébergez donc dans Compose avec AndroidView. La lambda factory crée la vue une seule fois et vous fournit une référence que vous pouvez configurer.

Stockez la vue créée afin de pouvoir lui associer la surface de la caméra.

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

Obtention du LifecycleOwner

Pour lier la caméra, vous avez besoin d’un LifecycleOwner. Dans Compose, vous récupérez celui qui est actif avec LocalLifecycleOwner.current, et le contexte avec LocalContext.current.

Les deux sont nécessaires pour configurer le fournisseur de caméra et lier les cas d’utilisation.

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

Création du cas d’utilisation Preview

Le cas d’utilisation Preview transmet les images à une surface. Après l’avoir créé, vous le reliez à votre PreviewView en appelant setSurfaceProvider avec le fournisseur de surface de la vue.

C’est ce lien qui permet réellement à l’image de la caméra d’apparaître à l’écran.

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

Liaison dans une coroutine

L’obtention du fournisseur est asynchrone ; effectuez-la donc dans une coroutine. Utilisez LaunchedEffect lié à la vue afin qu’il s’exécute une seule fois. À l’intérieur, attendez le fournisseur, déliez les éléments précédents, puis liez l’aperçu.

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’extension await()

ProcessCameraProvider.getInstance() renvoie un ListenableFuture. L’extension await() de kotlinx-coroutines-guava suspend l’exécution jusqu’à sa résolution et transforme le code basé sur des rappels en code séquentiel clair.

Ajoutez la dépendance org.jetbrains.kotlinx:kotlinx-coroutines-guava pour l’utiliser.

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.

Assemblage des éléments

Voici le composable complet de l’aperçu. Observez le déroulement : créez la PreviewView dans factory, récupérez-la, puis effectuez la liaison dans 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()
    )
}

Types de mise à l’échelle

Le format du capteur de la caméra correspond rarement à celui de votre écran. PreviewView.ScaleType contrôle la façon dont le flux s’adapte à la vue :

  • FILL_CENTER — remplit la vue en rognant les bords (le plus courant).
  • FIT_CENTER — affiche l’intégralité de l’image avec des bandes.

Choisissez FILL_CENTER pour une caméra immersive en plein écran.

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

Changement de caméra

Pour passer de la caméra avant à la caméra arrière, ou inversement, stockez le sélecteur dans l’état et effectuez une nouvelle liaison lorsqu’il change. Comme LaunchedEffect s’exécute à nouveau lorsque sa clé change, il vous suffit d’inclure le sélecteur comme clé.

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.

Erreurs fréquentes

Deux erreurs provoquent un aperçu noir :

  • Oublier setSurfaceProvider : les images n’ont nulle part où être envoyées.
  • Ne pas appeler unbindAll() avant une nouvelle liaison : CameraX lève une erreur si un cas d’utilisation est lié deux fois.

N’oubliez pas non plus que l’aperçu ne démarrera que lorsque l’autorisation aura réellement été accordée.

Vérification rapide

Vérifiez votre compréhension de la mise en place de l’aperçu.

Récapitulatif

Vous avez créé un aperçu de caméra en direct dans Compose :

  • Demandez l’autorisation CAMERA avant de démarrer.
  • Hébergez une PreviewView avec AndroidView.
  • Attendez le ProcessCameraProvider dans une coroutine.
  • Créez un Preview, appelez setSurfaceProvider, unbindAll(), puis bindToLifecycle.

Ensuite, vous ajouterez le cas d’utilisation ImageCapture et prendrez une vraie photo.

Questions Fréquemment Posées

La leçon « Afficher un aperçu de la caméra » est-elle gratuite ?

Oui — le texte complet de « Afficher un aperçu de la caméra » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Afficher un aperçu de la caméra » ?

Mettez en place un aperçu en direct. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Afficher un aperçu de la caméra » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Présentation de CameraX
  2. Afficher un aperçu de la caméra
  3. Prendre des photos
  4. Enregistrer une vidéo
← Retour à Android Academy