OpenHarmony 应用实现二维码扫码识别

概念介绍

二维码的应用场景非常广泛，在购物应用中，消费者可以直接扫描商品二维码，浏览并购买产品，如图是购物应用的扫描二维码的页面。

本文就以 橘子购物示例应用 为例，来讲解OpenHarmony应用二维码开发相关的技术点。

我们先看下二维码相关的几个概念。

● 二维码生成

OpenHarmony应用框架提供了 QRCode组件 ，用于显示单个二维码的组件。该组件只能用于显示二维码，无法显示条码与解析码内容。

● 二维码解析

OpenHarmony提供了功能强大的三方库 @ohos/zxing，是一个解析/生成一维码/二维码的库。详细内容可以参考 @ohos/zxing 。

二维码解析时，通常有两种方式，使用相机拍摄获取图片或打开相册选取图片，然后图片解析合适的图片格式，进行二维码解析。

橘子购物示例应用 扫描二维码的示例图：

配置文件

了解了二维码相关的概念后，我们看下 橘子购物示例应用 的oh-package.json5配置文件。

在 橘子购物示例应用 中，实现首页二维码扫描的页面的文件位置为： entry/src/main/ets/pages/ScanPage.ets 。文件内容如下：

import { QRCodeScanComponent } from "@ohos/scan-component"
@Entry
@Component
struct Scan {
  build() {
    Column() {
      QRCodeScanComponent()
    }
  }
}

内容非常简单，主要是导入的自定义组件QRCodeScanComponent，这个组件的代码来自： 二维码扫描示例应用，后文我们这样分析如何开发这个二维码扫描应用。

从这一行，可以了解到OpenHarmony应用如何引用ohpm本地三方库。

"@ohos/scan-component":"file:../libs/ohos-qr-code-scan-1.0.1.har",

oh-package.json5配置文件片段如下：

{
  "license": "ISC",
  "devDependencies": {},
  "name": "product",
  "description": "example description",
  "repository": {},
  "version": "1.0.0",
  "dependencies": {
    "@ohos/http": "file:../libs/ohos-http-1.0.0.tgz",
    "@ohos/video-component": "file:../libs/ohos-video-component-1.0.5.tgz",
    "@ohos/details-page-component": "file:../feature/detailPage",
    "@ohos/notification": "file:../libs/ohos-notification-1.0.0.tgz",
    "@ohos/scan-component": "file:../libs/ohos-qr-code-scan-1.0.1.har",
    "@ohos/updatedialog": "file:../libs/ohos-updatedialog-1.0.0.tgz",
    "@ohos/enter-animation": "file:../libs/ohos-enter-animation-1.0.1.tgz",
    "@ohos/share-component": "file:../libs/ohos-sharecomponent-1.0.1.tgz",
    "@ohos/emitter": "file:../feature/emitter",
    "@ohos/navigation-component": "file:../feature/navigationHome"
  }
}

开发步骤

我们来看二维码扫描功能是如何开发的。

导入ohpm三方库

在开发前，我们需要导入ohpm组件库：@ohos/zxing。可以使用命令行方式导入ohpm install @ohos/zxing，也可以直接在文件 entry\oh-package.json5 中配置，如文件片段所示。

可以看出，二维码扫描的核心代码存放在Feature目录，是一个独立的module模块，方便复用：

“@ohos/feature-qr-code-scan”: “file:…/Feature” 。

文件 entry\oh-package.json5 片段:

"dependencies": {
  "@ohos/feature-qr-code-scan": "file:../Feature",
  "@ohos/zxing": "^2.0.0"
} 

相机服务

CameraService.ets 文件相机服务构造函数中，会创建一个图片接收器。

该图片接收器可以监听’imageArrival’事件，当相机拍照时会触发该事件。在监听事件的回调函数里，实现对拍照的图片进行处理。

CameraService.ets文件相机服务构造函数：

constructor(imgReceiver?: image.ImageReceiver) {
    if (imgReceiver === undefined) {
      this.imageReceiver = image.createImageReceiver(QRCodeScanConst.IMG_DEFAULT_SIZE.WIDTH,
      QRCodeScanConst.IMG_DEFAULT_SIZE.HEIGHT, image.ImageFormat.JPEG, QRCodeScanConst.MAX_IMAGE_CAPACITY)
    } else {
      this.imageReceiver = image.createImageReceiver(imgReceiver.size.width, imgReceiver.size.height,
      imgReceiver.format, imgReceiver.capacity)
    }
  }

在 CameraService.ets 文件创建相机函数中，主要包含如下几个步骤：

● 获取支持的相机

根据context获取CameraManager，然后获取支持的相机（摄像头）。如果没有支持的相机，则然后。

如有支持的相机，则默认使用相机列表中的第一个。实际应用中，对于二维码扫描，需要使用后置相机摄像头。

● 获取相机输入输出流

首先，根据指定的相机，创建相机输入流this.cameraInput。

然后，获取相机的cameraOutputCapability参数，接着创建两个输出流：

1、 预览输出流

创建相机预览输出流this.previewOutput，使用的surfaceId来自XComponent组件。预览输出流，对应相机拍照前的图片预览。

2、相片输出流

创建相片输出流this.photoOutp