Проблема с несовпадением наложения распознавания текста при предварительном просмотре с камеры

Я работаю над приложением для Android, в котором реализую распознавание текста в реальном времени с помощью CameraX и ML Kit. Распознанный текст отображается с ограничивающими рамками при предварительном просмотре камеры, но я столкнулся с проблемой, заключающейся в том, что эти ограничивающие рамки неправильно совмещаются с текстом в прямой трансляции.

Описание проблемы При запуске приложения:

  • Предварительный просмотр камеры правильно отображает прямую трансляцию.
  • Распознавание текста ML Kit обрабатывает изображение и идентифицирует текстовые блоки.
  • Вокруг обнаруженных текстовых элементов рисуются ограничивающие рамки.
  • Однако эти ограничивающие рамки не совпадают с фактическим текстом в предварительном просмотре камеры. Они кажутся смещенными или неправильно масштабированными.

Фрагменты основной активности

package com.aviskaarlab.booksnap.ui.views.home

import android.Manifest
import android.content.pm.PackageManager
import android.os.Build
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import androidx.camera.core.AspectRatio
import androidx.camera.core.CameraSelector
import androidx.camera.core.ImageAnalysis
import androidx.camera.core.Preview
import androidx.camera.core.resolutionselector.AspectRatioStrategy
import androidx.camera.core.resolutionselector.ResolutionSelector
import androidx.camera.lifecycle.ProcessCameraProvider
import androidx.camera.view.PreviewView
import androidx.core.content.ContextCompat
import java.util.concurrent.ExecutorService
import java.util.concurrent.Executors

class MainActivity : AppCompatActivity() {
    private lateinit var viewBinding: ActivityMainBinding
    private lateinit var cameraExecutor: ExecutorService
    private lateinit var textOverlay: TextOverlay
    private lateinit var viewFinder: PreviewView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        viewBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(viewBinding.root)

        viewFinder = viewBinding.previewView
        textOverlay = viewBinding.textOverlay

        // Initialize camera and start preview
        startCamera()

        cameraExecutor = Executors.newSingleThreadExecutor()
    }

    private fun startCamera() {
        val cameraProviderFuture = ProcessCameraProvider.getInstance(this)

        cameraProviderFuture.addListener({
            val resolutionSelector = ResolutionSelector.Builder()
                .setAspectRatioStrategy(AspectRatioStrategy.RATIO_4_3_FALLBACK_AUTO_STRATEGY)
                .build()

            val rotation = viewFinder.display.rotation
            val cameraProvider: ProcessCameraProvider = cameraProviderFuture.get()

            // Preview
            val preview = Preview.Builder()
                .setResolutionSelector(resolutionSelector)
                .setTargetRotation(rotation)
                .build()
                .also {
                    it.setSurfaceProvider(viewBinding.previewView.surfaceProvider)
                }

            // Image Analysis
            val imageAnalysis = ImageAnalysis.Builder()
                .setResolutionSelector(resolutionSelector)
                .setTargetRotation(rotation)
                .build()
                .also {
                    it.setAnalyzer(
                        cameraExecutor,
                        BookSnapWordAnalyzer(
                            textOverlay,
                            viewBinding.previewView,
                        )
                    )
                }

            // Select back camera as default
            val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA

            try {
                cameraProvider.unbindAll()
                cameraProvider.bindToLifecycle(
                    this, cameraSelector, preview, imageAnalysis
                )

                preview.setSurfaceProvider(viewFinder.surfaceProvider)
            } catch (exc: Exception) {
                Log.e(TAG, "Use case binding failed", exc)
            }

        }, ContextCompat.getMainExecutor(this))
    }

    override fun onDestroy() {
        super.onDestroy()
        cameraExecutor.shutdown()
    }

    companion object {
        private const val TAG = "CameraXApp"
    }
}

Фрагмент кода BookSnapWordAnalyzer

