• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 预览(ArkTS)
2
3在开发相机应用时，需要先申请相机相关权限[开发准备](camera-preparation.md)。
4预览是启动相机后看见的画面，通常在拍照和录像前执行。
5
6## 开发步骤
7
8详细的API说明请参考[Camera API参考](../../reference/apis-camera-kit/js-apis-camera.md)。
9
101. 导入camera接口，接口中提供了相机相关的属性和方法，导入方法如下。
11
12   ```ts
13   import { camera } from '@kit.CameraKit';
14   import { BusinessError } from '@kit.BasicServicesKit';
15   ```
16
172. 创建Surface。
18
19    XComponent组件为预览流提供的Surface（获取surfaceId请参考[getXcomponentSurfaceId](../../reference/apis-arkui/arkui-ts/ts-basic-components-xcomponent.md#getxcomponentsurfaceid9)方法），而XComponent的能力由UI提供，相关介绍可参考[XComponent组件参考](../../reference/apis-arkui/arkui-ts/ts-basic-components-xcomponent.md)。
20
21    > **说明：**
22    > 预览流与录像输出流的分辨率的宽高比要保持一致，如果设置XComponent组件中的Surface显示区域宽高比为1920:1080 = 16:9，则需要预览流中的分辨率的宽高比也为16:9，如分辨率选择640:360，或960:540，或1920:1080，以此类推。
23
243. 通过[CameraOutputCapability](../../reference/apis-camera-kit/js-apis-camera.md#cameraoutputcapability)类中的previewProfiles属性获取当前设备支持的预览能力，返回previewProfilesArray数组 。通过[createPreviewOutput](../../reference/apis-camera-kit/js-apis-camera.md#createpreviewoutput)方法创建预览输出流，其中，[createPreviewOutput](../../reference/apis-camera-kit/js-apis-camera.md#createpreviewoutput)方法中的两个参数分别是previewProfilesArray数组中的第一项和步骤二中获取的surfaceId。
25
26   ```ts
27   function getPreviewOutput(cameraManager: camera.CameraManager, cameraOutputCapability: camera.CameraOutputCapability, surfaceId: string): camera.PreviewOutput | undefined {
28     let previewProfilesArray: Array<camera.Profile> = cameraOutputCapability.previewProfiles;
29     let previewOutput: camera.PreviewOutput | undefined = undefined;
30     try {
31       previewOutput = cameraManager.createPreviewOutput(previewProfilesArray[0], surfaceId);
32     } catch (error) {
33       let err = error as BusinessError;
34       console.error("Failed to create the PreviewOutput instance. error code: " + err.code);
35     }
36     return previewOutput;
37   }
38   ```
39
404. 使能。通过[Session.start](../../reference/apis-camera-kit/js-apis-camera.md#start11)方法输出预览流，接口调用失败会返回相应错误码，错误码类型参见[Camera错误码](../../reference/apis-camera-kit/js-apis-camera.md#cameraerrorcode)。
41
42   ```ts
43   async function startPreviewOutput(cameraManager: camera.CameraManager, previewOutput: camera.PreviewOutput): Promise<void> {
44     let cameraArray: Array<camera.CameraDevice> = [];
45     cameraArray = cameraManager.getSupportedCameras();
46     if (cameraArray.length == 0) {
47       console.error('no camera.');
48       return;
49     }
50     // 获取支持的模式类型
51     let sceneModes: Array<camera.SceneMode> = cameraManager.getSupportedSceneModes(cameraArray[0]);
52     let isSupportPhotoMode: boolean = sceneModes.indexOf(camera.SceneMode.NORMAL_PHOTO) >= 0;
53     if (!isSupportPhotoMode) {
54       console.error('photo mode not support');
55       return;
56     }
57     let cameraInput: camera.CameraInput | undefined = undefined;
58     cameraInput = cameraManager.createCameraInput(cameraArray[0]);
59     if (cameraInput === undefined) {
60       console.error('cameraInput is undefined');
61       return;
62     }
63     // 打开相机
64     await cameraInput.open();
65     let session: camera.PhotoSession = cameraManager.createSession(camera.SceneMode.NORMAL_PHOTO) as camera.PhotoSession;
66     session.beginConfig();
67     session.addInput(cameraInput);
68     session.addOutput(previewOutput);
69     await session.commitConfig();
70     await session.start();
71   }
72   ```
73
74
75## 状态监听
76
77在相机应用开发过程中，可以随时监听预览输出流状态，包括预览流启动、预览流结束、预览流输出错误。
78
79- 通过注册固定的frameStart回调函数获取监听预览启动结果，previewOutput创建成功时即可监听，预览第一次曝光时触发，有该事件返回结果则认为预览流已启动。
80
81  ```ts
82  function onPreviewOutputFrameStart(previewOutput: camera.PreviewOutput): void {
83    previewOutput.on('frameStart', (err: BusinessError) => {
84      if (err !== undefined && err.code !== 0) {
85        return;
86      }
87      console.info('Preview frame started');
88    });
89  }
90  ```
91
92- 通过注册固定的frameEnd回调函数获取监听预览结束结果，previewOutput创建成功时即可监听，预览完成最后一帧时触发，有该事件返回结果则认为预览流已结束。
93
94  ```ts
95  function onPreviewOutputFrameEnd(previewOutput: camera.PreviewOutput): void {
96    previewOutput.on('frameEnd', (err: BusinessError) => {
97      if (err !== undefined && err.code !== 0) {
98        return;
99      }
100      console.info('Preview frame ended');
101    });
102  }
103  ```
104
105- 通过注册固定的error回调函数获取监听预览输出错误结果，回调返回预览输出接口使用错误时对应的错误码，错误码类型参见[Camera错误码](../../reference/apis-camera-kit/js-apis-camera.md#cameraerrorcode)。
106
107  ```ts
108  function onPreviewOutputError(previewOutput: camera.PreviewOutput): void {
109    previewOutput.on('error', (previewOutputError: BusinessError) => {
110      console.error(`Preview output error code: ${previewOutputError.code}`);
111    });
112  }
113  ```
114