1# Camera Preview (ArkTS)
2
3Preview is the image you see after you start the camera application but before you take photos or record videos.
4
5## How to Develop
6
7Read [Camera](../../reference/apis-camera-kit/js-apis-camera.md) for the API reference.
8
91. Import the camera module, which provides camera-related attributes and methods.
10     
11   ```ts
12   import { camera } from '@kit.CameraKit';
13   import { BusinessError } from '@kit.BasicServicesKit';
14   ```
15
162. Create a surface.
17
18    The **\<XComponent>**, the capabilities of which are provided by the UI, offers the surface for preview streams. For details about how to obtain the surface ID, see [getXcomponentSurfaceId](../../reference/apis-arkui/arkui-ts/ts-basic-components-xcomponent.md#getxcomponentsurfaceid). For details about the component, see [XComponent](../../reference/apis-arkui/arkui-ts/ts-basic-components-xcomponent.md).
19
20    > **NOTE**
21    > The preview stream and video output stream must have the same aspect ratio of the resolution. For example, the aspect ratio of the surface of the **\<XComponent>** is 1920:1080 (which is equal to 16:9), then the aspect ratio of the resolution of the preview stream must also be 16:9. This means that the resolution can be 640:360, 960:540, 1920:1080, or the like.
22
233. Use **previewProfiles** in the [CameraOutputCapability](../../reference/apis-camera-kit/js-apis-camera.md#cameraoutputcapability) class to obtain the preview output capabilities, in the format of an **previewProfilesArray** array, supported by the current device. Then call [createPreviewOutput](../../reference/apis-camera-kit/js-apis-camera.md#createpreviewoutput) to create a **PreviewOutput** object, with the first parameter set to the first item in the **previewProfilesArray** array and the second parameter set to the surface ID obtained in step 2.
24     
25   ```ts
26   function getPreviewOutput(cameraManager: camera.CameraManager, cameraOutputCapability: camera.CameraOutputCapability, surfaceId: string): camera.PreviewOutput | undefined {
27     let previewProfilesArray: Array<camera.Profile> = cameraOutputCapability.previewProfiles;
28     let previewOutput: camera.PreviewOutput | undefined = undefined;
29     try {
30       previewOutput = cameraManager.createPreviewOutput(previewProfilesArray[0], surfaceId);
31     } catch (error) {
32       let err = error as BusinessError;
33       console.error("Failed to create the PreviewOutput instance. error code: " + err.code);
34     }
35     return previewOutput;
36   }
37   ```
38
394. Call [Session.start](../../reference/apis-camera-kit/js-apis-camera.md#start11) to start outputting the preview stream. If the call fails, an error code is returned. For details, see [CameraErrorCode](../../reference/apis-camera-kit/js-apis-camera.md#cameraerrorcode).
40     
41   ```ts
42   async function startPreviewOutput(cameraManager: camera.CameraManager, previewOutput: camera.PreviewOutput): Promise<void> {
43     let cameraArray: Array<camera.CameraDevice> = [];
44     cameraArray = cameraManager.getSupportedCameras();
45     if (cameraArray.length == 0) {
46       console.error('no camera.');
47       return;
48     }
49     // Obtain the supported modes.
50     let sceneModes: Array<camera.SceneMode> = cameraManager.getSupportedSceneModes(cameraArray[0]);
51     let isSupportPhotoMode: boolean = sceneModes.indexOf(camera.SceneMode.NORMAL_PHOTO) >= 0;
52     if (!isSupportPhotoMode) {
53       console.error('photo mode not support');
54       return;
55     }
56     let cameraInput: camera.CameraInput | undefined = undefined;
57     cameraInput = cameraManager.createCameraInput(cameraArray[0]);
58     if (cameraInput === undefined) {
59       console.error('cameraInput is undefined');
60       return;
61     }
62     // Open a camera.
63     await cameraInput.open();
64     let session: camera.PhotoSession = cameraManager.createSession(camera.SceneMode.NORMAL_PHOTO) as camera.PhotoSession;
65     session.beginConfig();
66     session.addInput(cameraInput);
67     session.addOutput(previewOutput);
68     await session.commitConfig();
69     await session.start();
70   }
71   ```
72
73
74## Status Listening
75
76During camera application development, you can listen for the preview output stream status, including preview stream start, preview stream end, and preview stream output errors.
77
78- Register the **'frameStart'** event to listen for preview start events. This event can be registered when a **PreviewOutput** object is created and is triggered when the bottom layer starts exposure for the first time. The preview stream starts as long as a result is returned.
79    
80  ```ts
81  function onPreviewOutputFrameStart(previewOutput: camera.PreviewOutput): void {
82    previewOutput.on('frameStart', (err: BusinessError) => {
83      if (err !== undefined && err.code !== 0) {
84        return;
85      }
86      console.info('Preview frame started');
87    });
88  }
89  ```
90
91- Register the **'frameEnd'** event to listen for preview end events. This event can be registered when a **PreviewOutput** object is created and is triggered when the last frame of preview ends. The preview stream ends as long as a result is returned.
92    
93  ```ts
94  function onPreviewOutputFrameEnd(previewOutput: camera.PreviewOutput): void {
95    previewOutput.on('frameEnd', (err: BusinessError) => {
96      if (err !== undefined && err.code !== 0) {
97        return;
98      }
99      console.info('Preview frame ended');
100    });
101  }
102  ```
103
104- Register the **'error'** event to listen for preview output errors. The callback function returns an error code when an API is incorrectly used. For details about the error code types, see [Camera Error Codes](../../reference/apis-camera-kit/js-apis-camera.md#cameraerrorcode).
105    
106  ```ts
107  function onPreviewOutputError(previewOutput: camera.PreviewOutput): void {
108    previewOutput.on('error', (previewOutputError: BusinessError) => {
109      console.error(`Preview output error code: ${previewOutputError.code}`);
110    });
111  }
112  ```
113