【鸿蒙实战开发】基于CameraKit对相机进行操作

场景描述

用户在进行拍照、录像等操作时需要通过相机获取捕获图像的能力，开发者可以通过CameraKit相关相机接口对相机进行操作。拍照是相机的最重要功能之一，拍照模块基于相机复杂的逻辑，为了保证用户拍出的照片质量，在中间步骤可以设置分辨率、闪光灯、焦距、照片质量及旋转角度等信息。

场景一：拍照并返回图片

场景二：切换摄像头场景三：打开关闭闪光灯

方案描述

场景一：开发相机功能进行拍照并返回图片

效果图

自定义相机创建一路预览和一路拍照，同时进行实时画面的预览和拍照并返回图像

方案一通过camerakit自定义相机拍照

1.在开发相机应用时，需要先申请相机相关权限。

2.创建一个相机设备，应用通过调用和控制相机设备完成拍照基础操作。

3.创建一个相机会话，在会话中可以进行相机的输入流和输出流，添加闪光灯、调整焦距等配置。

4.创建输出流，相机开发模型为Surface模型，即应用通过Surface进行数据传递，通过ImageReceiver的surface获取拍照流的数据、通过XComponent的surface获取预览流的数据进行预览。如果要实现双路预览可将拍照流改为预览流。

5.获取拍照返回的图片并显示出来。

核心代码

1.在module.json5文件中配置申请相机所需要的权限

"requestPermissions": [

{

  "name":

  "ohos.permission.CAMERA",

  "reason":

  "$string:EntryAbility_desc",

  "usedScene":

  {

    "abilities": [

    "EntryAbility"

    ]

  }

}

,

{

  "name":

  "ohos.permission.MICROPHONE",

  "reason":

  "$string:EntryAbility_desc",

  "usedScene":

  {

    "abilities": [

    "EntryAbility"

    ]

  }

}

,

{

  "name":

  "ohos.permission.MEDIA_LOCATION",

  "reason":

  "$string:EntryAbility_desc",

  "usedScene":

  {

    "abilities": [

    "EntryAbility"

    ]

  }

}

,

{

  "name":

  "ohos.permission.WRITE_MEDIA",

  "reason":

  "$string:EntryAbility_desc",

  "usedScene":

  {

    "abilities": [

    "EntryAbility"

    ]

  }

}

,

{

  "name":

  "ohos.permission.READ_MEDIA",

  "reason":

  "$string:EntryAbility_desc",

  "usedScene":

  {

    "abilities": [

    "EntryAbility"

    ]

  }

  ,

}

]

校验是否申请授权：

