OpenHarmony实战开发-如何实现图像显示（预览）、照片保存（拍照）、视频录制（录像）等基础操作

相机应用通过控制相机，实现图像显示（预览）、照片保存（拍照）、视频录制（录像）等基础操作。相机开发模型为Surface模型，即应用通过Surface进行数据传递，通过ImageReceiver的surface获取拍照流的数据、通过XComponent的surface获取预览流的数据。

如果要实现双路预览，即将拍照流改为预览流，将拍照流中的surface改为预览流的surface，通过ImageReceiver的surface创建previewOutput，其余流程与拍照流和预览流一致。

约束与限制

• 暂不支持动态添加流，即不能在没有调用session.stop的情况下，调用addOutput添加流。
• 对ImageReceiver组件获取到的图像数据处理后，需要将对应的图像Buffer释放，确保Surface的BufferQueue正常轮转。

调用流程

双路方案调用流程图建议如下：

开发步骤

1.导入image接口。

创建双路预览流的SurfaceId，除XComponent组件的SurfaceId外，还需要使用ImageReceiver组件创建生成的SurfaceId，需要使用image模块提供的接口。

import image from '@ohos.multimedia.image';

2.创建ImageReceiver对象。

let size: image.Size = {
    width: 640,
    height: 480
  }
let receiver: image.ImageReceiver = image.createImageReceiver(size, image.ImageFormat.JPEG, 8);

3.获取ImageReceiver组件的SurfaceId。

async function getImageReceiverSurfaceId(receiver: image.ImageReceiver): Promise<string | undefined> {
  let ImageReceiverSurfaceId: string | undefined = undefined;
  if (receiver !== undefined) {
    console.info('receiver is not undefined');
    let ImageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId();
    console.info(`ImageReceived id: ${ImageReceiverSurfaceId}`);
  } else {
    console.error('createImageReceiver failed');
  }
  return ImageReceiverSurfaceId;
}

4.创建XComponent组件Surface。

//xxx.ets
// 创建XComponentController
@Component
struct XComponentPage {
  // 创建XComponentController
  mXComponentController: XComponentController = new XComponentController;

  build() {
    Flex() {
      // 创建XComponent
      XComponent({
        id: '',
        type: 'surface',
        libraryname: '',
        controller: this.mXComponentController
      })
        .onLoad(() => {
          // 设置Surface宽高（1920*1080），预览尺寸设置参考前面 previewProfilesArray 获取的当前设备所支持的预览分辨率大小去设置
          this.mXComponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
          // 获取Surface ID
          let surfaceId: string = this.mXComponentController.getXComponentSurfaceId();
        })
        .width('1920px')
        .height('1080px')
    }
  }
}

5.实现双路预览。

将步骤2、3生成的两路SurfaceId通过createPreviewOutput方法传递到相机服务，创建两路预览流，其余流程按照正常预览流程开发。

import camera from '@ohos.multimedia.camera';

async function createDualChannelPreview(cameraManager: camera.CameraManager, XComponentSurfaceId: string, receiver: image.ImageReceiver): Promise<void> {
  // 获取支持的相机设备对象
  let camerasDevices: Array<camera.CameraDevice> = cameraManager.getSupportedCameras();

  // 获取支持的模式类型
  let sceneModes: Array<camera.SceneMode> = cameraManager.getSupportedSceneModes(camerasDevices[0]);
  let isSupportPhotoMode: boolean = sceneModes.indexOf(camera.SceneMode.NORMAL_PHOTO) >= 0;
  if (!isSupportPhotoMode) {
    console.error('photo mode not support');
    return;
  }

  // 获取profile对象
  let profiles: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(camerasDevices[0], camera.SceneMode.NORMAL_PHOTO); // 获取对应相机设备profiles
  let previewProfiles: Array<camera.Profile> = profiles.previewProfiles;

  // 预览流1
  let previewProfilesObj: camera.Profile = previewProfiles[0];

  // 预览流2
  let previewProfilesObj2: camera.Profile = previewProfiles[0];

  // 创建 预览流1 输出对象
  let previewOutput: camera.PreviewOutput = cameraManager.createPreviewOutput(previewProfilesObj, XComponentSurfaceId);

  // 创建 预览流2 输出对象
  let imageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId();
  let previewOutput2: camera.PreviewOutput = cameraManager.createPreviewOutput(previewProfilesObj2, imageReceiverSurfaceId);

  // 创建cameraInput对象
  let cameraInput: camera.CameraInput = cameraManager.createCameraInput(camerasDevices[0]);

  // 打开相机
  await cameraInput.open();

  // 会话流程
  let photoSession: camera.PhotoSession = cameraManager.createSession(camera.SceneMode.NORMAL_PHOTO) as camera.PhotoSession;

  // 开始配置会话
  photoSession.beginConfig();

  // 把CameraInput加入到会话
  photoSession.addInput(cameraInput);

  // 把 预览流1 加入到会话
  photoSession.addOutput(previewOutput);

  // 把 预览流2 加入到会话
  photoSession.addOutput(previewOutput2);

  // 提交配置信息
  await photoSession.commitConfig();

  // 会话开始
  await photoSession.start();
}

6.通过ImageReceiver实时获取预览图像。

通过ImageReceiver组件中imageArrival事件监听获取底层返回的图像数据，详细的API说明请参考Image API参考。

import { BusinessError } from '@ohos.base';

function onImageArrival(receiver: image.ImageReceiver): void {
  receiver.on('imageArrival', () => {
    receiver.readNextImage((err: BusinessError, nextImage: image.Image) => {
      if (err || nextImage === undefined) {
        console.error('readNextImage failed');
        return;
      }
      nextImage.getComponent(image.ComponentType.JPEG, (err: BusinessError, imgComponent: image.Component) => {
        if (err || imgComponent === undefined) {
          console.error('getComponent failed');
        }
        if (imgComponent && imgComponent.byteBuffer as ArrayBuffer) {
          // do something...
        } else {
          console.error('byteBuffer is null');
        }
        nextImage.release();
      })
    })
  })
}

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、相关教学视频》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……