package com.aviskaarlab.booksnap.ui.views.home

import android.graphics.Matrix
import android.graphics.Rect
import android.graphics.RectF
import android.util.Log
import androidx.camera.core.ExperimentalGetImage
import androidx.camera.core.ImageAnalysis
import androidx.camera.core.ImageProxy
import androidx.camera.view.PreviewView
import com.google.mlkit.vision.common.InputImage
import com.google.mlkit.vision.text.Text
import com.google.mlkit.vision.text.TextRecognition
import com.google.mlkit.vision.text.latin.TextRecognizerOptions

internal class BookSnapWordAnalyzer(
    private val overlay: TextOverlay,
    private val previewView: PreviewView,
) : ImageAnalysis.Analyzer {

    companion object {
        private const val TAG = "BookSnapWordAnalyzer"
        private const val WORD_LENGTH = 4
    }

    private val recognizer = TextRecognition.getClient(TextRecognizerOptions.DEFAULT_OPTIONS)
    private lateinit var visionText: Text
    private lateinit var matrix: Matrix
    private var rotationDegrees: Int = 0

    @OptIn(ExperimentalGetImage::class)
    override fun analyze(imageProxy: ImageProxy) {
        val mediaImage = imageProxy.image ?: return
        rotationDegrees = imageProxy.imageInfo.rotationDegrees
        matrix = getCorrectionMatrix(imageProxy, previewView)

        val image =
            InputImage.fromMediaImage(mediaImage, imageProxy.imageInfo.rotationDegrees)

        recognizer.process(image)
            .addOnSuccessListener { visionText ->
                this.visionText = visionText
                val boxes = mutableListOf<CustomRect>()
                for (block in visionText.textBlocks) {
                    for (line in block.lines) {
                        for (element in line.elements) {
                            val elementText = element.text
                            val boundingBox = element.boundingBox
                            if (elementText.length >= WORD_LENGTH && boundingBox != null) {
                                boxes.add(
                                    CustomRect(
                                        adjustBoundingBox(boundingBox, imageProxy, previewView),
                                        elementText
                                    )
                                )
                            }
                        }
                    }
                }
                overlay.updateBoundingBoxes(boxes)
            }
            .addOnFailureListener { e ->
                Log.e(TAG, "Text recognition failed", e)
            }.addOnCompleteListener {
                imageProxy.close()
            }
    }

    private fun adjustBoundingBox(
        rect: Rect,
        imageProxy: ImageProxy,
        previewView: PreviewView
    ): RectF {
        val cropRect = imageProxy.cropRect
        val imageWidth = cropRect.width()
        val imageHeight = cropRect.height()

        val previewWidth = previewView.width
        val previewHeight = previewView.height

        val scaleX = previewWidth.toFloat() / imageWidth
        val scaleY = previewHeight.toFloat() / imageHeight

        val verticalOffset = (previewHeight - imageHeight * scaleY) / 2
        val horizontalOffset = (previewWidth - imageWidth * scaleX) / 2

        val left = rect.left * scaleX + horizontalOffset
        val top = rect.top * scaleY + verticalOffset
        val right = rect.right * scaleX + horizontalOffset
        val bottom = rect.bottom * scaleY + verticalOffset

        return RectF(left, top, right, bottom)
    }

    private fun getCorrectionMatrix(
        imageProxy: ImageProxy,
        previewView: PreviewView,
    ): Matrix {
        val cropRect = imageProxy.cropRect
        val matrix = Matrix()

        val source = floatArrayOf(
            cropRect.left.toFloat(), cropRect.top.toFloat(),
            cropRect.right.toFloat(), cropRect.top.toFloat(),
            cropRect.right.toFloat(), cropRect.bottom.toFloat(),
            cropRect.left.toFloat(), cropRect.bottom.toFloat()
        )

        val destination = floatArrayOf(
            0f, 0f,
            previewView.width.toFloat(), 0f,
            previewView.width.toFloat(), previewView.height.toFloat(),
            0f, previewView.height.toFloat()
        )

        matrix.setPolyToPoly(source, 0, destination, 0, 4)
        return matrix
    }
}