async function grantPermission(): Promise<boolean> {

  const PERMISSIONS: Array<Permissions> = [

    'ohos.permission.CAMERA',

  ];

  try {

    // 获取应用程序的accessTokenID

    let bundleInfo: bundleManager.BundleInfo =

      await bundleManager.getBundleInfoForSelf(

        bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION

      );

    let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;

    let tokenId = appInfo.accessTokenId;

    let atManager = abilityAccessCtrl.createAtManager();

    let pems: Array<Permissions> = [];

    for (let i = 0; i < PERMISSIONS.length; i++) {

      let state = await atManager.checkAccessToken(tokenId, PERMISSIONS[i]);

      console.info(TAG, `grantPermission  checkAccessToken ${PERMISSIONS[i]} + : ${JSON.stringify(state)}`);

      if (state !== abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {

        pems.push(PERMISSIONS[i]);

      }

    }

    if (pems.length > 0) {

      console.info(TAG, 'grantPermission  requestPermissionsFromUser :' + JSON.stringify(pems));

      let result = await atManager.requestPermissionsFromUser(GlobalContext.get().getCameraAbilityContext(), pems);

      let grantStatus: Array<number> = result.authResults;

      let length: number = grantStatus.length;

      for (let i = 0; i < length; i++) {

        // console.info(TAG, `grantPermission  requestPermissionsFromUser ${result.permissions[i]} + : ${grantStatus[i]}`);

        if (grantStatus[i] === 0) {

          // 用户授权，可以继续访问目标操作

        } else {

          // 用户拒绝授权，提示用户必须授权才能访问当前页面的功能

          console.log(TAG + 'grantPermission  fail ');

          return false;

        }

      }

    }

    // 授权成功

    console.info(TAG, 'grantPermission  success ');

    return true;

  } catch (e) {

    console.info(TAG, 'grantPermission  fail ');

    return false;

  }

}

2.创建一个相机设备

2.1 通过getCameraManage方法，获取cameraManager对象，用来管理相机的状态能力。

function getCameraManager(): camera.CameraManager {

  return camera.getCameraManager(GlobalContext.get().getCameraAbilityContext());

}

通过cameraManager类中的getSupportedCameras方法，获取当前设备支持的相机列表，列表中存储了设备支持的所有相机ID。若列表不为空，则说明列表中的每个ID都支持独立创建相机对象；否则，说明当前设备无可用相机，不可继续后续操作。

function getCameraDevices(cameraManager: camera.CameraManager): Array<camera.CameraDevice> {

  let cameraArray: Array<camera.CameraDevice> = cameraManager.getSupportedCameras();

  if (cameraArray != undefined && cameraArray.length <= 0) {

    console.error("cameraManager.getSupportedCameras error");

    return [];

  }

  for (let index = 0; index < cameraArray.length; index++) {

    console.info('cameraId : ' + cameraArray[index].cameraId); // 获取相机ID

    console.info('cameraPosition : ' + cameraArray[index].cameraPosition); // 获取相机位置

    console.info('cameraType : ' + cameraArray[index].cameraType); // 获取相机类型

    console.info('connectionType : ' + cameraArray[index].connectionType); // 获取相机连接类型

  }

  return cameraArray;

}

2.2 通过上一步返回的CameraDevice，使用createCameraInput创建一个相机输入流 。通过getSupportedOutputCapability方法，获取当前设备支持的所有输出流，如预览流、拍照流等.

async getSupportedOutputCapability(cameraDevice: camera.CameraDevice, cameraManager: camera.CameraManager): Promise<camera.CameraOutputCapability | undefined> {

  // 创建相机输入流

  let cameraInput: camera.CameraInput | undefined = undefined;

  try {

  cameraInput = cameraManager.createCameraInput(cameraDevice);

} catch (error) {

  let err = error as BusinessError;

  console.error('Failed to createCameraInput errorCode = ' + err.code);

}

if (cameraInput === undefined) {

  return undefined;

}

// 监听cameraInput错误信息

cameraInput.on('error', cameraDevice, (error: BusinessError) => {

  console.info(`Camera input error code: ${error.code}`);

});

cameraInput = cameraInput

// 打开相机

await cameraInput.open();

// 获取相机设备支持的输出流能力

let cameraOutputCapability: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(cameraDevice);

if (!cameraOutputCapability) {

  console.error("cameraManager.getSupportedOutputCapability error");

  return undefined;

}

console.info("outputCapability: " + JSON.stringify(cameraOutputCapability));

return cameraOutputCapability;

}

3.创建相机会话相机使用预览、拍照、录像、元数据功能前，均需要创建相机会话。在会话中，可以完成以下功能：

配置相机的输入流和输出流。相机在拍摄前，必须完成输入输出流的配置。配置输入流即添加设备输入，对用户而言，相当于选择设备的某一摄像头拍摄；配置输出流，即选择数据将以什么形式输出。当应用需要实现拍照时，输出流应配置为预览流和拍照流，预览流的数据将显示在XComponent组件上，拍照流的数据将通过ImageReceiver接口的能力保存下来。

添加闪光灯、调整焦距等配置。

会话切换控制。应用可以通过移除和添加输出流的方式，切换相机模式。如当前会话的输出流为拍照流，应用可以将拍照流移除，然后添加视频流作为输出流，即完成了拍照到录像的切换。

需要先通过createCaptureSession方法创建一个会话；然后调用Session类中的beginConfig方法配置会话；之后对会话进行使能，即向会话中添加相机的输入流和输出流。这里实现相机拍照功能，所以需要添加预览流previewOutput和拍照流photoOutput，预览流和拍照流创建方案见下一步；最后调用Session类中的commitConfig和start方法提交相关配置，并启动会话。

// 会话流程

cameraSession = cameraManager.createCaptureSession();

// 开始配置会话

cameraSession.beginConfig();

// 把CameraInput加入到会话

cameraSession.addInput(cameraInput);

// 把 预览流 加入到会话

cameraSession.addOutput(previewOutput)

// 把 拍照流 加入到会话

cameraSession.addOutput(photoOutPut);

// 提交配置信息

await cameraSession.commitConfig();

// 会话开始

await cameraSession.start();

4.实现相机的拍照功能

4.1创建预览流和拍照流这里通过前一步getSupportedOutputCapability来获取相机设备的profile对象，profiles.previewProfiles为支持的预览配置信息profiles.photoProfiles为支持的拍照配置信息通过createPreviewOutput和createPhotoOutput方法来分别创建预览流和拍照流。（预览流和拍照流所需要的surface见下一步）

// 获取profile对象

let profiles: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(camerasDevices[0]); // 获取对应相机设备profiles

let previewProfiles: Array<camera.Profile> = profiles.previewProfiles

Logger.debug("createDualChannelPreview-- previewProfiles:" + previewProfiles.length)

// 预览流

let previewProfilesObj: camera.Profile = previewProfiles[0];

console.log('预览配置列表：'+JSON.stringify(previewProfiles))

console.log('预览配置个数num='+JSON.stringify(previewProfiles.length))

// 拍照流

let previewProfilesObj2: camera.Profile = profiles.photoProfiles[0];

// 创建 预览流 输出对象

previewOutput = cameraManager.createPreviewOutput(previewProfilesObj, XComponentSurfaceId);

// 创建 拍照流 输出对象

let imageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId();

photoOutPut = cameraManager.createPhotoOutput(previewProfilesObj2, imageReceiverSurfaceId);

4.2进行预览和拍照功能通过xcomponent组件来显示相机的预览画面，这个里可以获取xcomponent的Surfaceid传入上一步供预览对象使用

// 创建XComponent

XComponent({

  id: '',

  type: 'surface',

  libraryname: '',

  controller: this.mXComponentController

})

  .onLoad(async () => {

    // 设置Surface宽高（1920*1080），预览尺寸设置参考前面 previewProfilesArray 获取的当前设备所支持的预览分辨率大小去设置

    // 预览流与录像输出流的分辨率的宽高比要保持一致

    this.mXComponentController.setXComponentSurfaceSize({ surfaceWidth: cameraWidth, surfaceHeight: cameraHeight });

    // 获取Surface ID

    this.surfaceId = this.mXComponentController.getXComponentSurfaceId();

  })

通过 ImageReceiver 来接收拍照的图片数据。先用image.createImageReceiver创建ImageReceiver 实例，然后使用getReceivingSurfaceId获取一个surface id供拍照流使用。这里通过ImageReceiver.on在接收图片时注册回调，通过readNextImage读取下一张图片，并将图片保存为pixelmap。

createImageReceiver(): image.ImageReceiver {

  let receiver: image.ImageReceiver = image.createImageReceiver(cameraWidth, cameraHeight, 4, 8);

  receiver.on("imageArrival",async (e,data)=>{

    let imageData=await receiver.readNextImage()

    let imgComponent=await imageData.getComponent(image.ComponentType.JPEG)

    image.createImageSource(imgComponent.byteBuffer)

      .createPixelMap().then((px)=>{

      this.pixma=px

    })

  })

  return receiver;

}

let imageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId();

实现拍照功能。通过PhotoOutput.capture来触发一次拍照

Button() {

  Text("拍照")

    .fontColor(Color.Black)

    .alignSelf(ItemAlign.Center)

    .onClick(() => {

      // this.capture(this.photoOutPut, null)

      photoOutPut.capture(settings, (err: BusinessError) => {

        if (err) {

          console.error(`Failed to capture the photo. error: ${JSON.stringify(err)}`);

          return;

        }

        console.info('Callback invoked to indicate the photo capture request success.');

      });

    })

}

.width(100)

.height(100)

方案二：通过cammerapicker完成拍照

使用 cameraPicker 拉起系统相机pickpicker.pick 表示拉起相机选择器，根据媒体类型进入相应的模式。

try {

  let pickerProfile = new CameraPosition(camera.CameraPosition.CAMERA_POSITION_BACK,uri)

  //前置摄像机传CAMERA_POSITION_FRONT，后置摄像机传CAMERA_POSITION_BACK，saveuri传想存到对应沙箱的uri

  let pickerResult: picker.PickerResult = await picker.pick(mContext,

    [picker.PickerMediaType.VIDEO, picker.PickerMediaType.VIDEO], pickerProfile);

  console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));

} catch (error) {

  let err = error as BusinessError;

  console.error(`the pick call failed. error code: ${err.code}`);

}

