• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 预览
2
3预览是启动相机后看见的画面，通常在拍照和录像前执行。
4
5## 开发步骤
6
7详细的API说明请参考[Camera API参考](../reference/apis/js-apis-camera.md)。
8
91. 导入camera接口，接口中提供了相机相关的属性和方法，导入方法如下。
10
11   ```ts
12   import camera from '@ohos.multimedia.camera';
13   import { BusinessError } from '@ohos.base';
14   ```
15
162. 创建Surface。
17
18    XComponent组件为预览流提供的Surface，而XComponent的能力由UI提供，相关介绍可参考XComponent组件参考。
19
20    **注**：预览流与录像输出流的分辨率的宽高比要保持一致，如示例代码中宽高比为1920:1080 = 16:9，则需要预览流中的分辨率的宽高比也为16:9，如分辨率选择640:360，或960:540，或1920:1080，以此类推
21
22   ```ets
23   // xxx.ets
24   // 创建XComponentController
25   @Component
26   struct XComponentPage {
27     // 创建XComponentController
28     mXComponentController: XComponentController = new XComponentController;
29     surfaceId: string = '';
30
31     build() {
32       Flex() {
33         // 创建XComponent
34         XComponent({
35           id: '',
36           type: 'surface',
37           libraryname: '',
38           controller: this.mXComponentController
39         })
40           .onLoad(() => {
41             // 设置Surface宽高（1920*1080），预览尺寸设置参考前面 previewProfilesArray 获取的当前设备所支持的预览分辨率大小去设置
42             // 预览流与录像输出流的分辨率的宽高比要保持一致
43             this.mXComponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
44             // 获取Surface ID
45             this.surfaceId = this.mXComponentController.getXComponentSurfaceId();
46           })
47           .width('1920px')
48           .height('1080px')
49       }
50     }
51   }
52   ```
53
543. 通过CameraOutputCapability类中的previewProfiles()方法获取当前设备支持的预览能力，返回previewProfilesArray数组 。通过createPreviewOutput()方法创建预览输出流，其中，createPreviewOutput()方法中的两个参数分别是previewProfilesArray数组中的第一项和步骤二中获取的surfaceId。
55
56   ```ts
57   function getPreviewOutput(cameraManager: camera.CameraManager, cameraOutputCapability: camera.CameraOutputCapability, surfaceId: string): camera.PreviewOutput | undefined {
58     let previewProfilesArray: Array<camera.Profile> = cameraOutputCapability.previewProfiles;
59     let previewOutput: camera.PreviewOutput | undefined = undefined;
60     try {
61       previewOutput = cameraManager.createPreviewOutput(previewProfilesArray[0], surfaceId);
62     } catch (error) {
63       let err = error as BusinessError;
64       console.error("Failed to create the PreviewOutput instance. error code: " + err.code);
65     }
66     return previewOutput;
67   }
68   ```
69
704. 使能。通过start()方法输出预览流，接口调用失败会返回相应错误码，错误码类型参见[CameraErrorCode](../reference/apis/js-apis-camera.md#cameraerrorcode)。
71
72   ```ts
73   function startPreviewOutput(previewOutput: camera.PreviewOutput): void {
74     previewOutput.start().then(() => {
75       console.info('Callback returned with previewOutput started.');
76     }).catch((err: BusinessError) => {
77       console.info('Failed to previewOutput start '+ err.code);
78     });
79   }
80   ```
81
82
83## 状态监听
84
85在相机应用开发过程中，可以随时监听预览输出流状态，包括预览流启动、预览流结束、预览流输出错误。
86
87- 通过注册固定的frameStart回调函数获取监听预览启动结果，previewOutput创建成功时即可监听，预览第一次曝光时触发，有该事件返回结果则认为预览流已启动。
88
89  ```ts
90  function onPreviewOutputFrameStart(previewOutput: camera.PreviewOutput): void {
91    previewOutput.on('frameStart', () => {
92      console.info('Preview frame started');
93    });
94  }
95  ```
96
97- 通过注册固定的frameEnd回调函数获取监听预览结束结果，previewOutput创建成功时即可监听，预览完成最后一帧时触发，有该事件返回结果则认为预览流已结束。
98
99  ```ts
100  function onPreviewOutputFrameEnd(previewOutput: camera.PreviewOutput): void {
101    previewOutput.on('frameEnd', () => {
102      console.info('Preview frame ended');
103    });
104  }
105  ```
106
107- 通过注册固定的error回调函数获取监听预览输出错误结果，callback返回预览输出接口使用错误时对应的错误码，错误码类型参见[CameraErrorCode](../reference/apis/js-apis-camera.md#cameraerrorcode)。
108
109  ```ts
110  function onPreviewOutputError(previewOutput: camera.PreviewOutput): void {
111    previewOutput.on('error', (previewOutputError: BusinessError) => {
112      console.info(`Preview output error code: ${previewOutputError.code}`);
113    });
114  }
115  ```
116