미카 프로젝트

Camera를 활용한 기능을 만들고 싶을때가 많은데요.

그럴때를 대비해서 하나 예제를 만들어 두었습니다.

먼저 pubspec.yaml에 camera pacakge를 import 합니다.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  camera:
  get: ^4.6.5

아래 코드를 프로젝트에 추가합니다. 

getx 기반으로 작성된 코드입니다.

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

class TakePhotoPage extends StatefulWidget{



  @override
  State<TakePhotoPage> createState() => _TakePhotoPageState();

  const TakePhotoPage({super.key});
}

class _TakePhotoPageState extends State<TakePhotoPage> {
  late final List<CameraDescription>cameras ;

  CameraController? _controller;
  late var _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    availableCamera();

  }
  void availableCamera() async{
    cameras = await availableCameras();
    if(cameras.isEmpty) return;

    setState(() {
      _controller = CameraController(cameras[0], ResolutionPreset.high);
      _initializeControllerFuture = _controller!.initialize();
    });
  }


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

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body : SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: _controller == null?Container(): FutureBuilder<void>(
            future: _initializeControllerFuture,
            builder:(context, snapshot){
              if(snapshot.connectionState == ConnectionState.done){
                return CameraPreview(_controller!);
              }else{
                return const Center(child: CircularProgressIndicator());
              }
            }
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        child:const Icon(Icons.camera_alt),
        onPressed: () async{
          final image = await _controller?.takePicture();
          if(image == null) return;
          // TODO: 사진 촬령후 image를 가지고 하고자 하는 작업 진행
          // ex)
          //   Get.back()  => 이전 화면으로 이동
          //   Get.off( NewPage()); // NewPage()로 이동

        },),
    );
  }
}

해피 코딩 !!

1. MediaPipe

https://developers.google.com/mediapipe

On Device AI 를 쉽게 구현하고 다양한 서비스를 만들수 있는 프래임워크입니다.

MediaPipe 솔루션은 애플리케이션에 인공 지능(AI) 및 기계 학습(ML) 기술을 신속하게 적용할 수 있는 라이브러리 및 도구 모음을 제공합니다. 이러한 솔루션을 애플리케이션에 즉시 연결하고 필요에 맞게 사용자 정의하며 여러 개발 플랫폼에서 사용할 수 있습니다. MediaPipe 솔루션은 MediaPipe 오픈 소스 프로젝트 의 일부 이므로 애플리케이션 요구 사항에 맞게 솔루션 코드를 추가로 사용자 정의할 수 있습니다. 

미디어파이프의 데모를 확인해볼 수 있는 좋은 예제가 될 것 같아 링크를 해놓습니다.

https://makernambo.com/155?category=774191