Text Recognition Xamarin Android

Hola que tal amigos, con el respecto al calendario Segundo Calendario de Adviento de Xamarin en Español #AdvientoXamarin, en este articulo hablaremos sobre un tema muy importante que nos puede ayudar en cuanto a nuestros proyectos. Reconocimiento de texto en aplicacion Xamarin Android con Xamarin.GooglePlayServices.Vision

Link del componente https://www.nuget.org/packages/Xamarin.GooglePlayServices.Vision/

Mobile Vision ¿QUE ES?

Bueno Mobile Vision es:

Es el proceso de detectar texto en imágenes y secuencias de vídeo y reconocer el texto contenido en el mismo. Una vez detectado, el reconocedor determina el texto real en cada bloque y lo segmenta en líneas y palabras. La API de texto detecta texto en idiomas basados en latín (francés, alemán, inglés, etc.), en tiempo real, en el dispositivo.

Texto copiado de https://developers.google.com/vision/android/text-overview

Idiomas reconocidos

• Catalán
• Danés
• Holandés
• Inglés
• Finlandés
• Francés
• Alemán
• Húngaro
• Italiano
• Latina
• Noruego
• Polaco
• Portugués
• Rumano
• Español
• Sueco
• Tagalo
• Turco

Estructura del texto

El reconocedor de texto segmenta el texto en bloques, líneas y palabras. Hablando en términos generales:

• un Bloque es un conjunto contiguo de líneas de texto, como un párrafo o columna,
• una Línea es un conjunto contiguo de palabras en el mismo eje vertical, y
• un Word es un conjunto contiguo de caracteres alfanuméricos en el mismo eje vertical.

Vision pertenece al kit de ML

ML Kit | Google Developers

Mobile Vision abarca.

Detectar caras

Escanear códigos de barras

Reconocer texto

En este articulo tomaremos la parte de reconocer texto, manos a la obra.

1. - Creamos un proyecto de tipo Android y Black Android App

2.- Le Ponemos un nombre para este ejemplo pondremos CameraRecognitionText. y creamos el proyecto

3.- Damos click derecho y click Manage Nuget Packages

4.- Buscamos el Paquete Xamarin.GooglePlayServices.Vision y agregamos el paquete

5.- En nuestro Manifest agregamos los siguientes permisos

<uses-permission android:name=”android.permission.CAMERA” />

6.- Dentro del Application agregamos esta linea

<application
android:allowBackup=”true”
android:icon=”@mipmap/ic_launcher”
android:label=”@string/app_name”
android:roundIcon=”@mipmap/ic_launcher_round”
android:supportsRtl=”true”
android:theme=”@style/AppTheme”>

<meta-data android:name=”com.google.android.gms.vision.DEPENDENCIES” android:value=”ocr” />

</application>

6.- En nuestra carpeta layout en el archivo main_activity.xml agregamos estas lineas

<RelativeLayout
xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<SurfaceView
android:id=”@+id/surfaceView”
android:layout_width=”match_parent”
android:layout_height=”500dp”
android:layout_weight=”@dimen/abc_action_bar_elevation_material”
android:layout_marginBottom=”10.5dp” />
<Button
android:id=”@+id/btn”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”Iniciar”
android:layout_marginTop=”0.0dp”
android:layout_below=”@id/surfaceView” />
<TextView
android:id=”@+id/text_view”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_margin=”@dimen/abc_action_bar_overflow_padding_start_material”
android:layout_weight=”@dimen/abc_control_corner_material”
android:gravity=”center”
android:textStyle=”bold”
android:text=”@string/txt_message”
android:textColor=”@android:color/black”
android:textSize=”20sp”
android:layout_below=”@+id/btn”
android:layout_marginBottom=”28.0dp”
android:layout_marginTop=”0.0dp”/>
<TextView
android:id=”@+id/text_viewlanguaje”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_margin=”@dimen/abc_action_bar_overflow_padding_start_material”
android:layout_weight=”@dimen/abc_control_corner_material”
android:gravity=”center”
android:textStyle=”bold”
android:text=”@string/txt_message”
android:textColor=”@android:color/black”
android:textSize=”20sp”
android:layout_below=”@+id/text_view”
android:layout_marginBottom=”28.0dp”
android:layout_marginTop=”0.0dp”/>
</RelativeLayout>

7.- Ahora abrimos nuestro MainActivity.cs agregamos estas lineas

8.- En el OnCreate agregamos este codigo

9.- Debe de agregar esta linea la interfaz y debes de implementar la interfaz

10.- Se generará estos metodos y en el SurfaceCreated agregas esta linea de codigo.

11.- En el evento click del button agregamos este codigo

12.- Creamos un metodo con el nombre startCameraSource

13.- Agregamos la siguiente interfaz y la implemetamos

14.- Nos generará los siguiente metodos. y agregamos el siguiente codigo

15.- Agregamos una nueva interfaz y la implementamos

16.- En esta parte estaremos obteniendo el resultado del SparseArray para obtener el texto reconocido y se lo pasamos al TextView.

DEMO

Aqui pueden encontrar el proyecto completo

CarlosDzLp/TextRecognition

Sigamos apoyando a estas iniciativas.

Este artículo es parte del 2do. Calendario de Adviento de Xamarin organizado por Luis Beltrán