鸿蒙应用开发-相机服务与相机捕捉组件

前文

本库旨在为开发者提供一套简单易用的图像捕捉组件, 帮助开发者快速实现图像捕捉功能. 并且如果组件不满足需求,也可以直接使用封装好的相机服务,帮助更快捷的开发相关功能

先上效果图

安装

代码仓库

ohpm install @pharos/camera_capture

图像捕捉组件

引入组件

import { CameraCapture } from '@pharos/camera_capture';

使用方式

 @State triggerCaptureEvent: number = 0 // 值发生改变时触发拍照事件
 @State previewImagePixelMap: image.PixelMap | undefined = undefined // 捕捉图片出现预览图后, 置空则关闭预览图显示
  
 CameraCapture.capture({ CameraCapture({
   triggerCaptureEvent: this.triggerCaptureEvent, // 触发拍照事件
   onCaptureCallback: (imageBuffer: Promise<buffer.Buffer>) => {
     imageBuffer.then(buf => {
       console.log('base64 = ', buf.toString('base64'))
     }).catch((e: BusinessError) => {
       console.error('error = ', JSON.stringify(e))
     });
   }, // 捕捉图像回调
   onCatchErrorCallback: (err) => {
     console.error('error = ', JSON.stringify(err))
   }, // 捕捉异常
   isShowPreview: true, // 拍照结束是否展示预览图
   previewArea: undefined, // 相机预览区域, 若空则默认使用渲染区域大小
   pickArea: undefined, // 相机拍照区域, 若空则使用使用渲染区域大小
   flashMode: camera.FlashMode.FLASH_MODE_AUTO, // 闪光灯模式
   previewImagePixelMap: this.previewImagePixelMap, // 预览图像素数据
  })

相机服务

import { cameraService } from '@pharos/camera_capture';

如果图像捕捉组件不满足你的需求还是可以使用此服务,进行深度定制, 此服务指在简化开发者重复创建session、preview操作, 目前提供了三个模块

    cameraService.Preview;
    cameraService.Session;
    cameraService.Photo;

其中 Preview 支持双预览设置

使用方式

  private xcomponentController: XComponentController = new XComponentController()
  private cameraSession: cameraService.Session = new cameraService.Session()
  private cameraPreview: cameraService.Preview = new cameraService.Preview()
  
  aboutToDisappear(): void {
    this.cameraPreview.releaseCamera()
    this.cameraSession.releaseCamera()
  }
  
  async handleInitCamera() {
    if (!this.readyXComponentLoad || !this.previewArea) {
      return
    }
    
    // 需要在渲染组件与预览区域准备好后才能初始化相机
    // 否则会导致相机初始化失败

    const cameraSettings: cameraService.PreviewCameraSettings = {
      context: getContext(this),
      cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK,
      sceneMode: camera.SceneMode.NORMAL_PHOTO,
      expectSize: {
        width: this.previewArea ? vp2px(this.previewArea.width as number) : 0,
        height: this.previewArea ? vp2px(this.previewArea.height as number) : 0,
      },
      xComponentSurfaceId: this.xcomponentController.getXComponentSurfaceId()
    }
    await this.cameraSession.initCamera(cameraSettings).then(async session => {
      const previewOutputs =
        await this.cameraPreview.initCamera(cameraSettings).catch((err: BusinessError | cameraService.Error) => {
          console.error('相机预览初始化错误', JSON.stringify(err))
          this.onCatchErrorCallback?.(err)
          return undefined
        })
      if (!previewOutputs || previewOutputs.length == 0) {
        return
      }
      await session.startSession(previewOutputs).then(() => {
        this.onChangeFlashMode()
      }).catch((err: BusinessError | cameraService.Error) => {
        console.error('相机会话初始化错误', JSON.stringify(err))
        this.onCatchErrorCallback?.(err)
      })
    }).catch((err: BusinessError) => {
      console.error('相机开启错误1', JSON.stringify(err))
      this.onCatchErrorCallback?.(err)
    })
  }

如果仍然不能满足, 提供了基础类cameraService.Base<T>, 内部已经实现好部分方法

    /// 匹配最佳matchProfile
    protected matchProfile(profiles: Array<camera.Profile>, expectRate: number): camera.Profile | undefined
    
    /// 查找相机设备
    protected findCameraDevice(
      cameraManager: camera.CameraManager,
      cameraPosition: camera.CameraPosition, 
      cameraType?: camera.CameraType): camera.CameraDevice | undefined

    /// 获取相机管理器
    protected getCameraManager(context: Context): Promise<camera.CameraManager>

    /// 获取预期宽高比
    /// 在 {matchProfile} 中使用
    protected getExpectRate(expectSize: camera.Size)

总结

如果有任何问题或需求可以向代码仓库提交issues

撰写不易,请给个赞👍吧