• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 预览
2
3预览是启动相机后看见的画面，通常在拍照和录像前执行。
4
5## 开发步骤
6
7详细的API说明请参考[Camera API参考](../reference/apis/js-apis-camera.md)。
8
91. 创建Surface。
10
11     XComponent组件为预览流提供的Surface，而XComponent的能力由UI提供，相关介绍可参考[XComponent组件参考](../reference/arkui-ts/ts-basic-components-xcomponent.md)。
12
13   ```ts
14   // 创建XComponentController
15   mXComponentController: XComponentController = new XComponentController;
16   build() {
17       Flex() {
18           // 创建XComponent
19           XComponent({
20               id: '',
21               type: 'surface',
22               libraryname: '',
23               controller: this.mXComponentController
24           })
25           .onLoad(() => {
26               // 设置Surface宽高（1920*1080），预览尺寸设置参考前面 previewProfilesArray 获取的当前设备所支持的预览分辨率大小去设置
27               this.mXComponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
28               // 获取Surface ID
29               globalThis.surfaceId = this.mXComponentController.getXComponentSurfaceId();
30           })
31           .width('1920px')
32           .height('1080px')
33       }
34   }
35   ```
36
372. 通过CameraOutputCapability类中的previewProfiles()方法获取当前设备支持的预览能力，返回previewProfilesArray数组 。通过createPreviewOutput()方法创建预览输出流，其中，createPreviewOutput()方法中的而两个参数分别是previewProfilesArray数组中的第一项和步骤一中获取的surfaceId。
38
39   ```ts
40   let previewProfilesArray = cameraOutputCapability.previewProfiles;
41   let previewOutput;
42   try {
43       previewOutput = cameraManager.createPreviewOutput(previewProfilesArray[0], surfaceId);
44   }
45   catch (error) {
46       console.error("Failed to create the PreviewOutput instance." + error);
47   }
48   ```
49
503. 使能。通过start()方法输出预览流，接口调用失败会返回相应错误码，错误码类型参见[CameraErrorCode](../reference/apis/js-apis-camera.md#cameraerrorcode)。
51
52   ```ts
53   previewOutput.start().then(() => {
54       console.info('Callback returned with previewOutput started.');
55   }).catch((err) => {
56       console.info('Failed to previewOutput start '+ err.code);
57   });
58   ```
59
60
61## 状态监听
62
63在相机应用开发过程中，可以随时监听预览输出流状态，包括预览流启动、预览流结束、预览流输出错误。
64
65- 通过注册固定的frameStart回调函数获取监听预览启动结果，previewOutput创建成功时即可监听，预览第一次曝光时触发，有该事件返回结果则认为预览流已启动。
66
67  ```ts
68  previewOutput.on('frameStart', () => {
69      console.info('Preview frame started');
70  })
71  ```
72
73- 通过注册固定的frameEnd回调函数获取监听预览结束结果，previewOutput创建成功时即可监听，预览完成最后一帧时触发，有该事件返回结果则认为预览流已结束。
74
75  ```ts
76  previewOutput.on('frameEnd', () => {
77      console.info('Preview frame ended');
78  })
79  ```
80
81- 通过注册固定的error回调函数获取监听预览输出错误结果，callback返回预览输出接口使用错误时对应的错误码，错误码类型参见[CameraErrorCode](../reference/apis/js-apis-camera.md#cameraerrorcode)。
82
83  ```ts
84  previewOutput.on('error', (previewOutputError) => {
85      console.info(`Preview output error code: ${previewOutputError.code}`);
86  })
87  ```
88