Фрагмент кода TextOverlay

package com.aviskaarlab.booksnap.ui.views.home

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View

class TextOverlay @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val paint = Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = 2.0f
    }

    private val boundingBoxes = mutableListOf<CustomRect>()
    private var clickListener: ((String) -> Unit)? = null

    fun setOnRectangleClickListener(listener: (String) -> Unit) {
        clickListener = listener
    }

    fun updateBoundingBoxes(newBoundingBoxes: List<CustomRect>) {
        boundingBoxes.clear()
        boundingBoxes.addAll(newBoundingBoxes)
        invalidate() // Redraw the view
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        for (box in boundingBoxes) {
            canvas.drawRect(box.rect, paint)
        }
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (event.action == MotionEvent.ACTION_UP) {
            val x = event.x
            val y = event.y
            for (box in boundingBoxes) {
                if (box.rect.contains(x, y)) {
                    clickListener?.invoke("Clicked on rectangle ${box.text}")
                    return true
                }
            }
        }
        return true // Event handled
    }
}

Проблема Прямоугольники, нарисованные вокруг распознанного текста, не совпадают с текстом в окне предварительного просмотра камеры. Как настроить координаты ограничивающей рамки, чтобы они правильно накладывались на текст в прямом эфире с камеры? (см. прикрепленное изображение)

В кадрах изображений CameraX используется физическая система координат камеры, основанная на разрешении сенсора, а ML Kit работает на нормализованной системе координат (обычно от 0,0 до 1,0 для ширины и высоты). Это может привести к несовпадению, если преобразование между этими системами выполнено неправильно.

Bob 25.06.2024 11:18

Спасибо @BobSmith за эту информацию. Можете ли вы поделиться ссылкой на документацию, связанную с этим. Я хочу пройти через это и совершить эти преобразования. Это мне очень поможет.

Purushotam Kumar 26.06.2024 10:26

@BobSmith Пример кода очень поможет, если вы сможете его предоставить.

Purushotam Kumar 26.06.2024 10:53

Через некоторое время я постараюсь предоставить решение, но эта сборка не будет проверена и +1 за ваши усилия. Из-за отсутствия надлежащей документации со стороны Google разработчикам всегда трудно заставить ее работать должным образом.

Bob 26.06.2024 12:47

Огромное спасибо @BobSmith, любой пример кода был бы очень полезен, и да, определенно это происходит из-за отсутствия документации. Я не могу понять, где мне искать поведение API.

Purushotam Kumar 26.06.2024 13:04

@PurushotamKumar Попробуйте, работает ли анализатор ML Kit. Developer.android.com/reference/androidx/camera/mlkit/vision‌​/….

Joyful Wasp 26.06.2024 18:16

@BobSmith Да, я проверил ваш ответ и попробовал, но пока не повезло. Я думаю, мне нужно внести некоторые изменения в ваш код. Я сделаю это и сообщу вам. Но в любом случае, огромное спасибо за все ваши усилия. Это значит многое.

Purushotam Kumar 27.06.2024 12:37
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
В компьютерном программировании биты играют важнейшую роль в представлении и манипулировании данными на двоичном уровне. Побитовые операции...
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Приходилось ли вам сталкиваться с требованиями, в которых вас могли попросить поднять тревогу или выдать ошибку, когда метод Java занимает больше...
Полный курс Java для разработчиков веб-сайтов и приложений
Полный курс Java для разработчиков веб-сайтов и приложений
Получите сертификат Java Web и Application Developer, используя наш курс.
0
7
140
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Кадры изображения CameraX используют физическую систему координат камеры, основанную на разрешении датчика, а ML Kit работают в нормализованной системе координат (обычно от 0,0 до 1,0 для ширины и высоты). Это может привести к несовпадению, если преобразование между этими системами выполнено неправильно.

