# QuickVisionDemo

**Repository Path**: BlueTintRains/QuickVisionDemo

## Basic Information

- **Project Name**: QuickVisionDemo
- **Description**: QuickVision封装HsrmongOS场景化视觉服务VisionKit，包含interactiveLiveness（人脸活体检测）、CardRecognition（卡证识别，包含身份证、银行卡、护照、驾驶证、行驶证）、DocumentScanner（文档扫描控件）、visionImageAnalyzer（AI识图），方便开发者快速集成。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2024-08-18
- **Last Updated**: 2025-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QuickVision

### 简介
QuickVision封装场景化视觉服务VisionKit，包含interactiveLiveness（人脸活体检测）、CardRecognition（卡证识别，包含身份证、银行卡、护照、驾驶证、行驶证）、DocumentScanner（文档扫描控件）、visionImageAnalyzer（AI识图），方便开发者快速集成。

![liveness](./screenshot/liveness.gif) ![cardrec](./screenshot/cardrec.gif)

### 版本
需要版本5.0.0(12)开始

### 下载安装
```
 ohpm install @manco/quickvision
```

### 使用说明
##### 一.人脸活体检测
1.引入组件
```typescript
import {
  QuickLiveness,
  QuickLivenessResult,
  RecogCompletionType,
  PermissionAuthType,
} from '@manco/quickvision';
```
2.在需要人脸活体检测的地方调用`startLivenessDetection`方法
```typescript
  //开始人脸活体检测
  startLiveness() {
    QuickLiveness.startLivenessDetection().then( (res: QuickLivenessResult) => {
      if (res.compType === RecogCompletionType.CompTypeSuceess) {
        //识别成功，返回识别图片
        this.image = res.mPixelMap
      }else if (res.compType === RecogCompletionType.CompTypePermissionFail) {
        //权限问题
        if (res.permissionAuthType === PermissionAuthType.AuthTypeUnauthorized) {
          promptAction.showToast({ message: '去设置页面设置' })
        }else if (res.permissionAuthType === PermissionAuthType.AuthTypeAuthorizedInvalid) {
          promptAction.showToast({ message: '检查module.json5是否配置权限' })
        }else {
          promptAction.showToast({ message: '其他权限问题' })
        }
      }else {
        promptAction.showToast({ message: res.message })
      }
    })
  }
```

