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

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

Немного о DevFest

Начну с того, что Омск – приятный город. Теплота Сибири, ровные дороги и отзывчивые люди. Город с очень богатой историей, которая не оставит вас равнодушным, если вы захотите в нее погрузиться. Забегая вперед, скажу, что приятные впечатления для меня оставил не только город, но и конференция, организованная компанией 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 и носитель). 

Камера и Flutter 

Главный акцент моего выступления – библиотека 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;
 }
});

По порядку:

1. Проверяем разрешение на доступ к камере.

2. Создаем контроллер. Инициализируем его. Запускаем 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);
       }
     });
   }
 });
}

3. Делаем проверку на то, распознается ли сейчас баркод и прошло ли больше 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());
 }

4. Закидываем байты изображения с контроллера в нашу библиотеку. _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;
}

5. Две проверки. Если 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--;
   }
 }
}

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

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

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

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