场景二：切换摄像头

效果图

方案

在通过getSupportedCameras获取相机设备对象后返回的相机设备列表CameraDevice[]中可以获取相机位置信息，然后可以通过设置0（后置）或者1（前置）来达到切换前后摄像头的效果。

核心代码

Button('摄像头_front')

  .size({ width: 150, height: 34 })

  .margin({ left: 10 })

  .onClick(() => {

    this.ca=1

    removeSession(captureSession,cameraInput, previewOutput, photoOutPut)

    createPhotoAndPreview(this.surfaceId, this.receiver,this.ca)

    // this.cameraController.setDevicePosition(DevicePosition.front);

  })

Button('摄像头_back')

  .size({ width: 150, height: 34 })

  .margin({ left: 10 })

  .onClick(() => {

    this.ca=0

    removeSession(captureSession,cameraInput, previewOutput, photoOutPut)

    createPhotoAndPreview(this.surfaceId, this.receiver,this.ca)

    // this.cameraController.setDevicePosition(DevicePosition.back);

  })

// 创建cameraInput对象

if (ca==0) {

  cameraInput = cameraManager.createCameraInput(camerasDevices[0]);

}else {

  cameraInput = cameraManager.createCameraInput(camerasDevices[1]);

}

if (ca==0) {

  // 获取profile对象

  profiles = cameraManager.getSupportedOutputCapability(camerasDevices[0]); // 获取对应相机设备profiles

}else {

  profiles = cameraManager.getSupportedOutputCapability(camerasDevices[1]); // 获取对应相机设备profiles

}

