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;
}
});По порядку:
Проверяем разрешение на доступ к камере.
Создаем контроллер. Инициализируем его. Запускаем 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.Много, будем с вами чаще на связи!
