В этой статье рассмотрим, как сканировать баркоды в Android- приложениях, как в Compose работать с камерой (предпросмотр и логика сканирования), а также как поддерживать внешние сканеры, в ситуациях, когда сканирование происходит без камеры и мы не управляем источником результата

Сканирование barcode

Для сканирования баркодов рассмотрим библиотеку от Google barcode-scanning. Сначала нужно подключить её к проекту:

dependencies {
  // ...
  // Use this dependency to bundle the model with your app
  implementation 'com.google.mlkit:barcode-scanning:17.3.0'
}

Далее нужно указать, какие типы кодов кодов будем считывать:

val options = BarcodeScannerOptions.Builder()
        .setBarcodeFormats(
                Barcode.FORMAT_QR_CODE,
                Barcode.FORMAT_AZTEC)
        .build()

Типов может быть много:

Код 128 ( FORMAT_CODE_128 )
Код 39 ( FORMAT_CODE_39 )
Код 93 ( FORMAT_CODE_93 )
Кодабар ( FORMAT_CODABAR )
EAN-13 ( FORMAT_EAN_13 )
EAN-8 ( FORMAT_EAN_8 )
ITF ( FORMAT_ITF )
СКП-А ( FORMAT_UPC_A )
UPC-E ( FORMAT_UPC_E )
QR-код ( FORMAT_QR_CODE )
PDF417 ( FORMAT_PDF417 )
Ацтекский ( FORMAT_AZTEC )
Матрица данных ( FORMAT_DATA_MATRIX )

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

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

Для примера рассмотрим структуру экрана:

На экране отображается: зона предпросмотра сканера и переключатель режима. При нажатии на переключатель на экран выводится предпросмотр камеры или интерфейс для работы с внешним сканером.

Сканирование с помощью камеры

Рассмотрим, как это описывается с помощью кода. Вначале подключаем библиотеку камеры:

implementation(libs.androidx.camera.core)
implementation(libs.androidx.camera.compose)
implementation(libs.androidx.camera.lifecycle)
implementation(libs.androidx.camera.camera2)

Далее описываем работу с камерой. Нам нужен предпросмотр в Compose. Функция будет выглядеть так:

@Composable
fun CameraPreview(
    modifier: Modifier = Modifier,
    scaleType: PreviewView.ScaleType = PreviewView.ScaleType.FILL_CENTER,
    cameraSelector: CameraSelector = CameraSelector.DEFAULT_BACK_CAMERA,
    barCodeListener: (barCode: String) -> Unit
) {
    val coroutineScope = rememberCoroutineScope()
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current
    val cameraProviderFuture =
        remember(context) { ProcessCameraProvider.getInstance(context) }
    val executor = remember(context) { ContextCompat.getMainExecutor(context) }
    val previewView = PreviewView(context).apply {
        this.scaleType = scaleType
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
    }


    AndroidView(
        modifier = modifier,
        factory = { _ ->
            cameraProviderFuture.addListener({

                // ImageAnalysis
                imageAnalyzer = ImageAnalysis.Builder()
                    .setBackpressureStrategy(ImageAnalysis.STRATEGY_BLOCK_PRODUCER)

                    .build()
                    .also {
                        it.setAnalyzer(cameraExecutor,
                            BarcodeAnalyzer() { barcode ->
                                available.acquire()
                                barCodeListener(barcode)
                                available.release()
                            })
                    }
            }, executor)

            // Preview
            val previewUseCase = Preview.Builder()
                .build()
                .also {
                    it.setSurfaceProvider(previewView.surfaceProvider)
                }

            coroutineScope.launch {
                val cameraProvider = context.getCameraProvider()
                try {
                    // Must unbind the use-cases before rebinding them.
                    cameraProvider.unbindAll()

                    cameraProvider.bindToLifecycle(
                        lifecycleOwner, cameraSelector, previewUseCase, imageAnalyzer
                    )

                } catch (ex: Exception) {
                    Log.e("CameraPreview", "Use case binding failed", ex)
                }
            }
            previewView
        }
    )
}

Для предпросмотра камеры используем обвёртку с AndroidView. На текущий момент в альфа-версии библиотеки camerax появилась возможность реализовать предпросмотр полностью на Compose, но здесь мы этого не рассматриваем. В приведённом выше примере кода есть класс BarcodeAnalyzer, в котором реализована логика анализа баркодов:

class BarcodeAnalyzer(
    val listener: (barcode: String) -> Unit
) :  ImageAnalysis.Analyzer {
    private var isBusy = AtomicBoolean(false)

    @SuppressLint("UnsafeExperimentalUsageError", "UnsafeOptInUsageError")
    override fun analyze(image: ImageProxy) {
        if (isBusy.compareAndSet(false, true)) {
            image.image?.let { imageItem ->
                val visionImage =
                    InputImage.fromMediaImage(imageItem, image.imageInfo.rotationDegrees)
                val options = BarcodeScannerOptions.Builder().enableAllPotentialBarcodes().build()
                BarcodeScanning.getClient(options).process(visionImage)
                    .addOnCompleteListener { task ->
                        if (task.isSuccessful) {
                            task.result?.let { barcodes ->
                                for (barcode in barcodes) {
                                    listener(barcode.rawValue ?: "")
                                }
                            }
                        } else {
                            Log.e("scanner", "failed to scan image: ${task.exception?.message}")
                        }
                        image.close()
                        isBusy.set(false)
                    }
            }
        } else {
            image.close()
        }
    }
}

