在Android应用中使用Firebase ML套件-设备上的文本识别

谷歌IO 2018,谷歌宣布了Firebase ML Kit,这基本上是一个神奇的包,为那些不是ML专家的移动开发人员在他们的移动应用程序中添加ML magic。

在Android应用中使用Firebase ML套件-设备上的文本识别

目前它处于测试阶段,可以用于以下用例:

  • 文本识别
  • 人脸检测
  • 条码扫描
  • 图像标签
  • 地标识别

本教程中的内容

在本教程中,我们将使用Firebase ML Kit构建一个Android应用程序。你的应用将会:

  • 利用ML Kit文本识别API检测图像中的文本
  • 当设备具有互联网连接时,使用ML Kit云文本识别API扩展文本识别功能(例如非拉丁字母)

本教程扩展了Google Codelab,以在我们的Android应用程序中使用Wonderkiln Camerkit添加图像捕捉功能,以识别捕获的图像中的文本。

为了方便起见,我们将从创建一个新项目开始从头开始完成整个过程。

建立一个基本的项目

在Android Studio中创建一个新项目。我已经命名了我的FirebaseMLKit-Android 。

选择首选的最小SDK和Empty Activity Template,其余的默认选项并继续完成。

设置CameraKit

CameraKit for Android是一款非常易于使用的实用程序,可用于臭名昭着的Android Camera和Camera2 API。

  • 在您的build.gradle(Module:app)文件中,依赖项下,添加此行 implementation ‘com.wonderkiln:camerakit:0.13.1 然后Sync now
  • 在您的activity_main.xml添加下面的代码中,将一个CameraKit CameraView添加到布局以及一个按钮。

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.wonderkiln.camerakit.CameraView

android:id="@+id/camView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<Button

android:id="@+id/cameraBtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:text="@string/recognize" />

</FrameLayout>

  • 现在我们有了我们的用户界面,让我们添加一些逻辑。在你TextRecognizerActivity.kt中

public override fun onResume() {

super.onResume()

camView.start()

}

public override fun onPause() {

camView.stop()

super.onPause()

}

  • 现在我们在onCreate()中添加了CameraKitEventListener,它将允许我们侦听CamView事件

camView.addCameraKitListener(object : CameraKitEventListener {

override fun onEvent(cameraKitEvent: CameraKitEvent) {

}

override fun onError(cameraKitError: CameraKitError) {

}

override fun onImage(cameraKitImage: CameraKitImage) {

var bitmap = cameraKitImage.bitmap

bitmap = Bitmap.createScaledBitmap(bitmap, camView.width, camView.height, false)

camView.stop()

runTextRecognition(bitmap)

}

override fun onVideo(cameraKitVideo: CameraKitVideo) {

}

})

在onImage方法下,我们将捕获的图像存储在位图中。

  • 现在我们在按钮单击中添加Button click listener onCreate(),cameraView将捕获图像。

cameraBtn.setOnClickListener {

graphic_overlay_.clear()

camView.start()

camView.captureImage()

}

所以我们几乎完成了相机设置。

设置Firebase ML Kit-

  • 在您的build.gradle(Module:app)文件中,依赖项下添加这两行

implementation 'com.google.firebase:firebase-core:15.0.2'

implementation 'com.google.firebase:firebase-ml-vision:15.0.0'

  • apply plugin: ‘com.google.gms.google-services’在文件dependencies{...}底部的部分之后添加此项。
  • 在你的build.gradle(Project: FirebaseMLKit)文件中,添加依赖项classpath ‘com.google.gms:google-services:3.2.0’

搭配Firebase控制台

  • 到Firebase控制台
  • 选择Create New Project,并命名您的项目。
  • 从你的新项目的总览屏幕,点击添加Firebase到你的Android应用程序。
  • 输入项目的包名并注册应用程序。you will find yours in app levelbuild.gradle file

applicationId "com.cogitator.firebasemlkit"

下载该google-services.json文件并将其添加到文件app夹的级别。现在应用程序文件夹下的项目视图将如下所示。现在同步。

在Android应用中使用Firebase ML套件-设备上的文本识别

设置Graphic Overlay utils

这部分仅供您的应用程序在捕获的图像上绘制图形,以便按以下方式显示识别的文本。

在Android应用中使用Firebase ML套件-设备上的文本识别

  • 现在,只需创建两个新的Kotlin空文件GraphicOverlay和TextGraphic。
  • 获取GraphicOverlay.kt(https://gist.github.com/AnkitDroidGit/540c6ad6c02b6495547febcc963c9792)和TextGraphic.kt(https://gist.github.com/AnkitDroidGit/8bb86c8dbe78a897077738b4c94cce10)的代码

添加文本识别逻辑 -

在您的activity_text_recog.xml中添加此代码在FrameLayout下 -

<com.cogitator.firebasemlkit.textRecognizer.GraphicOverlay

android:id="@+id/graphic_overlay_"

android:layout_width="match_parent"

android:layout_height="match_parent" />

完整的XML文件应该这样

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.wonderkiln.camerakit.CameraView

android:id="@+id/camView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<com.cogitator.firebasemlkit.textRecognizer.GraphicOverlay

android:id="@+id/graphic_overlay_"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<Button

android:id="@+id/cameraBtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:text="@string/recognize" />

<ImageView

android:id="@+id/imgCamera"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</FrameLayout>

将com.cogitator.firebasemlkit替换为您的软件包名称。

将以下内容添加runTextRecognition到您的TextRecognizerActivity.kt类中:

private fun processTextRecognitionResult(texts: FirebaseVisionText) {

val blocks = texts.blocks

if (blocks.size == 0) {

Log.d("TAG", "No text found")

return

}

graphic_overlay_.clear()

for (i in blocks.indices) {

val lines = blocks.get(i).lines

for (j in lines.indices) {

val elements = lines[j].elements

for (k in elements.indices) {

val textGraphic = TextGraphic(graphic_overlay_, elements[k])

graphic_overlay_.add(textGraphic)

}

}

}

}

停止cameraview后,在camerakit的onImage方法下调用方法runTextRecognition。

override fun onImage(cameraKitImage: CameraKitImage) {

var bitmap = cameraKitImage.bitmap

bitmap = Bitmap.createScaledBitmap(bitmap, camView.width, camView.height, false)

camView.stop()

runTextRecognition(bitmap)

}

现在清除GraphicOverlay并在拍摄图像之前按下按钮后再次启动cameraView。这将启动相机进行另一个图像捕捉。

cameraBtn.setOnClickListener {

graphic_overlay_.clear()

camView.start()

camView.captureImage()

}

相关推荐