场景三：打开关闭闪光灯

方案

通过Flash类中的setFlashMode来设置闪光灯模式进行设置之前，需要先检查：

设备是否支持闪光灯，可使用方法hasFlash。

设备是否支持指定的闪光灯模式，可使用方法isFlashModeSupported。

核心代码

// 判断设备是否支持闪光灯

let flashStatus: boolean = false;

try {

  flashStatus = camerasession.hasFlash();//返回true表示设备支持闪光灯，false表示不支持。接口调用失败会返回相应错误码

} catch (error) {

  let err = error as BusinessError;

  console.error('Failed to hasFlash. errorCode = ' + err.code);

}

console.info('Promise returned with the flash light support status:' + flashStatus);

if (flashStatus) {

  // 判断是否支持自动闪光灯模式

  let flashModeStatus: boolean = false;

  try {

    let status: boolean = camerasession.isFlashModeSupported(camera.FlashMode.FLASH_MODE_AUTO);

    flashModeStatus = status;

  } catch (error) {

    let err = error as BusinessError;

    console.error('Failed to check whether the flash mode is supported. errorCode = ' + err.code);

  }

  if (flashModeStatus) {

    // 设置自动闪光灯模式

    try {

      camerasession.setFlashMode(camera.FlashMode.FLASH_MODE_AUTO);

    } catch (error) {

      let err = error as BusinessError;

      console.error('Failed to set the flash mode. errorCode = ' + err.code);

    }

  }

}

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

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

开发基础知识:gitee.com/MNxiaona/733GH

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

基于ArkTS 开发

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

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH