HarmonyOS 鸿蒙Next 自定义相机拍照

发布于 1周前 作者 htzhanglong 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义相机拍照

介绍

  • 使用@kit.CameraKit实现自定义相机拍照、双路预览功能
  • 使用@kit.MediaLibraryKit、@kit.ImageKit、@kit.CoreFileKit、安全保存控件SaveButton实现图片保存到系统图库
  • 使用@kit.MediaLibraryKit实现图库图片/视频选择
  • 使用@kit.CoreFileKit实现保存文件到文件管理器中

自定义相机拍照源码链接

效果图

使用说明

  • 打开应用，展示“拍照”、“图库”两个按钮。
  • 点击“拍照”按钮，即可进入拍照界面，注意当首次使用该功能时，需要用户进行授权，授权后才可使用。
  • 点击“图库”按钮，即可拉起系统相册，访问系统相册图片进行保存和读取。

实现思路

主页的设计

  1. 设置拍照按钮，点击后进行授权询问，requestPermissionsFromUser会判断权限的授权状态来决定是否唤起弹窗，用户拒绝授权，提示用户必须授权才能访问当前页面的功能，并引导用户到系统设置中打开相应的权限。授权后即可跳转自定义照相机页面。
.onClick(() => {
  let permissions: Array<Permissions> = [
    ···
  ];
  let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
  atManager.requestPermissionsFromUser(this.context, permissions).then((data: PermissionRequestResult) => {
    ···
  })
}
  1. 设置图库按钮，点击后即可拉起系统相册，进行图片的保存和读取。
Button('图库')
  .width(200)
  .height(30)
  .onClick(() => {
    this.imagePicker();
  })
  .margin({ top: 30 })

  1. 构造imagePicker()函数，拉起图片选择。

    imagePicker() {
  try {
 let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
 photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
 photoSelectOptions.maxSelectNumber = 1;
 let photoPicker = new photoAccessHelper.PhotoViewPicker();
 photoPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
   this.curFile = photoSelectResult.photoUris[0];
   if (this.curFile) {
     ···
   }
 })
  } 
}

  2. 构造isVideoType()函数，用以判断所要保存的文件是image类型还是video类型。如果typeId == uniformTypeDescriptor.UniformDataType.IMAGE.toString()，则返回false；如果typeId == uniformTypeDescriptor.UniformDataType.VIDEO.toString()，则返回true。

isVideoType(fileUri: string): boolean {
  try {
    let fileExtention = fileUri.substring(fileUri.lastIndexOf('.'));
    let typeId = uniformTypeDescriptor.getUniformDataTypeByFilenameExtension(fileExtention);
    ···
    let typeObj: uniformTypeDescriptor.TypeDescriptor = uniformTypeDescriptor.getTypeDescriptor(typeId);
    return typeObj.belongingToTypes.some((s) => s == uniformTypeDescriptor.UniformDataType.VIDEO.toString())
  } 
}

自定义相机的页面的实现

  1. 构建createCameraManager()函数，创建camera对象，监听相机状态变化
createCameraManager() {
  let cameraManager: camera.CameraManager = camera.getCameraManager(this.context);
  this.cameraManager = cameraManager;
  ···
  this.cameraManager.on();
}
  1. 创建安全控件按钮,使用安全控件创建文件，选择通过文件管理写入文件
SaveButton(this.saveButtonOptions)
    .onClick(async (event, result: SaveButtonOnClickResult) => {
      ···
      ···
      ···
    })
  1. 创建拍照按钮，通过拍照流实现：点击拍照，从imageReceiver中获取图片,实现拍照。
.onClick(async () => {
  let photoCaptureSetting: camera.PhotoCaptureSetting = {
    quality: camera.QualityLevel.QUALITY_LEVEL_HIGH,
    rotation: camera.ImageRotation.ROTATION_0 
  }
  await this.photoOutput?.capture(photoCaptureSetting).catch((error: BusinessError) => {
    console.error(`CameraDemo Failed to capture the photo ${error.message}`); 
  })
  this.hasPicture = true;
})
  1. 获取支持指定的相机设备对象
  let cameraDevices: Array<camera.CameraDevice> = [];
  1. 创建相机输入流
try {
  this.cameraInput = this.cameraManager.createCameraInput(cameraDevices[0]);
}
  1. 打开相机，获取指定的相机设备对象支持的模式，获取相机设备支持的输出流能力，创建相机预览输出流，监听previewOutput错误信息，监听previewOutput2错误信息，创建拍照输出流，调用上面的回调函数来保存图片，创建相机会话，监听session错误信息，开始会话配置，向会话中添加相机输入流，向会话中添加预览输出流等依次操作。

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ets
|---pages
|   |---CameraDemo.ets              // 自定义相机拍照页面
|   |---FilePickerDemo.ets          // 图库文件选择页面
|   |---Index.ets                   // 入口页面

约束与限制

  1. 需要的权限
    • ohos.permission.CAMERA
    • ohos.permission.READ_MEDIA
    • ohos.permission.WRITE_MEDIA
    • ohos.permission.MEDIA_LOCATION
  2. 运行环境
    • 手机ROM版本：ALN-AL00 5.0.0.102(SP8C00E73R4P17logpatch02)
    • IDE：DevEco Studio 5.0.3.910
    • SDK：HarmonyOS 5.0.0 Release（API 12）

更多关于HarmonyOS 鸿蒙Next 自定义相机拍照的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 自定义相机拍照的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中，自定义相机拍照功能可以通过以下场景化代码实现。假设你已经创建了一个鸿蒙应用，并添加了必要的权限（如CAMERA权限）。

自定义相机拍照代码示例

  1. 布局文件（XML）：

    <DirectionalLayout
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">
    <Camera
        ohos:id="$+id:camera"
        ohos:width="match_parent"
        ohos:height="0vp"
        ohos:weight="1"/>
    <Button
        ohos:id="$+id:capture"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="Capture"/>
</DirectionalLayout>

  2. 逻辑代码（JavaScript/ETS）：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct CameraPage {
    @State camera: Camera | null = null;

    @Build
    MyCamera() {
        Column() {
            Camera(this.camera)
                .width('100%')
                .height('90%')
            Button('Capture')
                .onClick(() => {
                    if (this.camera) {
                        this.camera.captureImage((err, data) => {
                            if (!err) {
                                // 处理拍照结果
                            }
                        });
                    }
                })
        }
    }
}

以上代码展示了如何在鸿蒙应用中嵌入相机控件并实现拍照功能。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部