Камера и Flutter

Hola, Amigos! На связи Александр Чаплыгин, Flutter-dev в Amiga. В статье рассказываю о проекте, в котором использовалась библиотека Google ML Kit Barcode Scanning. И о своём первом опыте выступления на конференции для разработчиков DevFest.

Мы с командой Flutter-разработчиков Amiga ведем свой телеграм-канал Flutter.Много, где регулярно пишем интересные посты про кроссплатформенную разработку, делимся своим опытом, переводим статьи иностранных СМИ и анонсируем конфы, в которых будем участвовать. Подписывайтесь, нас там уже больше 1700!

t.me

Flutter. Много

Начну с того, что Омск – приятный город. Теплота Сибири, ровные дороги и отзывчивые люди. Город с очень богатой историей, которая не оставит вас равнодушным, если вы захотите в нее погрузиться. Забегая вперед, скажу, что приятные впечатления для меня оставил не только город, но и конференция, организованная компанией Effective.

Для размещения нам предоставили недавно построенную современную гостиницу, что с самого начала дало понять, путешествие будет на должном уровне. DevFest был рассчитан на 3 дня и 10 треков, среди которых:

Flutter;
iOS;
Android;
Аврора;
Golang;
Python;
Web;
и др.

Для меня, как для Flutter-разработчика, самым значимым был первый день Flutter-трека, где принимали участие такие компании как: Amiga, Effective, Яндекс.Про, Яндекс.Go. Это было мое первое выступление в качестве спикера и, надеюсь, не последнее🙂

В целом, не могу сказать, что людям технических специальностей легко выступать. Волновался ли я? Да, конечно. Вспомнил ли я времена своего диплома? Да, конечно. Но в этот раз, в отличие от диплома, я был уверен, что никто не утонет.

Всех выступающих было интересно слушать, аудитория была активной, задавала много вопросов. Это говорит о том, что выбранные темы были максимально актуальными и заинтересовали участников.

Для себя я бы выделил темы Тимура Моисеева (ML и Flutter, Amiga), Геннадия Евстратова (Flutter на Авроре, Яндекс.Go), Сергея Кольцова (Как одной командой писать полсотни приложений в 2 раза быстрее, Яндекс.Про).

Тимур показал приложения на Flutter, в которых были задействованы ML’ки для работы с камерой. В одном из этих приложений обрабатывался снимок деталей конструктора для детей, а затем, приложение анализируя этот снимок, в ответ предлагает различные варианты итоговой сборки с исходными деталями, будь то машинка или корабль.

У Геннадия была озвучена проблематика разработки на Flutter под Аврору (спойлер – трудно). Приобретение смартфона на Авроре и трудности с установкой такого эмулятора приводит к высокому порогу входа в эту нишу. А Сергей рассказал про преимущества Flutter перед нативом и про то, как легко билдить приложения под разные целевые аудитории.

В своем выступлении я затронул тему камеры и Flutter. Работал над проектом под NDA, в котором использовалась библиотека Google ML Kit. Эта библиотека предназначается для распознавания различных объектов: текста, лиц, баркодов и т.д. Также я рассказал про то, как мы интегрировали КриптоПро SDK и подключили рутокен (nfc и носитель).

Главный акцент моего выступления – библиотека Google ML Kit Barcode Scanning. Ее мы использовали для распознавания баркодов разных форматов и видов. Баркод – графическое средство представления цифровых, либо (и) буквенных данных. Библиотека распознает линейные и 2Д форматы баркодов. Из популярных форматов – это Datamatrix, QR-code, EAN-13, EAN-39. Вот так они выглядят:

То есть наша библиотека по сути считывает данный «штрихкод» и переводит его в численно-буквенное представление. Google ML Kit Barcode Scanning имеет высокую скорость обработки баркода, меньше 0,5 секунды, но она не без изъянов. Дело в том, что в численно-буквенном представлении Datamatrix код выглядит как то так:

{FNC1}010460843993429621JgXJ5.T<GS>93Mlcr

Жирным выделены разделители баркода. То есть все, что между ними – смысловые блоки. Серийный номер, крипточасть и другая информация о товаре (вес, рост, ширина, вышина, глубина и т.п.).

И проблема в том, что этот пакет подменяет разделитель FNC1 на GS, что создает неудобства для наших пользователей.

Решили мы данный изъян путем дополнительной отправки изображения на сервер, где ML сервера распознавала баркод в его настоящем виде. На картинке изображена схема обработки баркода в нашем приложении:

Тут, конечно, мы потеряли в производительности: по метрикам процесс обработки одного баркода с участием двух ML занимал от 6 до 10 секунд. Согласитесь, что долгое ожидание в приложении нервирует современного пользователя :)

Но после упрощения правил формирования баркодов пользователями, мы убрали этот запрос на сервер и получили прирост производительности. С участием только Google ML Kit это 4-5 секунд. При этом, заказчик хочет внедрить ML на сервере в наше приложение, что даст гарантию абсолютно правильного распознавания баркода и позволит нам уйти от использования сервиса Google в большом и серьезном приложении.

