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

前言

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

我们之前是使用的服务端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()
    }
    }
})

这里的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