00017. [APP-00002] 사진 기반 식물/동물 인식 앱 개발기 #8

#8. 실시간 인식 모드 준비하기 (카메라 프리뷰 + 실시간 분석 기획)

이번 편에서는 앱의 궁극적인 목표 중 하나인 실시간 인식 기능의 기반을 마련해보자. 먼저 카메라를 켜고 프리뷰를 띄운 뒤, 주기적으로 이미지를 추출해서 인식 요청을 보내는 구조를 구상할 거야.

---

🎥 1단계: camera 패키지 설치

pubspec.yaml에 추가:

dependencies:
  camera: ^0.10.5+4
  path_provider: ^2.1.2

이후 flutter pub get 실행

---

🧩 2단계: 카메라 프리뷰 띄우기

lib/screens/realtime_screen.dart 생성:

import 'dart:io';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';

class RealtimeScreen extends StatefulWidget {
  const RealtimeScreen({super.key});

  @override
  State<RealtimeScreen> createState() => _RealtimeScreenState();
}

class _RealtimeScreenState extends State<RealtimeScreen> {
  CameraController? _controller;
  List<CameraDescription>? _cameras;

  @override
  void initState() {
    super.initState();
    _initCamera();
  }

  Future<void> _initCamera() async {
    _cameras = await availableCameras();
    _controller = CameraController(
      _cameras![0],
      ResolutionPreset.medium,
    );
    await _controller!.initialize();
    setState(() {});
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_controller == null || !_controller!.value.isInitialized) {
      return const Scaffold(body: Center(child: CircularProgressIndicator()));
    }

    return Scaffold(
      appBar: AppBar(title: const Text('실시간 식물 인식')),
      body: CameraPreview(_controller!),
    );
  }
}

참고: Android 권한 필요 → AndroidManifest.xml에 CAMERA 권한 추가

<uses-permission android:name="android.permission.CAMERA" />

---

🔄 3단계: 이미지 주기적 캡처 설계

camera 패키지는 .takePicture()로 이미지를 캡처할 수 있어. 아래와 같은 흐름으로 구성할 예정:

1. 카메라 프리뷰 실행
2. 일정 시간 간격(예: 5초)에 한 번씩 .takePicture()
3. 임시 파일을 Base64로 변환해 API에 전송
4. 결과가 있으면 화면에 오버레이로 표시

이 흐름은 다음 편에서 구체적인 구현으로 이어질 예정이야.

---

다음 에피소드 예고

#9. 실시간 인식 구현하기 (캡처 + 전송 + 결과 표시)

• 주기적 이미지 추출
• API 요청 및 결과 처리
• 식물 이름 오버레이 출력