基于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();

5、实现拍照功能。通过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来设置闪光灯模式进行设置之前，需要先检查：

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

2、设备是否支持指定的闪光灯模式，可使用方法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);
    }
  }
}