1# Multimedia Development 2 3## How do I obtain the frame data of a camera when using the XComponent to display the preview output stream of the camera? 4 5Applicable to: OpenHarmony 3.2 (API version 9) 6 7**Symptom** 8 9Currently, the API does not support real-time preview of the camera frame data. To obtain the frame data, you must bind an action, for example, photographing. 10 11**Solution** 12 13Create a dual-channel preview to obtain the frame data. 14 151. Use the XComponent to create a preview stream. 16 17 ``` 18 // Obtain a PreviewOutput instance. 19 const surfaceId = globalThis.mxXComponentController.getXComponentSurfaceld(); 20 this.mPreviewOutput = await Camera.createPreviewOutput(surfaceld) ; 21 ``` 22 232. Use imageReceiver to listen for image information. 24 25 ``` 26 // Add dual-channel preview. 27 const fullWidth = this.mFullScreenSize.width; 28 const fullHeight = this.mFullScreenSize.height; 29 const imageReceiver = await image.createImageReceiver(fullwidth, fullHeight, 30 formatImage, capacityImage) ; 31 const photoSurfaceId = await imageReceiver.getReceivingSurfaceld(); 32 this.mPreviewOutputDouble = await Camera.createPreviewOutput ( photoSurfaceld) 33 ``` 34 35 36## How do I obtain the preview image of the front camera? 37 38Applicable to: OpenHarmony 3.2 (API version 9) 39 40**Solution** 41 421. Use the **@ohos.multimedia.camera** module to obtain the physical camera information. 43 44 ``` 45 let cameraManager = await camera.getCameraManager(context); 46 let camerasInfo = await cameraManager.getSupportedCameras(); 47 let cameraDevice = this.camerasInfo[0]; 48 ``` 49 502. Create and start the input stream channel of the physical camera. 51 52 ``` 53 let cameraInput = await cameraManager.createCameraInput(cameraDevice); 54 await this.cameraInput.open(); 55 ``` 56 573. Obtain the output formats supported by the camera, and create a preview output channel based on the surface ID provided by the XComponent. 58 59 ``` 60 let outputCapability = await this.cameraManager.getSupportedOutputCapability(cameraDevice); 61 let previewProfile = this.outputCapability.previewProfiles[0]; 62 let previewOutput = await cameraManager.createPreviewOutput(previewProfile, previewId); 63 ``` 64 654. Create a camera session, add the camera input stream and preview output stream to the session, and start the session. The preview image is displayed on the XComponent. 66 67 ``` 68 let captureSession = await cameraManager.createCaptureSession(); 69 await captureSession.beginConfig(); 70 await captureSession.addInput(cameraInput); 71 await captureSession.addOutput(previewOutput); 72 await this.captureSession.commitConfig() 73 await this.captureSession.start(); 74 ``` 75 76 77## How do I set the camera focal length? 78 79Applicable to: OpenHarmony 3.2 (API version 9) 80 81**Solution** 82 831. Check whether the camera is a front camera. A front camera does not support focal length setting. 842. Use **captureSession.getZoomRatioRange\(\)** to obtain the focal length range supported by the device. 853. Check whether the target focal length is within the range obtained. If yes, call **captureSession.setZoomRatio\(\)** to set the focal length. 86 87## How do I play music in the background? 88 89Applicable to: OpenHarmony 3.2 (API version 9) 90 91**Symptom** 92 93Music cannot be played in the background. 94 95**Solution** 96 97**AVSession** controls media playback. When a third-party application switches to the background or encounters a screen lock event, media playback is forcibly paused and the application is unaware of the pause. To enable the application to continue the playback in the background, request a continuous task and access the AVSession capability, which allows Control Panel to control the playback behavior of third-party applications. 98 99**Reference** 100 101[Continuous Task](../task-management/continuous-task.md) 102 103[AVSession Development](../media/using-avsession-developer.md) 104 105 106## What should I do when multiple video components cannot be used for playback? 107 108Applicable to: OpenHarmony 3.2 (API version 9) 109 110**Symptom** 111 112A large number of video components are created. They cannot play media normally or even crash. 113 114**Solution** 115 116A maximum of 13 media player instances can be created. 117 118## How do I invoke the image library directly? 119 120Applicable to: OpenHarmony 3.2 (API version 9) 121 122**Solution** 123 124``` 125let want = { 126 bundleName: 'com.ohos.photos', 127 abilityName: 'com.ohos.photos.MainAbility', 128 parameters: { 129 uri: 'detail' 130 } 131}; 132let context = getContext(this) as common.UIAbilityContext; 133context.startAbility(want); 134``` 135 136## How do I apply for the media read/write permission on a device? 137 138Applicable to: OpenHarmony 3.2 (API version 9, stage model) 139 140**Solution** 141 1421. Configure the permissions **ohos.permission.READ\_MEDIA** and **ohos.permission.WRITE\_MEDIA** in the **module.json5** file. 143 144 Example: 145 146 ``` 147 { 148 "module" : { 149 "requestPermissions":[ 150 { 151 "name" : "ohos.permission.READ_MEDIA", 152 "reason": "$string:reason" 153 }, 154 { 155 "name" : "ohos.permission.WRITE_MEDIA", 156 "reason": "$string:reason" 157 } 158 ] 159 } 160 } 161 ``` 162 1632. Call **requestPermissionsFromUser** to request the permissions from end users in the form of a dialog box. This operation is required because the grant mode of both permissions is **user\_grant**. 164 165 ``` 166 let context = getContext(this) as common.UIAbilityContext; 167 let atManager = abilityAccessCtrl.createAtManager(); 168 let permissions: Array<string> = ['ohos.permission.READ_MEDIA','ohos.permission.WRITE_MEDIA'] 169 atManager.requestPermissionsFromUser(context, permissions) 170 .then((data) => { 171 console.log("Succeed to request permission from user with data: " + JSON.stringify(data)) 172 }).catch((error) => { 173 console.log("Failed to request permission from user with error: " + JSON.stringify(error)) 174 }) 175 ``` 176 177## How do I obtain the camera status? 178 179Applicable to: OpenHarmony 3.2 (API version 9, stage model) 180 181**Solution** 182 183The **cameraManager** class provides a listener to subscribe to the camera status. 184 185``` 186cameraManager.on('cameraStatus', (cameraStatusInfo) => { 187 console.log(`camera : ${cameraStatusInfo.camera.cameraId}`); 188 console.log(`status: ${cameraStatusInfo.status}`); 189}) 190``` 191CameraStatus: Enumerates the camera statuses. 192 193- **CAMERA_STATUS_APPEAR** (0): A camera appears. 194- **CAMERA_STATUS_DISAPPEAR** (1): The camera disappears. 195- **CAMERA_STATUS_AVAILABLE** (2): The camera is available. 196- **CAMERA_STATUS_UNAVAILABLE** (3): The camera is unavailable. 197 198**Reference** 199 200[CameraStatus](../reference/apis/js-apis-camera.md#oncamerastatus) 201