HarmonyOS 鸿蒙Next中相机功能的使用

HarmonyOS 鸿蒙Next中相机功能的使用 在鸿蒙相机功能的开发中，在拍摄身份证或者银行卡等物品时，如何在拍摄页面上添加辅助框？就是让用户把相关证件放到某一个区域内再进行拍摄的那种辅助框？

6 回复

【背景知识】

CardRecognition的返回结果参数是CallbackParam，其中的cardInfo是具体的卡证识别信息。以身份证人像面为例，卡证识别返回结果的图片部分为：

参数名 类型 说明
cardImageUri string 身份证人像面图片uri（不含背景）。
originalImageUri string 身份证人像面图片uri（含背景）。
photoUri string 身份证人像面内的人像图片uri。

对于不同的证件，卡证识别返回结果图片部分均为String类型的uri，并且该uri没有有效期，但是下次识别后会删除。一个应用的该模块最多会有两个图片，可以通过OpenMode.READ_ONLY方式将图片内容复制出来。

【解决方案】
建议使用官方卡证识别方案。卡证识别方案中主要使用CardRecognition组件进行识别，通过supportType定义卡证类型、cardSide定义正反面、callback定义识别后执行的回调函数。示例以识别身份证为例：

import { CardRecognition, CallbackParam, CardType, CardSide } from "@kit.VisionKit";
import { image } from '@kit.ImageKit'
import fs from '@ohos.file.fs';

@Entry
@Component
struct Index {
  @State showOCR:boolean = false
  @State src?: image.PixelMap = undefined

  build() {
    Stack() {
      Column(){
        Button('click me')
          .onClick(() =>{
            this.showOCR = true
          })
        Image(this.src)
      }
      if(this.showOCR) {
        this.CardOCRPage()
      }
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  CardOCRPage() {
    CardRecognition({
      // 此处选择身份证类型作为示例
      supportType: CardType.CARD_ID,
      cardSide:CardSide.FRONT,
      callback: async (params:CallbackParam)=>{
        this.showOCR = false
        if(params.cardInfo) {
          let photoUri = params.cardInfo['front']['photoUri'];
          let file = fs.openSync(photoUri, fs.OpenMode.READ_ONLY);
          console.info('file fd:' + file.fd);
          const imageSource: image.ImageSource = image.createImageSource(file.fd);
          let decodingOptions: image.DecodingOptions = {
            editable: true,
            desiredPixelFormat: 3,
          }
          this.src = await imageSource.createPixelMap(decodingOptions);
        }
      }
    })
      .width('100%')
      .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中相机功能的使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


当然的是自定义相机啦！

可以使用vision kit中的卡证识别

目前需求时对卡证进行拍照，不需要进行识别， 而且我在其他资料里看到vision kit 有三年的免费使用期， 也就是说后期可能收费。iOS和安卓上会有一个预览层，然后可以在上面添加图片来实现卡证拍摄的辅助框，不知道鸿蒙有没有类似的previewLayer。

在HarmonyOS Next中，相机功能主要通过@ohos.multimedia.camera API实现。开发者需先获取CameraManager实例，通过getSupportedCameras()查询设备支持的摄像头列表。创建CameraInput实例时需指定摄像头类型（如主摄、前置）。通过PreviewOutput配置预览画面输出，可绑定XComponent或Surface作为显示载体。拍照功能使用PhotoOutput，支持设置分辨率、质量等参数。视频录制需创建VideoOutput，配置帧率、编码格式等。所有操作需在FA模型或Stage模型的Ability中申请ohos.permission.CAMERA权限。相机服务采用异步回调机制，状态变化通过订阅事件监听。

在HarmonyOS Next中实现相机辅助框功能，可以通过以下步骤完成：

  1. 使用CameraKit API创建相机预览界面：
CameraKit cameraKit = CameraKit.getInstance(context);
cameraKit.createCameraPreview(cameraConfig);
  1. 自定义相机预览视图时，重写onDraw方法绘制辅助框：
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 绘制身份证辅助框
    Paint paint = new Paint();
    paint.setColor(Color.WHITE);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(5f);
    
    // 计算辅助框位置（示例为居中显示）
    int width = getWidth();
    int height = getHeight();
    RectF rectF = new RectF(width*0.2f, height*0.3f, width*0.8f, height*0.7f);
    canvas.drawRect(rectF, paint);
}
  1. 在布局文件中添加自定义相机视图：
<com.example.CustomCameraView
    ohos:id="$+id:camera_view"
    ohos:width="match_parent"
    ohos:height="match_parent"/>
  1. 如果需要实现自动检测功能，可以结合图像识别：
// 使用AI能力检测证件位置
AIImageAnalyzer analyzer = new AIImageAnalyzer();
analyzer.setAnalyzer((image, result) -> {
    // 检测到证件后调整辅助框位置
    updateGuideFrame(result.getBoundingBox());
});

注意辅助框的绘制要考虑不同设备的屏幕比例，建议使用相对坐标而非绝对坐标。对于身份证等特定证件，可以按照标准尺寸比例(85.6mm×54mm)来设置辅助框的宽高比。

回到顶部