#跟着若城学鸿蒙# 鸿蒙-卡证识别
前言
在移动端实名认证的过程中,需要移动端识别图片是不是身份证,并且识别出身份证上的相关信息,上报到服务端,减少后台人工比对的工作量。
我们之前是使用的服务端api,将拍好的照片先上传至服务端识别,然后由服务端告诉移动端相关信息。在鸿蒙上看到了Vision Kit(场景视觉化服务)中有卡证识别,提供身份证(目前仅支持中国大陆二代身份证,且不包含民汉双文身份证)、行驶证、驾驶证、护照、银行卡等证件的结构化识别服务,满足卡证的自动分类功能,系统可自动判断所属卡证类型并返回结构化信息和卡证图片信息。
开发
对于需要填充卡证信息的场景,如身份证、银行卡信息等,可使用卡证识别控件读取OCR(Optical Character Recognition)信息,将结果信息返回后进行填充。支持单独识别正面、反面,或同时进行双面识别。
我们先来看一下身份证识别相关配置。
使用的控件是CardRecognition
,直接嵌入到页面上就可以该控件会直接调用相机进行识别,这里不需要我们申请权限,类似与 SaveButton 这种安全控件。
使用之后会被应用隐私数据访问记录中记录下来。
使用该控件之前需要先判断下设备是否支持.
if(canIUse("SystemCapability.AI.Component.CardRecognition")){CardRecognition({.....})}
据其他开发者反馈,某些设备上这个canIUse方法会失效,不过我还没遇到过。
接下来配置一下需要用到的属性
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()}}
})
这里的supportType
和callback
属性是必填项。其中supportType
属性我们这里设置的是CardType.CARD_ID
,表示要识别身份证信息,注意导入包时 import { CardType } from '@hms.ai.CardRecognition';
,不要搞混了。
这里还支持其他属性,可以在官网查询CardType
然后是cardSide属性,这个是选填的,虽然文档上说默认值为CardSide.DEFAULT
,解释也是说卡证默认面。如身份证为人像面,其他卡证为正面。
,但在实际操作中会发现,使用默认值做身份证识别的时候,是需要识别完正面再识别反面。
但我们这里希望每次只识别一面就行。因此我们从上个页面传入参数,来表示我们需要识别哪个。
在cardRecognitionConfig
属性中,defaultShootingMode
设置为自动拍照,也就是当识别到是身份证时就直接拍照了,不需要手动点拍照之后再进行识别。isPhotoSelectionSupported
这个属性就很好理解了,为true会在页面左下角显示图库按钮,支持从图库选择图片进行识别。
最后就是callback
了,有一个类型为CallbackParam
的参数,这个参数对象只有三个属性:code:number
、cardType:CardType
、cardInfo:Record<string, Record<string, string>>
。当code值为200时表示识别成功,我们可以在cardInfo中获取识别到的信息。



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