1# 分段式拍照实现方案(ArkTS) 2 3在开发相机应用时,需要先参考开发准备[申请相关权限](camera-preparation.md)。 4 5当前示例提供完整的分段式拍照流程介绍,方便开发者了解完整的接口调用顺序。 6 7在参考以下示例前,建议开发者查看[分段式拍照(ArkTS)](camera-deferred-capture.md)的具体章节,了解[设备输入](camera-device-input.md)、[会话管理](camera-session-management.md)、[拍照](camera-shooting.md)等单个流程。 8 9## 开发流程 10 11在获取到相机支持的输出流能力后,开始创建拍照流,开发流程如下。 12 13 14 15## 完整示例 16 17Context获取方式请参考:[获取UIAbility的上下文信息](../../application-models/uiability-usage.md#获取uiability的上下文信息)。 18 19```ts 20import { camera } from '@kit.CameraKit'; 21import { BusinessError } from '@kit.BasicServicesKit'; 22import { common } from '@kit.AbilityKit'; 23import { photoAccessHelper } from '@kit.MediaLibraryKit'; 24 25let context = getContext(this); 26let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); 27 28let photoSession: camera.PhotoSession | undefined = undefined; 29let cameraInput: camera.CameraInput | undefined = undefined; 30let previewOutput: camera.PreviewOutput | undefined = undefined; 31let photoOutput: camera.PhotoOutput | undefined = undefined; 32 33class MediaDataHandler implements photoAccessHelper.MediaAssetDataHandler<ArrayBuffer> { 34 onDataPrepared(data: ArrayBuffer) { 35 if (data === undefined) { 36 console.error('Error occurred when preparing data'); 37 return; 38 } 39 console.info('on image data prepared'); 40 // 请在获取到拍照buffer后,再释放session,提前释放session,会导致无法正常出图。 41 releaseCamSession(); 42 } 43} 44 45async function mediaLibRequestBuffer(photoAsset: photoAccessHelper.PhotoAsset) { 46 let requestOptions: photoAccessHelper.RequestOptions = { 47 deliveryMode: photoAccessHelper.DeliveryMode.FAST_MODE, 48 } 49 const handler = new MediaDataHandler(); 50 await photoAccessHelper.MediaAssetManager.requestImageData(context, photoAsset, requestOptions, handler); 51 console.info('requestImageData successfully'); 52} 53 54async function mediaLibSavePhoto(photoAsset: photoAccessHelper.PhotoAsset): Promise<void> { 55 try { 56 let assetChangeRequest: photoAccessHelper.MediaAssetChangeRequest = 57 new photoAccessHelper.MediaAssetChangeRequest(photoAsset); 58 assetChangeRequest.saveCameraPhoto(); 59 await phAccessHelper.applyChanges(assetChangeRequest); 60 console.info('apply saveCameraPhoto successfully'); 61 } catch (err) { 62 console.error(`apply saveCameraPhoto failed with error: ${err.code}, ${err.message}`); 63 } 64} 65 66function setPhotoOutputCb(photoOutput: camera.PhotoOutput): void { 67 //监听回调之后,调用photoOutput的capture方法,低质量图上报后触发回调 68 photoOutput.on('photoAssetAvailable', (err: BusinessError, photoAsset: photoAccessHelper.PhotoAsset): void => { 69 console.info('getPhotoAsset start'); 70 console.info(`err: ${JSON.stringify(err)}`); 71 if ((err !== undefined && err.code !== 0) || photoAsset === undefined) { 72 console.error('getPhotoAsset failed'); 73 return; 74 } 75 // 调用媒体库落盘接口保存一阶段低质量图,二阶段真图就绪后媒体库会主动帮应用替换落盘图片 76 mediaLibSavePhoto(photoAsset); 77 // 调用媒体库接口注册低质量图或高质量图buffer回调,自定义处理 78 mediaLibRequestBuffer(photoAsset); 79 }); 80} 81 82async function deferredCaptureCase(baseContext: common.BaseContext, surfaceId: string): Promise<void> { 83 // 创建CameraManager对象 84 let cameraManager: camera.CameraManager = camera.getCameraManager(baseContext); 85 if (!cameraManager) { 86 console.error('camera.getCameraManager error'); 87 return; 88 } 89 // 监听相机状态变化 90 cameraManager.on('cameraStatus', (err: BusinessError, cameraStatusInfo: camera.CameraStatusInfo) => { 91 if (err !== undefined && err.code !== 0) { 92 console.error('cameraStatus with errorCode = ' + err.code); 93 return; 94 } 95 console.info(`camera : ${cameraStatusInfo.camera.cameraId}`); 96 console.info(`status: ${cameraStatusInfo.status}`); 97 }); 98 99 // 获取相机列表 100 let cameraArray: Array<camera.CameraDevice> = cameraManager.getSupportedCameras(); 101 if (cameraArray.length <= 0) { 102 console.error('cameraManager.getSupportedCameras error'); 103 return; 104 } 105 106 for (let index = 0; index < cameraArray.length; index++) { 107 console.info('cameraId : ' + cameraArray[index].cameraId); // 获取相机ID 108 console.info('cameraPosition : ' + cameraArray[index].cameraPosition); // 获取相机位置 109 console.info('cameraType : ' + cameraArray[index].cameraType); // 获取相机类型 110 console.info('connectionType : ' + cameraArray[index].connectionType); // 获取相机连接类型 111 } 112 113 // 创建相机输入流 114 try { 115 cameraInput = cameraManager.createCameraInput(cameraArray[0]); 116 } catch (error) { 117 let err = error as BusinessError; 118 console.error('Failed to createCameraInput errorCode = ' + err.code); 119 } 120 if (cameraInput === undefined) { 121 return; 122 } 123 124 // 监听cameraInput错误信息 125 let cameraDevice: camera.CameraDevice = cameraArray[0]; 126 cameraInput.on('error', cameraDevice, (error: BusinessError) => { 127 console.error(`Camera input error code: ${error.code}`); 128 }) 129 130 // 打开相机 131 await cameraInput.open(); 132 133 // 获取支持的模式类型 134 let sceneModes: Array<camera.SceneMode> = cameraManager.getSupportedSceneModes(cameraArray[0]); 135 let isSupportPhotoMode: boolean = sceneModes.indexOf(camera.SceneMode.NORMAL_PHOTO) >= 0; 136 if (!isSupportPhotoMode) { 137 console.error('photo mode not support'); 138 return; 139 } 140 // 获取相机设备支持的输出流能力 141 let cameraOutputCap: camera.CameraOutputCapability = 142 cameraManager.getSupportedOutputCapability(cameraArray[0], camera.SceneMode.NORMAL_PHOTO); 143 if (!cameraOutputCap) { 144 console.error('cameraManager.getSupportedOutputCapability error'); 145 return; 146 } 147 console.info('outputCapability: ' + JSON.stringify(cameraOutputCap)); 148 149 let previewProfilesArray: Array<camera.Profile> = cameraOutputCap.previewProfiles; 150 if (!previewProfilesArray) { 151 console.error('createOutput previewProfilesArray == null || undefined'); 152 } 153 154 let photoProfilesArray: Array<camera.Profile> = cameraOutputCap.photoProfiles; 155 if (!photoProfilesArray) { 156 console.error('createOutput photoProfilesArray == null || undefined'); 157 } 158 159 // 创建预览输出流,其中参数 surfaceId 参考上文 XComponent 组件,预览流为XComponent组件提供的surface 160 try { 161 previewOutput = cameraManager.createPreviewOutput(previewProfilesArray[0], surfaceId); 162 } catch (error) { 163 let err = error as BusinessError; 164 console.error(`Failed to create the PreviewOutput instance. error code: ${err.code}`); 165 } 166 if (previewOutput === undefined) { 167 return; 168 } 169 170 // 监听预览输出错误信息 171 previewOutput.on('error', (error: BusinessError) => { 172 console.error(`Preview output error code: ${error.code}`); 173 }); 174 175 // 创建拍照输出流 176 try { 177 photoOutput = cameraManager.createPhotoOutput(photoProfilesArray[0]); 178 } catch (error) { 179 let err = error as BusinessError; 180 console.error('Failed to createPhotoOutput errorCode = ' + err.code); 181 } 182 if (photoOutput === undefined) { 183 return; 184 } 185 186 //注册监听photoAssetAvailable回调 187 setPhotoOutputCb(photoOutput); 188 189 //创建会话 190 try { 191 photoSession = cameraManager.createSession(camera.SceneMode.NORMAL_PHOTO) as camera.PhotoSession; 192 } catch (error) { 193 let err = error as BusinessError; 194 console.error('Failed to create the session instance. errorCode = ' + err.code); 195 } 196 if (photoSession === undefined) { 197 return; 198 } 199 // 监听session错误信息 200 photoSession.on('error', (error: BusinessError) => { 201 console.error(`Capture session error code: ${error.code}`); 202 }); 203 204 // 开始配置会话 205 try { 206 photoSession.beginConfig(); 207 } catch (error) { 208 let err = error as BusinessError; 209 console.error('Failed to beginConfig. errorCode = ' + err.code); 210 } 211 212 // 向会话中添加相机输入流 213 try { 214 photoSession.addInput(cameraInput); 215 } catch (error) { 216 let err = error as BusinessError; 217 console.error('Failed to addInput. errorCode = ' + err.code); 218 } 219 220 // 向会话中添加预览输出流 221 try { 222 photoSession.addOutput(previewOutput); 223 } catch (error) { 224 let err = error as BusinessError; 225 console.error('Failed to addOutput(previewOutput). errorCode = ' + err.code); 226 } 227 228 // 向会话中添加拍照输出流 229 try { 230 photoSession.addOutput(photoOutput); 231 } catch (error) { 232 let err = error as BusinessError; 233 console.error('Failed to addOutput(photoOutput). errorCode = ' + err.code); 234 } 235 236 // 提交会话配置 237 await photoSession.commitConfig(); 238 239 // 启动会话 240 await photoSession.start().then(() => { 241 console.info('Promise returned to indicate the session start success.'); 242 }); 243 // 判断设备是否支持闪光灯 244 let flashStatus: boolean = false; 245 try { 246 flashStatus = photoSession.hasFlash(); 247 } catch (error) { 248 let err = error as BusinessError; 249 console.error('Failed to hasFlash. errorCode = ' + err.code); 250 } 251 console.info('Returned with the flash light support status:' + flashStatus); 252 253 if (flashStatus) { 254 // 判断是否支持自动闪光灯模式 255 let flashModeStatus: boolean = false; 256 try { 257 let status: boolean = photoSession.isFlashModeSupported(camera.FlashMode.FLASH_MODE_AUTO); 258 flashModeStatus = status; 259 } catch (error) { 260 let err = error as BusinessError; 261 console.error('Failed to check whether the flash mode is supported. errorCode = ' + err.code); 262 } 263 if (flashModeStatus) { 264 // 设置自动闪光灯模式 265 try { 266 photoSession.setFlashMode(camera.FlashMode.FLASH_MODE_AUTO); 267 } catch (error) { 268 let err = error as BusinessError; 269 console.error('Failed to set the flash mode. errorCode = ' + err.code); 270 } 271 } 272 } 273 274 // 判断是否支持连续自动变焦模式 275 let focusModeStatus: boolean = false; 276 try { 277 let status: boolean = photoSession.isFocusModeSupported(camera.FocusMode.FOCUS_MODE_CONTINUOUS_AUTO); 278 focusModeStatus = status; 279 } catch (error) { 280 let err = error as BusinessError; 281 console.error('Failed to check whether the focus mode is supported. errorCode = ' + err.code); 282 } 283 284 if (focusModeStatus) { 285 // 设置连续自动变焦模式 286 try { 287 photoSession.setFocusMode(camera.FocusMode.FOCUS_MODE_CONTINUOUS_AUTO); 288 } catch (error) { 289 let err = error as BusinessError; 290 console.error('Failed to set the focus mode. errorCode = ' + err.code); 291 } 292 } 293 294 // 获取相机支持的可变焦距比范围 295 let zoomRatioRange: Array<number> = []; 296 try { 297 zoomRatioRange = photoSession.getZoomRatioRange(); 298 } catch (error) { 299 let err = error as BusinessError; 300 console.error('Failed to get the zoom ratio range. errorCode = ' + err.code); 301 } 302 if (zoomRatioRange.length <= 0) { 303 return; 304 } 305 306 // 设置可变焦距比 307 try { 308 photoSession.setZoomRatio(zoomRatioRange[0]); 309 } catch (error) { 310 let err = error as BusinessError; 311 console.error('Failed to set the zoom ratio value. errorCode = ' + err.code); 312 } 313 let photoCaptureSetting: camera.PhotoCaptureSetting = { 314 quality: camera.QualityLevel.QUALITY_LEVEL_HIGH, // 设置图片质量高 315 rotation: camera.ImageRotation.ROTATION_0 // 设置图片旋转角度0 316 } 317 318 // 使用当前拍照设置触发一次拍照 319 photoOutput.capture(photoCaptureSetting, (err: BusinessError) => { 320 if (err) { 321 console.error(`Failed to capture the photo ${err.message}`); 322 return; 323 } 324 console.info('Callback invoked to indicate the photo capture request success.'); 325 }); 326} 327 328async function releaseCamSession() { 329 // 停止当前会话 330 await photoSession?.stop(); 331 332 // 释放相机输入流 333 await cameraInput?.close(); 334 335 // 释放预览输出流 336 await previewOutput?.release(); 337 338 // 释放拍照输出流 339 await photoOutput?.release(); 340 341 // 释放会话 342 await photoSession?.release(); 343 344 // 会话置空 345 photoSession = undefined; 346} 347 348@Entry 349@Component 350struct Index { 351 @State message: string = 'PhotoAssetDemo'; 352 private mXComponentController: XComponentController = new XComponentController(); 353 private surfaceId = ''; 354 355 build() { 356 Column() { 357 Column() { 358 XComponent({ 359 id: 'componentId', 360 type: XComponentType.SURFACE, 361 controller: this.mXComponentController 362 }) 363 .onLoad(async () => { 364 console.info('onLoad is called'); 365 this.surfaceId = this.mXComponentController.getXComponentSurfaceId(); 366 console.info(`onLoad surfaceId: ${this.surfaceId}`); 367 deferredCaptureCase(context, this.surfaceId); 368 })// The width and height of the surface are opposite to those of the XComponent. 369 .renderFit(RenderFit.RESIZE_CONTAIN) 370 }.height('95%') 371 .justifyContent(FlexAlign.Center) 372 373 Text(this.message) 374 .id('PhotoAssetDemo') 375 .fontSize(38) 376 .fontWeight(FontWeight.Bold) 377 .alignRules({ 378 center: { anchor: '__container__', align: VerticalAlign.Center }, 379 middle: { anchor: '__container__', align: HorizontalAlign.Center } 380 }) 381 } 382 .height('100%') 383 .width('100%') 384 } 385} 386```