0Pricing
Android Academy · Lekcja

Wyświetlanie podglądu z aparatu

Skonfiguruj podgląd obrazu na żywo

Wyświetlanie podglądu z aparatu to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Cel: podgląd na żywo

Pierwszą funkcją potrzebną niemal każdej aplikacji aparatu jest podgląd na żywo — obraz w czasie rzeczywistym pokazujący to, co widzi aparat. W tej lekcji zbudujesz ekran Compose wyświetlający obraz z aparatu na całym ekranie.

Połączysz trzy elementy: PreviewView, przypadek użycia Preview oraz powiązany ProcessCameraProvider.

Żądanie uprawnienia do aparatu

Zanim wyświetlisz podgląd, potrzebujesz uprawnienia użytkownika. W Compose Accompanist (lub oficjalne API uprawnień) ułatwia to za pomocą rememberPermissionState.

Uruchamiaj aparat dopiero wtedy, gdy uprawnienie ma stan 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.")
    }
}

Osadzanie PreviewView w Compose

PreviewView to klasyczny obiekt Androida typu View, dlatego umieszczasz go w Compose za pomocą AndroidView. Lambda factory tworzy widok raz i udostępnia odwołanie, które możesz skonfigurować.

Zapisz utworzony widok, aby móc podłączyć do niego powierzchnię aparatu.

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

Pobieranie LifecycleOwner

Aby powiązać aparat, potrzebujesz obiektu LifecycleOwner. W Compose odczytasz bieżący obiekt za pomocą LocalLifecycleOwner.current, a kontekst za pomocą LocalContext.current.

Oba elementy są potrzebne do skonfigurowania providera aparatu i powiązania przypadków użycia.

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

Budowanie przypadku użycia Preview

Przypadek użycia Preview przesyła klatki na powierzchnię. Po jego zbudowaniu połącz go z obiektem PreviewView, wywołując setSurfaceProvider i przekazując provider powierzchni widoku.

To połączenie sprawia, że obraz z aparatu rzeczywiście pojawia się na ekranie.

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

Powiązywanie wewnątrz korutyny

Uzyskanie providera jest operacją asynchroniczną, dlatego wykonaj ją w korutynie. Użyj LaunchedEffect powiązanego z widokiem, aby kod wykonał się raz. Wewnątrz poczekaj na providera, odepnij wcześniejsze elementy, a następnie powiąż podgląd.

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

Rozszerzenie await()

ProcessCameraProvider.getInstance() zwraca obiekt ListenableFuture. Rozszerzenie await() z biblioteki kotlinx-coroutines-guava wstrzymuje wykonanie do momentu rozwiązania przyszłości, zamieniając kod oparty na callbackach w przejrzysty kod sekwencyjny.

Dodaj zależność org.jetbrains.kotlinx:kotlinx-coroutines-guava, aby z niej korzystać.

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.

Łączenie wszystkiego

Oto kompletny composable podglądu. Zwróć uwagę na kolejność: utwórz PreviewView w factory, przechwyć go, a następnie wykonaj powiązanie wewnątrz 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()
    )
}

Typy skalowania

Proporcje obrazu matrycy aparatu rzadko odpowiadają proporcjom ekranu. PreviewView.ScaleType określa sposób dopasowania obrazu do widoku:

  • FILL_CENTER — wypełnia widok, przycinając krawędzie (najczęściej stosowane).
  • FIT_CENTER — pokazuje całą klatkę z pasami po bokach lub u góry i dołu.

Wybierz FILL_CENTER dla immersyjnego aparatu na całym ekranie.

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

Przełączanie aparatów

Aby przełączać aparat przedni i tylny, przechowuj selektor w stanie i ponownie wykonuj powiązanie po jego zmianie. Ponieważ LaunchedEffect uruchamia się ponownie po zmianie klucza, wystarczy uwzględnić selektor jako klucz.

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.

Typowe problemy

Dwa błędy powodują wyświetlanie czarnego podglądu:

  • Brak setSurfaceProvider — klatki nie mają dokąd trafić.
  • Brak wywołania unbindAll() przed ponownym powiązaniem — CameraX zgłasza błąd, jeśli przypadek użycia zostanie powiązany dwukrotnie.

Pamiętaj również, że podgląd nie uruchomi się, dopóki uprawnienie nie zostanie faktycznie przyznane.

Szybkie sprawdzenie

Sprawdź, czy rozumiesz, jak skonfigurować podgląd.

Podsumowanie

Zbudowałeś podgląd aparatu na żywo w Compose:

  • Poproś o uprawnienie CAMERA przed uruchomieniem aparatu.
  • Umieść PreviewView za pomocą AndroidView.
  • Poczekaj w korutynie na ProcessCameraProvider.
  • Zbuduj Preview, wywołaj setSurfaceProvider, unbindAll(), a następnie bindToLifecycle.

W następnej części dodasz przypadek użycia ImageCapture i zrobisz prawdziwe zdjęcie.

Często zadawane pytania

Czy lekcja „Wyświetlanie podglądu z aparatu” jest bezpłatna?

Tak — pełny tekst „Wyświetlanie podglądu z aparatu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wyświetlanie podglądu z aparatu”?

Skonfiguruj podgląd obrazu na żywo Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wyświetlanie podglądu z aparatu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Przegląd CameraX
  2. Wyświetlanie podglądu z aparatu
  3. Robienie zdjęć
  4. Nagrywanie wideo
← Powrót do Android Academy