##### 二.卡证识别
1.引入组件
```typescript
import {
  resultDataStorageName,
  routeName,
  CardIdentifyResult,
  CardParam,
  RecCardType,
  infoType
} from '@manco/quickvision'
```
2.传入识别证件类型type开始卡证识别
```typescript
  /**
   * type 识别卡片类型
   * */
  startCardRecognition(type: RecCardType) {
    let param: CardParam = {
      cardType: type,
    }
    router.pushNamedRoute({ name: routeName, params: param })
  }
```
3.设置证件识别结果监听对象，监听方法`resultDataChange`
```typescript
  @StorageLink(resultDataStorageName) @Watch('resultDataChange') resultData: CardIdentifyResult = new CardIdentifyResult()
```
4.证件识别结果方法`resultDataChange`处理数据
```typescript
  //识别到数据返回
  resultDataChange() {
    if (this.resultData) {
      if (this.resultData.cardType === (RecCardType.CardId
        || RecCardType.CardDriverLicense
        || RecCardType.CardVehicleLicense)) {
        //这三个有正反面

        let item: ItemData = this.dataList[this.resultData.cardType-1]
        item.frontImage = this.resultData.cardFrontInfo?.cardImageUri!
        item.backImage = this.resultData.cardBackInfo?.cardImageUri!

        //正面cardFrontInfo有名字和号码等信息
        if (this.resultData.cardType === RecCardType.CardId) {
          let info: infoType.idFront = this.resultData.cardFrontInfo as infoType.idFront
          item.name = info.name
          item.cardNum = info.idNumber
        }else if (this.resultData.cardType === RecCardType.CardDriverLicense) {
          let info: infoType.driverFront = this.resultData.cardFrontInfo as infoType.driverFront
          item.name = info.name
          item.cardNum = info.cardNum
        }else if (this.resultData.cardType === RecCardType.CardVehicleLicense) {

          let info: infoType.vehicleLicenseFront = this.resultData.cardFrontInfo as infoType.vehicleLicenseFront
          item.name = info.owner
          item.cardNum = info.licensePlateNumber
        }

      }else if (this.resultData.cardType === (RecCardType.CardBank || RecCardType.CardPassport)) {
        //这两个只有一面,取cardMainInfo
        let item: ItemData = this.dataList[this.resultData.cardType-1]

        if (this.resultData.cardType === RecCardType.CardBank) {

          let info: infoType.bank = this.resultData.cardMainInfo as infoType.bank
          item.name = info.validPeriod
          item.cardNum = info.bankNum
          item.frontImage = info.cardImageUri!

        }else if (this.resultData.cardType === RecCardType.CardPassport) {

          let info: infoType.passport = this.resultData.cardMainInfo as infoType.passport
          item.name = info.name
          item.cardNum = info.cardNum
          item.frontImage = info.cardImageUri!
        }

      }
      console.log(JSON.stringify(this.resultData))
    }
  }
```
### 其他代码示例
权限检查
```typescript
import { abilityAccessCtrl, common, Permissions, PermissionRequestResult } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { PermissionAuthResult, PermissionAuthType } from './PermissionAuthResult'

export function requestPermissionsFromUser(context: common.UIAbilityContext, ...permissions: Permissions[]): Promise<PermissionAuthResult> {
  return new Promise((callBack) => {
    let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
    // requestPermissionsFromUser会判断权限的授权状态来决定是否唤起弹窗
    atManager.requestPermissionsFromUser(context, permissions, (err: BusinessError, data: PermissionRequestResult) => {
      if (err) {
        callBack(new PermissionAuthResult(PermissionAuthType.AuthTypeError, JSON.stringify(err)))
      } else {
        let authResult: PermissionAuthType = PermissionAuthType.AuthTypeUnknown
        let resNumber = data.authResults[0]
        if (resNumber === -1) {
          authResult = PermissionAuthType.AuthTypeUnauthorized
        }else if (resNumber == 0) {
          authResult = PermissionAuthType.AuthTypeAuthorized
        }else if (resNumber == 2) {
          authResult = PermissionAuthType.AuthTypeAuthorizedInvalid
        }

        callBack(new PermissionAuthResult(authResult, ''))
      }
    })
  })
}
```
证件识别结果类
```typescript

export type InfoType = CardInfoIdFront
  | CardInfoIdBack
  | CardInfoBank
  | CardInfoPassport
  | CardInfoDriverFront
  | CardInfoDriverBack
  | CardInfoVehicleLicenseFront
  | CardInfoVehicleLicenseBack

export namespace infoType {
  export type idFront = CardInfoIdFront
  export type idBack = CardInfoIdBack
  export type bank = CardInfoBank
  export type passport = CardInfoPassport
  export type driverFront = CardInfoDriverFront
  export type driverBack = CardInfoDriverBack
  export type vehicleLicenseFront = CardInfoVehicleLicenseFront
  export type vehicleLicenseBack = CardInfoVehicleLicenseBack
}

//身份证人脸面
export class CardInfoIdFront {
  name?: string;//姓名
  sex?: string;//性别
  nationality?: string;//民族
  birth?: string;//出生日期
  address?: string;//住址
  idNumber?: string;//公民身份号码
  cardImageUri?: string;//身份证人像面图片uri（不含背景）
  originalImageUri?: string;//身份证人像面图片uri（含背景）
}

//身份证国徽面
export class CardInfoIdBack {
  authority?: string;//签发机关
  validPeriod?: string;//有效期限
  cardImageUri?: string;//身份证国徽面图片uri（不含背景）
  originalImageUri?: string;//身份证国徽面图片uri（含背景）
}

//银行卡
export class CardInfoBank {
  bankNum?: string;//银行卡号
  validPeriod?: string;//有效期限
  cardImageUri?: string;//银行卡图片uri（不含背景）
  originalImageUri?: string;//银行卡图片uri（含背景）
}

//护照
export class CardInfoPassport {
  cardNum?: string;//护照号码
  name?: string;//姓名
  sex?: string;//性别
  nationality?: string;//国籍
  birth?: string;//出生日期
  address?: string;//出生地点
  issueDate?: string;//签发日期
  issuePlace?: string;//签发地点
  expiryDate?: string;//有效期至
  authority?: string;//签发机关
  pochn?: string;//因私护照
  cardImageUri?: string;//护照图片uri（不含背景）
  originalImageUri?: string;//护照图片uri（含背景）
}

//驾驶证正面
export class CardInfoDriverFront {
  cardNum?: string;//证号
  name?: string;//姓名
  gender?: string;//性别
  nationality?: string;//国籍
  birth?: string;//出生日期
  address?: string;//住址
  dateOfFirstIssue?: string;//初次领证日期
  carClass?: string;//准驾车型
  validPeriodStart?: string;//有效期限-起始
  validPeriodEnd?: string;//有效期限-终止
  cardImageUri?: string;//驾驶证正面图片uri（不含背景）
  originalImageUri?: string;//驾驶证正面图片uri（含背景）
}

//驾驶证第二页
export class CardInfoDriverBack {
  cardNum?: string;//证号
  name?: string;//姓名
  archivesNum?: string;//档案编号
  cardImageUri?: string;//驾驶证反面图片uri（不含背景）
  originalImageUri?: string;//驾驶证反面图片uri（含背景）
}

//行驶证正面
export class CardInfoVehicleLicenseFront {
  licensePlateNumber?: string;//号牌号码
  vehicleType?: string;//车辆类型
  owner?: string;//所有人
  address?: string;//住址
  useCharacter?: string;//使用性质
  model?: string;//品牌型号
  vin?: string;//车辆识别代码
  engineNum?: string;//发动机号码
  registerDate?: string;//注册日期
  issueDate?: string;//发证日期
  cardImageUri?: string;//行驶证正面图片uri（不含背景）
  originalImageUri?: string;//行驶证正面图片uri（含背景）
}

//行驶证第二页
export class CardInfoVehicleLicenseBack {
  cardNum?: string;//号牌号码
  size?: string;//外廓尺寸
  remark?: string;//备注
  record?: string;//检验记录
  cardImageUri?: string;//行驶证反面图片uri（不含背景）
  originalImageUri?: string;//行驶证反面图片uri（含背景）
}
```

### 其他
反馈建议可联系<751824643@qq.com>