Real-time Object Detection in Flutter

문서 : https://medium.com/@shaqian629/real-time-object-detection-in-flutter-b31c7ff9ef96

Real-time Object Detection in Flutter

 

 

flutter 카메라 플러그인에 이미지 스트리밍 기능을 추가하면 라이브 카메라 미리보기에서 프레임을 캡처할 수 있습니다.

 

Tflite (TensorFlowLite)  플러그인으로 이미지 스트리밍을 사용하여 Flutter에서 실시간 객체 감지를 실현

 

카메라 플러그인의 이미지 스트리밍

Flutter 프로젝트에 카메라 플러그인 추가하기 : https://pub.dev/packages/camera

camera | Flutter Package

 

이미지 스트리밍을 시작하려면 카메라 컨트롤러에서 startImageStream을 호출해야한다.

이 메서드는 새 프레임이 도착할 때마다 동작된다.

 

controller.startImageStream((CameraImage img) { <YOUR CODE> });

 

CameraImage Class에는 4개의 맴버를 가지고 있다.

1. 이미지 형식

2. 이미지 높이

3. 이미지 너비

4. 이미지의 바이트

 

class CameraImage {
final ImageFormat format;
final int height;
final int width;
final List<Plane> planes;
} 

 

이미지의 형식은 플랫폼에 따라 다르다.

• Android: android.graphics.ImageFormat.YUV_420_888
• iOS: kCVPixelFormatType_32BGRA (Note that the format was kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange in v2.8.0. Later in v4.0.0 it was changed back to 32BGRA.)

포멧이 다르기 때문에 ios와 Android의 카메라 이미지 출력이 다르다.

 

• Android: planes is a list of bytes arrays of Y, U and V planes of the image.
• iOS: planes contains a single array containing the RGBA bytes of the image.

 

CameraImage Decoding

 

ios

다트 코드로 이미지 디코딩 가능하지만 이미지 라이브러리는 ios에서 느림

네이티브 코드에서 프레임 디코딩하는게 효율적임

 

Android

YUV평면의 바이트에서 RGBA 형식의 비트맵을 만들어야 한다.

렌더 스크립트 사용해서 변환하면 쉽다

 

NV21을 RGBA로 변환 하는 코드 문서에 있음.

 

 

Tflite 플러그인을 사용하여 객체 검색

tflite 플러그인은 iOS와 안드로이드용 텐서플로 라이트 API를 랩한다. 인기 모델의 입력을 공급하고 출력을 추출하기 위한 네이티브 코드를 구현했다. 객체 감지를 위해 SSD MobileNet 및 YOLOv2를 지원합니다.

 

Tflite 플러그인은 카메라 플러그인에서 이미지 스트림을 디코딩하고 추론을 실행하고

인식을 반환할 수 있는 detectObjectonFrame 메서드를 제공합니다.

 

카메라 이미지의 평면 바이트를 메소드에 전달하면 탐지된 객체를 가져올 수 있다.

 

코드 문서 참조.

 

 

디스플레이에서의 출력

 

카메라 플러그인의 작은 문제는 미리보기 크기가 항상 화면 크기에 맞지 않는다는 것이다.

미리보기가 늘어나지 않도록 가로 세로 비율을 위젯에 미리보기를 넣는것이 좋다.

 

이 문서는 카메라 미리보기가 전체 화면을 촬영하는것을 선호해

미리보기를 오버플로 박스 위젯에 넣어 해결함

 

먼저 미리보기와 화면의 높이/폭 비율을 비교한 다음 화면 너비 또는 화면 높이에 맞게 미리보기를 조정하여 

화면을 덮도록 조정

 

코드 문서참조

 

따라서 상자를 그릴 때 x,y,w,h 의 배율을 배율 너비와 높이로 조정

미리보기의 일부가 OvweflowBox 뒤에 숨겨지므로 xory는 스케일링 된 높이와 화면 높이의 차이로 빼야함

 

코드 문서참조