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![deferred-capture-development-process](figures/deferred-capture-development-process.png)
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```