#跟着若城学鸿蒙# 鸿蒙-卡证识别

前言

在移动端实名认证的过程中,需要移动端识别图片是不是身份证,并且识别出身份证上的相关信息,上报到服务端,减少后台人工比对的工作量。

我们之前是使用的服务端api,将拍好的照片先上传至服务端识别,然后由服务端告诉移动端相关信息。在鸿蒙上看到了Vision Kit(场景视觉化服务)中有卡证识别,提供身份证(目前仅支持中国大陆二代身份证,且不包含民汉双文身份证)、行驶证、驾驶证、护照、银行卡等证件的结构化识别服务,满足卡证的自动分类功能,系统可自动判断所属卡证类型并返回结构化信息和卡证图片信息。

开发

对于需要填充卡证信息的场景,如身份证、银行卡信息等,可使用卡证识别控件读取OCR(Optical Character Recognition)信息,将结果信息返回后进行填充。支持单独识别正面、反面,或同时进行双面识别。

我们先来看一下身份证识别相关配置。

使用的控件是CardRecognition,直接嵌入到页面上就可以该控件会直接调用相机进行识别,这里不需要我们申请权限,类似与 SaveButton 这种安全控件。

使用之后会被应用隐私数据访问记录中记录下来。

使用该控件之前需要先判断下设备是否支持.

TypeScript 复制代码
 if(canIUse("SystemCapability.AI.Component.CardRecognition")){
      CardRecognition({
        .....
      })
 }

据其他开发者反馈,某些设备上这个canIUse方法会失效,不过我还没遇到过。

接下来配置一下需要用到的属性

TypeScript 复制代码
CardRecognition({
    supportType:CardType.CARD_ID,
    cardSide:this.cardSide,
    cardRecognitionConfig:{
    isPhotoSelectionSupported:true,
    defaultShootingMode:ShootingMode.AUTO
    },
    callback:async(params:CallbackParam)=>{
    if(params.code == 200 && params.cardInfo){
        console.error("识别成功")
        console.error(`${ JSON.stringify(params.cardInfo)}`)
        if(this.cardSide == CardSide.FRONT){
        emitter.emit("id_card_recognition",{data:params.cardInfo.front})
        }else{
        emitter.emit("id_card_recognition",{data:params.cardInfo.back})
        }
        router.back()

    }else{
        console.error("识别失败")
        promptAction.showToast({message:"识别失败"})
        router.back()
    }
    }
})

这里的supportTypecallback属性是必填项。其中supportType属性我们这里设置的是CardType.CARD_ID,表示要识别身份证信息,注意导入包时 import { CardType } from '@hms.ai.CardRecognition';,不要搞混了。

这里还支持其他属性,可以在官网查询CardType

然后是cardSide属性,这个是选填的,虽然文档上说默认值为CardSide.DEFAULT,解释也是说卡证默认面。如身份证为人像面,其他卡证为正面。,但在实际操作中会发现,使用默认值做身份证识别的时候,是需要识别完正面再识别反面。

但我们这里希望每次只识别一面就行。因此我们从上个页面传入参数,来表示我们需要识别哪个。

cardRecognitionConfig属性中,defaultShootingMode设置为自动拍照,也就是当识别到是身份证时就直接拍照了,不需要手动点拍照之后再进行识别。
isPhotoSelectionSupported这个属性就很好理解了,为true会在页面左下角显示图库按钮,支持从图库选择图片进行识别。

最后就是callback了,有一个类型为CallbackParam的参数,这个参数对象只有三个属性:code:numbercardType:CardTypecardInfo:Record<string, Record<string, string>>。当code值为200时表示识别成功,我们可以在cardInfo中获取识别到的信息。

第一张图就是识别过程中截取的一张图,会提示请对准身份证人面像,下面会有一个安全访问 标识,该标识会自动消失。当检测到画面中有身份证时,会有边框提示。识别成功后会捕捉一张身份证的图片,该图片对应的字段是cardImageUri,也就是最右边图片中的中间那张图,在最右边这张图上我们也可以看到常用的能识别到的字段。

当然对于银行卡识别也是一样的,具体的取值可以看官网介绍cardInfo

相关推荐
zhanshuo12 小时前
如何用 ArkTS 实现丝滑又安全的表单输入验证?一篇文章讲清楚!
harmonyos
zhanshuo12 小时前
掌握 ArkTS 复杂数据绑定:从双向输入到多组件状态同步
harmonyos
SuperHeroWu713 小时前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
华为·harmonyos
jz_ddk13 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
liuhaikang18 小时前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛1118 小时前
HarmonyOS应用上架流程详解
华为·harmonyos
zhanshuo2 天前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo2 天前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7982 天前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw2 天前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos