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

往期知识点整理

• 鸿蒙（HarmonyOS）北向开辟知识点纪录~
  
• 【鸿蒙UI实战开辟】基于List和Scroller由简朴到复杂列表布局开辟实践
  
• 【鸿蒙UI实战开辟】基于原生本领的键盘控制
  
• 【鸿蒙UI实战开辟】基于子窗口实现应用内悬浮窗
  
• 【鸿蒙ArkUI实战开辟】基于bindSheet的半模态弹窗
  
• 【鸿蒙ArkUI实战开辟】基于tabs实现页面布局
  
• 【鸿蒙ArkUI实战开辟】基于webView的嵌套滚动
  
• 【鸿蒙ArkUI实战开辟】基于原生的水印添加本领
  
• 【鸿蒙实战开辟】har和hsp的转换
  
• 【鸿蒙实战开辟】基于CameraKit对相机进行操作
  
• 持续更新中……
  

场景形貌

用户在进行拍照、录像等操作时需要通过相机获取捕获图像的本领，开辟者可以通过CameraKit相干相机接口对相机进行操作。拍照是相机的最紧张功能之一，拍照模块基于相机复杂的逻辑，为了包管用户拍出的照片质量，在中间步调可以设置分辨率、闪光灯、焦距、照片质量及旋转角度等信息。
场景一：拍照并返回图片
场景二：切换摄像头场景三：打开关闭闪光灯
方案形貌
场景一：开辟相机功能进行拍照并返回图片

效果图

自定义相机创建一起预览和一起拍照，同时进行实时画面的预览和拍照并返回图像
方案一通过camerakit自定义相机拍照
1.在开辟相机应用时，需要先申请相机相干权限。
2.创建一个相机设备，应用通过调用和控制相机设备完成拍照基础操作。
3.创建一个相机会话，在会话中可以进行相机的输入流和输出流，添加闪光灯、调解焦距等设置。
4.创建输出流，相机开辟模型为Surface模型，即应用通过Surface进行数据传递，通过ImageReceiver的surface获取拍照流的数据、通过XComponent的surface获取预览流的数据进行预览。如果要实现双路预览可将拍照流改为预览流。
5.获取拍照返回的图片并体现出来。
核心代码
1.在module.json5文件中设置申请相机所需要的权限

1. "requestPermissions": [
3. {
5.   "name":
7.   "ohos.permission.CAMERA",
9.   "reason":
11.   "$string:EntryAbility_desc",
13.   "usedScene":
15.   {
17.     "abilities": [
19.     "EntryAbility"
21.     ]
23.   }
25. }
27. ,
29. {
31.   "name":
33.   "ohos.permission.MICROPHONE",
35.   "reason":
37.   "$string:EntryAbility_desc",
39.   "usedScene":
41.   {
43.     "abilities": [
45.     "EntryAbility"
47.     ]
49.   }
51. }
53. ,
55. {
57.   "name":
59.   "ohos.permission.MEDIA_LOCATION",
61.   "reason":
63.   "$string:EntryAbility_desc",
65.   "usedScene":
67.   {
69.     "abilities": [
71.     "EntryAbility"
73.     ]
75.   }
77. }
79. ,
81. {
83.   "name":
85.   "ohos.permission.WRITE_MEDIA",
87.   "reason":
89.   "$string:EntryAbility_desc",
91.   "usedScene":
93.   {
95.     "abilities": [
97.     "EntryAbility"
99.     ]
101.   }
103. }
105. ,
107. {
109.   "name":
111.   "ohos.permission.READ_MEDIA",
113.   "reason":
115.   "$string:EntryAbility_desc",
117.   "usedScene":
119.   {
121.     "abilities": [
123.     "EntryAbility"
125.     ]
127.   }
129.   ,
131. }
133. ]

复制代码

校验是否申请授权：

1. async function grantPermission(): Promise<boolean> {
3.   const PERMISSIONS: Array<Permissions> = [
5.     'ohos.permission.CAMERA',
7.   ];
9.   try {
11.     // 获取应用程序的accessTokenID
13.     let bundleInfo: bundleManager.BundleInfo =
15.       await bundleManager.getBundleInfoForSelf(
17.         bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION
19.       );
21.     let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
23.     let tokenId = appInfo.accessTokenId;
25.     let atManager = abilityAccessCtrl.createAtManager();
27.     let pems: Array<Permissions> = [];
29.     for (let i = 0; i < PERMISSIONS.length; i++) {
31.       let state = await atManager.checkAccessToken(tokenId, PERMISSIONS[i]);
33.       console.info(TAG, `grantPermission  checkAccessToken ${PERMISSIONS[i]} + : ${JSON.stringify(state)}`);
35.       if (state !== abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
37.         pems.push(PERMISSIONS[i]);
39.       }
41.     }
43.     if (pems.length > 0) {
45.       console.info(TAG, 'grantPermission  requestPermissionsFromUser :' + JSON.stringify(pems));
47.       let result = await atManager.requestPermissionsFromUser(GlobalContext.get().getCameraAbilityContext(), pems);
49.       let grantStatus: Array<number> = result.authResults;
51.       let length: number = grantStatus.length;
53.       for (let i = 0; i < length; i++) {
55.         // console.info(TAG, `grantPermission  requestPermissionsFromUser ${result.permissions[i]} + : ${grantStatus[i]}`);
57.         if (grantStatus[i] === 0) {
59.           // 用户授权，可以继续访问目标操作
61.         } else {
63.           // 用户拒绝授权，提示用户必须授权才能访问当前页面的功能
65.           console.log(TAG + 'grantPermission  fail ');
67.           return false;
69.         }
71.       }
73.     }
75.     // 授权成功
77.     console.info(TAG, 'grantPermission  success ');
79.     return true;
81.   } catch (e) {
83.     console.info(TAG, 'grantPermission  fail ');
85.     return false;
87.   }
89. }

复制代码

2.创建一个相机设备
2.1 通过getCameraManage方法，获取cameraManager对象，用来管理相机的状态本领。

1. function getCameraManager(): camera.CameraManager {
3.   return camera.getCameraManager(GlobalContext.get().getCameraAbilityContext());
5. }

复制代码

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

1. function getCameraDevices(cameraManager: camera.CameraManager): Array<camera.CameraDevice> {
3.   let cameraArray: Array<camera.CameraDevice> = cameraManager.getSupportedCameras();
5.   if (cameraArray != undefined && cameraArray.length <= 0) {
7.     console.error("cameraManager.getSupportedCameras error");
9.     return [];
11.   }
13.   for (let index = 0; index < cameraArray.length; index++) {
15.     console.info('cameraId : ' + cameraArray[index].cameraId); // 获取相机ID
17.     console.info('cameraPosition : ' + cameraArray[index].cameraPosition); // 获取相机位置
19.     console.info('cameraType : ' + cameraArray[index].cameraType); // 获取相机类型
21.     console.info('connectionType : ' + cameraArray[index].connectionType); // 获取相机连接类型
23.   }
25.   return cameraArray;
27. }

复制代码

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

1. async getSupportedOutputCapability(cameraDevice: camera.CameraDevice, cameraManager: camera.CameraManager): Promise<camera.CameraOutputCapability | undefined> {
3.   // 创建相机输入流
5.   let cameraInput: camera.CameraInput | undefined = undefined;
7.   try {
9.   cameraInput = cameraManager.createCameraInput(cameraDevice);
11. } catch (error) {
13.   let err = error as BusinessError;
15.   console.error('Failed to createCameraInput errorCode = ' + err.code);
17. }
19. if (cameraInput === undefined) {
21.   return undefined;
23. }
25. // 监听cameraInput错误信息
27. cameraInput.on('error', cameraDevice, (error: BusinessError) => {
29.   console.info(`Camera input error code: ${error.code}`);
31. });
33. cameraInput = cameraInput
35. // 打开相机
37. await cameraInput.open();
39. // 获取相机设备支持的输出流能力
41. let cameraOutputCapability: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(cameraDevice);
43. if (!cameraOutputCapability) {
45.   console.error("cameraManager.getSupportedOutputCapability error");
47.   return undefined;
49. }
51. console.info("outputCapability: " + JSON.stringify(cameraOutputCapability));
53. return cameraOutputCapability;
55. }

复制代码

3.创建相机会话相机使用预览、拍照、录像、元数据功能前，均需要创建相机会话。在会话中，可以完成以下功能：
设置相机的输入流和输出流。相机在拍摄前，必须完成输入输出流的设置。设置输入流即添加设备输入，对用户而言，相当于选择设备的某一摄像头拍摄；设置输出流，即选择数据将以什么情势输出。当应用需要实现拍照时，输出流应设置为预览流和拍照流，预览流的数据将体现在XComponent组件上，拍照流的数据将通过ImageReceiver接口的本领生存下来。
添加闪光灯、调解焦距等设置。
会话切换控制。应用可以通过移除和添加输出流的方式，切换相机模式。如当前会话的输出流为拍照流，应用可以将拍照流移除，然后添加视频流作为输出流，即完成了拍照到录像的切换。
需要先通过createCaptureSession方法创建一个会话；然后调用Session类中的beginConfig方法设置会话；之后对会话进利用能，即向会话中添加相机的输入流和输出流。这里实现相机拍照功能，以是需要添加预览流previewOutput和拍照流photoOutput，预览流和拍照流创建方案见下一步；最后调用Session类中的commitConfig和start方法提交相干设置，并启动会话。

1. // 会话流程
3. cameraSession = cameraManager.createCaptureSession();
5. // 开始配置会话
7. cameraSession.beginConfig();
9. // 把CameraInput加入到会话
11. cameraSession.addInput(cameraInput);
13. // 把 预览流 加入到会话
15. cameraSession.addOutput(previewOutput)
17. // 把 拍照流 加入到会话
19. cameraSession.addOutput(photoOutPut);
21. // 提交配置信息
23. await cameraSession.commitConfig();
25. // 会话开始
27. await cameraSession.start();

复制代码

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

1. // 获取profile对象
3. let profiles: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(camerasDevices[0]); // 获取对应相机设备profiles
5. let previewProfiles: Array<camera.Profile> = profiles.previewProfiles
7. Logger.debug("createDualChannelPreview-- previewProfiles:" + previewProfiles.length)
9. // 预览流
11. let previewProfilesObj: camera.Profile = previewProfiles[0];
13. console.log('预览配置列表：'+JSON.stringify(previewProfiles))
15. console.log('预览配置个数num='+JSON.stringify(previewProfiles.length))
17. // 拍照流
19. let previewProfilesObj2: camera.Profile = profiles.photoProfiles[0];
21. // 创建 预览流 输出对象
23. previewOutput = cameraManager.createPreviewOutput(previewProfilesObj, XComponentSurfaceId);
25. // 创建 拍照流 输出对象
27. let imageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId();
29. photoOutPut = cameraManager.createPhotoOutput(previewProfilesObj2, imageReceiverSurfaceId);

复制代码

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

1. // 创建XComponent
3. XComponent({
5.   id: '',
7.   type: 'surface',
9.   libraryname: '',
11.   controller: this.mXComponentController
13. })
15.   .onLoad(async () => {
17.     // 设置Surface宽高（1920*1080），预览尺寸设置参考前面 previewProfilesArray 获取的当前设备所支持的预览分辨率大小去设置
19.     // 预览流与录像输出流的分辨率的宽高比要保持一致
21.     this.mXComponentController.setXComponentSurfaceSize({ surfaceWidth: cameraWidth, surfaceHeight: cameraHeight });
23.     // 获取Surface ID
25.     this.surfaceId = this.mXComponentController.getXComponentSurfaceId();
27.   })

复制代码

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

1. createImageReceiver(): image.ImageReceiver {
3.   let receiver: image.ImageReceiver = image.createImageReceiver(cameraWidth, cameraHeight, 4, 8);
5.   receiver.on("imageArrival",async (e,data)=>{
7.     let imageData=await receiver.readNextImage()
9.     let imgComponent=await imageData.getComponent(image.ComponentType.JPEG)
11.     image.createImageSource(imgComponent.byteBuffer)
13.       .createPixelMap().then((px)=>{
15.       this.pixma=px
17.     })
19.   })
21.   return receiver;
23. }
25. let imageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId();

复制代码

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

1. Button() {
3.   Text("拍照")
5.     .fontColor(Color.Black)
7.     .alignSelf(ItemAlign.Center)
9.     .onClick(() => {
11.       // this.capture(this.photoOutPut, null)
13.       photoOutPut.capture(settings, (err: BusinessError) => {
15.         if (err) {
17.           console.error(`Failed to capture the photo. error: ${JSON.stringify(err)}`);
19.           return;
21.         }
23.         console.info('Callback invoked to indicate the photo capture request success.');
25.       });
27.     })
29. }
31. .width(100)
33. .height(100)

复制代码

方案二：通过cammerapicker完成拍照

使用 cameraPicker 拉起体系相机pickpicker.pick 体现拉起相机选择器，根据媒体范例进入相应的模式。

1. try {
3.   let pickerProfile = new CameraPosition(camera.CameraPosition.CAMERA_POSITION_BACK,uri)
5.   //前置摄像机传CAMERA_POSITION_FRONT，后置摄像机传CAMERA_POSITION_BACK，saveuri传想存到对应沙箱的uri
7.   let pickerResult: picker.PickerResult = await picker.pick(mContext,
9.     [picker.PickerMediaType.VIDEO, picker.PickerMediaType.VIDEO], pickerProfile);
11.   console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));
13. } catch (error) {
15.   let err = error as BusinessError;
17.   console.error(`the pick call failed. error code: ${err.code}`);
19. }

复制代码

场景二：切换摄像头

效果图

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

1. Button('摄像头_front')
3.   .size({ width: 150, height: 34 })
5.   .margin({ left: 10 })
7.   .onClick(() => {
9.     this.ca=1
11.     removeSession(captureSession,cameraInput, previewOutput, photoOutPut)
13.     createPhotoAndPreview(this.surfaceId, this.receiver,this.ca)
15.     // this.cameraController.setDevicePosition(DevicePosition.front);
17.   })
19. Button('摄像头_back')
21.   .size({ width: 150, height: 34 })
23.   .margin({ left: 10 })
25.   .onClick(() => {
27.     this.ca=0
29.     removeSession(captureSession,cameraInput, previewOutput, photoOutPut)
31.     createPhotoAndPreview(this.surfaceId, this.receiver,this.ca)
33.     // this.cameraController.setDevicePosition(DevicePosition.back);
35.   })
37. // 创建cameraInput对象
39. if (ca==0) {
41.   cameraInput = cameraManager.createCameraInput(camerasDevices[0]);
43. }else {
45.   cameraInput = cameraManager.createCameraInput(camerasDevices[1]);
47. }
49. if (ca==0) {
51.   // 获取profile对象
53.   profiles = cameraManager.getSupportedOutputCapability(camerasDevices[0]); // 获取对应相机设备profiles
55. }else {
57.   profiles = cameraManager.getSupportedOutputCapability(camerasDevices[1]); // 获取对应相机设备profiles
59. }

复制代码

场景三：打开关闭闪光灯

方案
通过Flash类中的setFlashMode来设置闪光灯模式进行设置之前，需要先检查：
设备是否支持闪光灯，可使用方法hasFlash。
设备是否支持指定的闪光灯模式，可使用方法isFlashModeSupported。
核心代码

1. // 判断设备是否支持闪光灯
3. let flashStatus: boolean = false;
5. try {
7.   flashStatus = camerasession.hasFlash();//返回true表示设备支持闪光灯，false表示不支持。接口调用失败会返回相应错误码
9. } catch (error) {
11.   let err = error as BusinessError;
13.   console.error('Failed to hasFlash. errorCode = ' + err.code);
15. }
17. console.info('Promise returned with the flash light support status:' + flashStatus);
19. if (flashStatus) {
21.   // 判断是否支持自动闪光灯模式
23.   let flashModeStatus: boolean = false;
25.   try {
27.     let status: boolean = camerasession.isFlashModeSupported(camera.FlashMode.FLASH_MODE_AUTO);
29.     flashModeStatus = status;
31.   } catch (error) {
33.     let err = error as BusinessError;
35.     console.error('Failed to check whether the flash mode is supported. errorCode = ' + err.code);
37.   }
39.   if (flashModeStatus) {
41.     // 设置自动闪光灯模式
43.     try {
45.       camerasession.setFlashMode(camera.FlashMode.FLASH_MODE_AUTO);
47.     } catch (error) {
49.       let err = error as BusinessError;
51.       console.error('Failed to set the flash mode. errorCode = ' + err.code);
53.     }
55.   }
57. }

复制代码

总是有很多小同伴反馈说：鸿蒙开辟不知道学习哪些技术？不知道需要重点把握哪些鸿蒙开辟知识点？ 为相识决各人这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开辟学习路线与学习文档给各人用来跟着学习。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开辟技术的学习路线，包含了鸿蒙开辟必把握的核心知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开辟、体系定制移植……等）技术知识点。

《鸿蒙 (Harmony OS)开辟学习手册》（共计892页）:https://gitcode.com/HarmonyOS_MN/733GH/overview

怎样快速入门？

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

开辟基础知识:

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.……

鸿蒙开辟面试真题（含参考答案）:https://gitcode.com/HarmonyOS_MN/733GH/overview

OpenHarmony 开辟环境搭建

《OpenHarmony源码解析》:https://gitcode.com/HarmonyOS_MN/733GH/overview

• 搭建开辟环境
  
• Windows 开辟环境的搭建
  
• Ubuntu 开辟环境搭建
  
• Linux 与 Windows 之间的文件共享
  
• ……
  
• 体系架构分析
  
• 构建子体系
  
• 启动流程
  
• 子体系
  
• 分布式任务调理子体系
  
• 分布式通讯子体系
  
• 驱动子体系
  
• ……
  

OpenHarmony 设备开辟学习手册:https://gitcode.com/HarmonyOS_MN/733GH/overview

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。