Image for post
Image for post
Image for post
Image for post

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?

Image for post
Image for post

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.
Image for post
Image for post

Vision pertenece al kit de ML

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
Image for post
Image for post

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

Image for post
Image for post

3.- Damos click derecho y click Manage Nuget Packages

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

8.- En el OnCreate agregamos este codigo

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

12.- Creamos un metodo con el nombre startCameraSource

Image for post
Image for post

13.- Agregamos la siguiente interfaz y la implemetamos

Image for post
Image for post

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

Image for post
Image for post

15.- Agregamos una nueva interfaz y la implementamos

Image for post
Image for post
Image for post
Image for post

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

DEMO

Sigamos apoyando a estas iniciativas.

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store