Расскажу про процесс интеграции этой самой библиотеки и распознавания баркода. Для начала мы получаем все нужные разрешения на доступ к камере.

<uses-feature android:name="android.hardware.camera" android:required="true" />

<key>NSCameraUsageDescription</key> <string>Need access to scan barcodes</string>

Затем подключаем сами библиотеки.

#camera camera: ^0.10.5+4 google_mlkit_barcode_scanning: ^0.9.0

Дальше мы использовали mixin ввиду того, что у нас имеется множество страниц с камерами под разные нужды.

// Note: request() will check permission without request popup if already granted isPermissionGranted = await Permission.camera.request().isGranted; if (isPermissionGranted == true) { Future.delayed(const Duration(milliseconds: 200), () async { cameraController = await CameraUtils.getCameraController( ResolutionPreset.high, CameraLensDirection.back); await cameraController?.initialize(); // will throw CameraException if already disposed if (cameraController?.value.isInitialized == true) { if (mounted) { await cameraController?.lockCaptureOrientation(DeviceOrientation.portraitUp); } await _startImageStream(); _stopped = false; if (mounted) { setState(() {}); } } }); } else { if (mounted) { setState(() {}); } _stoppedByLifeCycle = true; } });

По порядку:

Проверяем разрешение на доступ к камере.
Создаем контроллер. Инициализируем его. Запускаем Stream.

Future<void> _startImageStream() async { await guarded(() async { if (cameraController?.value.isStreamingImages == false) { await cameraController?.startImageStream((image) { if (!_isDetecting && DateTime.now().difference(_lastScan).inMilliseconds >= 200) { _toggleDetectionLock(); handleCameraImage(image); } }); } }); }

Делаем проверку на то, распознается ли сейчас баркод и прошло ли больше 200 мс с последнего сканирования.

final barcodes = await ScannerUtils().detect( image: image, detectInImage: _barcodeDetector.processImage, imageRotation: controller.description.sensorOrientation, ); // Удалим из результатов штрихкоды за прицелом сканера (с периферии экрана) if (barcodes.isNotEmpty) { if (controller.description.sensorOrientation == 90 || controller.description.sensorOrientation == 270) { _removePeripherialObjects(barcodes, image.height.toDouble(), image.width.toDouble()); } else { _removePeripherialObjects(barcodes, image.width.toDouble(), image.height.toDouble()); }

Закидываем байты изображения с контроллера в нашу библиотеку. _barcodeDetector — экземпляр класса BarcodeScanner.

Future<List<Barcode>> detect({ required CameraImage image, required Future<List<Barcode>> Function(InputImage image) detectInImage, required int imageRotation, }) async { final results = <Barcode>[]; final bytes = _concatenatePlanes(image.planes); results.addAll(await detectInImage( InputImage.fromBytes( bytes: bytes, metadata: buildMetaData(image, rotationIntToImageRotation(imageRotation)), ), )); if (results.isNotEmpty) { return results; } final img_lib.Image? img = convertCameraImageToImageColor(image, true, pngFormat: false); final List<Barcode> resultsWhite = await detectInImage( InputImage.fromBytes( bytes: img?.getBytes() ?? Uint8List.fromList([]), metadata: buildMetaData(image, rotationIntToImageRotation(imageRotation)), ), ); results.addAll(resultsWhite); return results; }

Две проверки. Если ML сразу ничего не нашла, то инвертируем изображение и снова отправляем в ML.

void _removePeripherialObjects(List<Barcode> barcodes, double width, double height) { final currentWidth = width * 0.76; final squareRect = Rect.fromCenter( center: Offset(width / 2, height / 2), width: currentWidth, height: currentWidth); for (int i = 0; i < barcodes.length; i++) { final barcode = barcodes[i]; final boundingBox = barcode.boundingBox; final intersect = squareRect.intersect(boundingBox); if (boundingBox == null || intersect.width < boundingBox.width * 0.5 || intersect.height < boundingBox.height * 0.5) { barcodes.removeAt(i); i--; } } }

Удаляем коды за «прицелом» — квадратом на экране. Если больше половины баркода заходит в «прицел» — сохраняем результат, если нет — удаляем.

Теперь мы можем обрабатывать любые баркоды, получать их численно-буквенное представление.

Пора подвести итоги. Мы внедрили библиотеку Google ML Kit Barcode Scanning и, знаете, я бы лучше написал 1000 строк кода, чем один раз выступил😂 Но, как говорится, выходить из зоны комфорта необходимо, если ты хочешь расти. Я рад, что мне удалось посетить такое мероприятие, выступить в качестве спикера, и я очень благодарен организаторам. Надеюсь, что в будущем коммьюнити Flutter будет расти, и такие конференции станут чаще и доступнее для любого желающего их посетить.

Присоединяйтесь к нашему телеграм-каналу Flutter.Много, будем с вами чаще на связи!

#flutter #flutterdev #мобильноеприложение #разработкаприложений #ml

Немного о DevFest

Камера и Flutter