Этот класс реализует интерфейс ImageAnalysis.Analyzer в методе analyze. Он отвечает за логику анализирования результата и вызов callback-функции в случае успеха.

Мы рассмотрели работу с камерой при сканировании баркодов. Теперь добавим поддержку внешних сканеров и опишем сам экран:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var resultScan by remember { mutableStateOf("") }
            var usingExternalScan by remember { mutableStateOf(true) }
            var scanning by remember { mutableStateOf(true) }
            BarCodeScanTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Column(
                        modifier = Modifier.padding(innerPadding),
                        verticalArrangement = Arrangement.spacedBy(32.dp)
                    ) {
                        if (!usingExternalScan) {
                            CameraPreviewScreen(
                                resultScan = { barCode ->
                                    if (scanning) {
                                        resultScan = barCode
                                        viewModel.action(ScanActions.Camera(number = barCode))
                                    }
                                }
                            )
                        } else {
                            ExternalScanner(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .height(350.dp),
                                result = { barCode ->
                                    if (scanning) {
                                        resultScan = barCode
                                        viewModel.action(ScanActions.External(number = barCode))
                                    }
                                }
                            )

                        }
                        Spacer(Modifier.height(100.dp))

                        Text(
                            modifier = Modifier.fillMaxWidth(),
                            text = resultScan,
                            textAlign = TextAlign.Center
                        )

                        ExternalScannerToggle(text = "Using External Scanner",
                            modifier = Modifier.padding(start = 16.dp, end = 16.dp),
                            callBack = { isUsing ->
                                usingExternalScan = isUsing
                            })
                    }
                }
            }

            val uiState by viewModel.stateFlow.collectAsState()
            when (uiState) {
                ScanState.HandlingResult -> {
                    scanning = false
                }

                ScanState.Scanning -> {
                    scanning = true
                    resultScan = ""
                }
            }
        }
    }
}

В нашем простом случае есть переключатель toggle, который меняет режим работы между камерой и внешним сканером. Для работы с камерой вначале проверяются разрешения, после их получения показываем предпросмотр камеры. State с viewModel переключает режимы:

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

Сканирование с помощью внешнего устройства

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

@Composable
fun ExternalScanner(
    modifier: Modifier = Modifier,
    result: (String) -> Unit = {}
) {
    val textValue = remember {
        mutableStateOf("")
    }

    val focusRequester = remember { FocusRequester() }

    Box(
        modifier = modifier
            .background(color = Color.Blue)
    ) {
        OutlinedTextField(
            value = textValue.value,
            onValueChange = {
                textValue.value = it.trim()
                result.invoke(it)
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .align(Alignment.Center)
                .focusRequester(focusRequester),
            colors = TextFieldDefaults.colors(
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            )
        )
    }

    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
    }
}

При работе с внешним сканером вам, скорей всего, понадобится удерживать фокус на поле ввода и скрыть клавиатуру при вводе значения в поле. Рассмотрим вид viewModel нашего экрана:

class ScanViewModel : ViewModel() {

    private val _stateFlow: MutableStateFlow<ScanState> = MutableStateFlow(ScanState.Scanning)

    val stateFlow: StateFlow<ScanState> = _stateFlow

    private val text = MutableStateFlow("")

    fun action(actions: ScanActions) {
        when (actions) {
            is ScanActions.Camera -> {
                _stateFlow.value = ScanState.HandlingResult
                viewModelScope.launch {
                    handleResult()
                }
            }

            is ScanActions.External -> {
                viewModelScope.launch {
                    text.debounce(2000)
                        .distinctUntilChanged()
                        .collect {
                            _stateFlow.value = ScanState.HandlingResult
                            handleResult()
                        }
                }
            }
        }
    }

    private suspend fun handleResult() {
        // handler result simulation
        delay(1000)
        _stateFlow.value = ScanState.Scanning
    }
}

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

При работе с внешним сканером с помощью debounce ждём завершения ввода и запускаем обработку результата.

Резюме

Мы рассмотрели логику сканирования баркодов c помощью библиотеки barcode-scanning в двух режимах: при использовании встроенной камеры или внешнего устройства. Предпросмотр камеры мы реализовали с обвёрткой view в Compose, но с выходом новой версии camerax можно реализовать полностью на Compose. При использовании внешнего сканера мы работаем с обычным полем ввода. Пример кода выложен здесь.

Сканирование баркодов c помощью камеры и внешних устройств в Compose