Итак, разница, которую вы видите в ограничивающих рамках на BookSnapWordAnalyzer, скорее всего, связана с разницей в системе координат между комплектом ML и предварительным просмотром камеры.

Что следует учитывать:

  1. Соотношение сторон и масштабирование (между изображением с камеры и предварительным просмотром)

  2. Матрица трансформации (изображение камеры поворачивается)

  3. Настройка ограничивающей рамки (правильная обработка различных соотношений сторон)

  4. Согласованность соотношения сторон (между анализом изображения и предварительным просмотром)

  5. Приложение матрицы трансформации (обеспечьте правильное выравнивание)

Насколько я понимаю, я думаю, нам нужно удалить updateBoundingBoxes() и добавить новую функцию под названием drawBoundingBoxes() и использовать ее в addOnSuccessListener().

public void drawBoundingBoxes(List<CustomRect> boxes) {
    Canvas canvas = getHolder().lockCanvas(); // Assuming the overlay uses a SurfaceView
    if (canvas != null) {
        for (CustomRect box : boxes) {
            RectF adjustedBox = box.getBoundingBox();
            // Apply the correction matrix to the bounding box coordinates
            matrix.mapRect(adjustedBox);
            // Draw a red rectangle using adjustedBox coordinates and red paint
            paint.setColor(Color.RED);
            canvas.drawRect(adjustedBox, paint);
        }
        getHolder().unlockCanvasAndPost(canvas);
    }
}

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

И назовите это так:

.addOnSuccessListener { visionText ->
      this.visionText = visionText;
      val boxes = mutableListOf<CustomRect>()
      this.visionText = visionText
        val boxes = mutableListOf<CustomRect>()
        for (block in visionText.textBlocks) {
            for (line in block.lines) {
                for (element in line.elements) {
                    val elementText = element.text
                    val boundingBox = element.boundingBox
                    if (elementText.length >= WORD_LENGTH && boundingBox != null) {
                        boxes.add(
                            CustomRect(
                                adjustBoundingBox(boundingBox, imageProxy, previewView),
                                elementText
                            )
                        )
                    }
                }
            }
        }

      val handler = Handler(Looper.getMainLooper())
      val runnable = Runnable {
          overlay.drawBoundingBoxes(boxes);
      }
      handler.post(runnable)
  }

Примечания :

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

Справочные ссылки:

Ответ принят как подходящий

Если вы используете MLKit и PreviewView, используйте MLKitAnalyzer для обнаружения изображения, установив целевую систему координат COORDINATE_SYSTEM_VIEW_REFERENCED. Выходные координаты будут в системе координат PreviewView.

Пройдя через различные пробы и ошибки, наконец это помогло мне прийти к правильному решению кода. Я публикую свой измененный ответ, возможно, он поможет кому-то в будущем.

Иногда лучше всего сохранять простоту

private fun startCamera() {
        val previewView: PreviewView = viewBinding.previewView
        val cameraController = LifecycleCameraController(baseContext)
        cameraController.bindToLifecycle(this)
        cameraController.cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
        previewView.controller = cameraController

        val textRecognizer = TextRecognition.getClient(TextRecognizerOptions.DEFAULT_OPTIONS)

        cameraController.setImageAnalysisAnalyzer(
            ContextCompat.getMainExecutor(this),
            MlKitAnalyzer(
                listOf(textRecognizer),
                COORDINATE_SYSTEM_VIEW_REFERENCED,
                ContextCompat.getMainExecutor(this)
            ) { result: MlKitAnalyzer.Result? ->
                // The value of result.getResult can be used directly for drawing UI overlay.
                val visionText = result?.getValue(textRecognizer)
                if (visionText != null) {
                    // Process the texts in your desired method
                    processText(visionText)
                }
            })

    }

Другие вопросы по теме