1# 双路预览(ArkTS) 2 3在开发相机应用时，需要先申请相机相关权限[开发准备](camera-preparation.md)。 4双路预览，即应用可同时使用两路预览流，一路用于在屏幕上显示，一路用于图像处理等其他操作，提升处理效率。 5 6相机应用通过控制相机，实现图像显示（预览）、照片保存（拍照）、视频录制（录像）等基础操作。相机开发模型为Surface模型，即应用通过Surface进行数据传递，通过ImageReceiver的surface获取拍照流的数据、通过XComponent的surface获取预览流的数据。 7 8如果要实现双路预览，即将拍照流改为预览流，将拍照流中的surface改为预览流的surface，通过ImageReceiver的surface创建previewOutput，其余流程与拍照流和预览流一致。 9 10详细的API说明请参考[Camera API参考](../../reference/apis-camera-kit/js-apis-camera.md)。 11 12## 约束与限制 13 14- 暂不支持动态添加流，即不能在没有调用[session.stop](../../reference/apis-camera-kit/js-apis-camera.md#stop11)的情况下，调用[addOutput](../../reference/apis-camera-kit/js-apis-camera.md#addoutput11)添加流。 15- 对ImageReceiver组件获取到的图像数据处理后，需要将对应的图像Buffer释放，确保Surface的BufferQueue正常轮转。 16 17## 调用流程 18 19双路方案调用流程图建议如下： 20 21 22 23## 开发步骤 24 251. 导入image接口。 26 27 创建双路预览流的SurfaceId，除XComponent组件的SurfaceId外，还需要使用ImageReceiver组件创建生成的SurfaceId，需要使用image模块提供的接口。 28 29 ```ts 30 import { image } from '@kit.ImageKit'; 31 ``` 322. 创建ImageReceiver对象。 33 ```ts 34 let size: image.Size = { 35 width: 640, 36 height: 480 37 } 38 let receiver: image.ImageReceiver = image.createImageReceiver(size, image.ImageFormat.JPEG, 8); 39 ``` 403. 获取ImageReceiver组件的SurfaceId。 41 42 ```ts 43 async function getImageReceiverSurfaceId(receiver: image.ImageReceiver): Promise<string | undefined> { 44 let ImageReceiverSurfaceId: string | undefined = undefined; 45 if (receiver !== undefined) { 46 console.info('receiver is not undefined'); 47 let ImageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId(); 48 console.info(`ImageReceived id: ${ImageReceiverSurfaceId}`); 49 } else { 50 console.error('createImageReceiver failed'); 51 } 52 return ImageReceiverSurfaceId; 53 } 54 ``` 55 564. 创建XComponent组件Surface。 57 58 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)。 59 > **说明：** 60 > 预览流与录像输出流的分辨率的宽高比要保持一致，如果设置XComponent组件中的Surface显示区域宽高比为1920:1080 = 16:9，则需要预览流中的分辨率的宽高比也为16:9，如分辨率选择640:360，或960:540，或1920:1080，以此类推。 61 625. 实现双路预览。 63 64 将步骤2、3生成的两路SurfaceId通过[createPreviewOutput](../../reference/apis-camera-kit/js-apis-camera.md#createpreviewoutput)方法传递到相机服务，创建两路预览流，其余流程按照正常预览流程开发。 65 66 ```ts 67 import { camera } from '@kit.CameraKit'; 68 69 async function createDualChannelPreview(cameraManager: camera.CameraManager, XComponentSurfaceId: string, receiver: image.ImageReceiver): Promise<void> { 70 // 获取支持的相机设备对象 71 let camerasDevices: Array<camera.CameraDevice> = cameraManager.getSupportedCameras(); 72 73 // 获取支持的模式类型 74 let sceneModes: Array<camera.SceneMode> = cameraManager.getSupportedSceneModes(camerasDevices[0]); 75 let isSupportPhotoMode: boolean = sceneModes.indexOf(camera.SceneMode.NORMAL_PHOTO) >= 0; 76 if (!isSupportPhotoMode) { 77 console.error('photo mode not support'); 78 return; 79 } 80 81 // 获取profile对象 82 let profiles: camera.CameraOutputCapability = cameraManager.getSupportedOutputCapability(camerasDevices[0], camera.SceneMode.NORMAL_PHOTO); // 获取对应相机设备profiles 83 let previewProfiles: Array<camera.Profile> = profiles.previewProfiles; 84 85 // 预览流1 86 let previewProfilesObj: camera.Profile = previewProfiles[0]; 87 88 // 预览流2 89 let previewProfilesObj2: camera.Profile = previewProfiles[0]; 90 91 // 创建 预览流1 输出对象 92 let previewOutput: camera.PreviewOutput = cameraManager.createPreviewOutput(previewProfilesObj, XComponentSurfaceId); 93 94 // 创建 预览流2 输出对象 95 let imageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId(); 96 let previewOutput2: camera.PreviewOutput = cameraManager.createPreviewOutput(previewProfilesObj2, imageReceiverSurfaceId); 97 98 // 创建cameraInput对象 99 let cameraInput: camera.CameraInput = cameraManager.createCameraInput(camerasDevices[0]); 100 101 // 打开相机 102 await cameraInput.open(); 103 104 // 会话流程 105 let photoSession: camera.PhotoSession = cameraManager.createSession(camera.SceneMode.NORMAL_PHOTO) as camera.PhotoSession; 106 107 // 开始配置会话 108 photoSession.beginConfig(); 109 110 // 把CameraInput加入到会话 111 photoSession.addInput(cameraInput); 112 113 // 把 预览流1 加入到会话 114 photoSession.addOutput(previewOutput); 115 116 // 把 预览流2 加入到会话 117 photoSession.addOutput(previewOutput2); 118 119 // 提交配置信息 120 await photoSession.commitConfig(); 121 122 // 会话开始 123 await photoSession.start(); 124 125 // 停止当前会话 126 await photoSession.stop(); 127 128 // 释放相机输入流 129 await cameraInput.close(); 130 131 // 释放预览输出流 132 await previewOutput.release(); 133 134 // 释放拍照输出流 135 await previewOutput2.release(); 136 137 // 释放会话 138 await photoSession.release(); 139 } 140 ``` 141 1426. 通过ImageReceiver实时获取预览图像。 143 144 通过ImageReceiver组件中imageArrival事件监听获取底层返回的图像数据，详细的API说明请参考[Image API参考](../../reference/apis-image-kit/js-apis-image.md)。 145 146 ```ts 147 import { BusinessError } from '@kit.BasicServicesKit'; 148 149 function onImageArrival(receiver: image.ImageReceiver): void { 150 receiver.on('imageArrival', () => { 151 receiver.readNextImage((err: BusinessError, nextImage: image.Image) => { 152 if (err || nextImage === undefined) { 153 console.error('readNextImage failed'); 154 return; 155 } 156 nextImage.getComponent(image.ComponentType.JPEG, async (err: BusinessError, imgComponent: image.Component) => { 157 if (err || imgComponent === undefined) { 158 console.error('getComponent failed'); 159 } 160 if (imgComponent.byteBuffer) { 161 // 请参考步骤7解析buffer数据，本示例以方式一为例 162 let width = nextImage.size.width; // 获取图片的宽 163 let height = nextImage.size.height; // 获取图片的高 164 let stride = imgComponent.rowStride; // 获取图片的stride 165 console.debug(`getComponent with width:${width} height:${height} stride:${stride}`); 166 // stride与width一致 167 if (stride == width) { 168 let pixelMap = await image.createPixelMap(imgComponent.byteBuffer, { 169 size: { height: height, width: width }, 170 srcPixelFormat: 8, 171 }) 172 } else { 173 // stride与width不一致 174 const dstBufferSize = width * height * 1.5 175 const dstArr = new Uint8Array(dstBufferSize) 176 for (let j = 0; j < height * 1.5; j++) { 177 const srcBuf = new Uint8Array(imgComponent.byteBuffer, j * stride, width) 178 dstArr.set(srcBuf, j * width) 179 } 180 let pixelMap = await image.createPixelMap(dstArr.buffer, { 181 size: { height: height, width: width }, 182 srcPixelFormat: 8, 183 }) 184 } 185 } else { 186 console.error('byteBuffer is null'); 187 } 188 // 确保当前buffer没有在使用的情况下，可进行资源释放 189 // 如果对buffer进行异步操作，需要在异步操作结束后再释放该资源（nextImage.release()） 190 nextImage.release(); 191 }) 192 }) 193 }) 194 } 195 ``` 196 1977. 通过 [image.Component](../../reference/apis-image-kit/js-apis-image.md#component9)解析图片buffer数据参考： 198 199 > **注意：** 200 > 需要确认图像的宽width是否与行距rowStride一致，如果不一致可参考以下方式处理： 201 202 方式一：去除component.byteBuffer中stride数据，拷贝得到新的buffer，调用不支持stride的接口处理buffer。 203 204 ```ts 205 // 当前相机预览流仅支持NV21（YUV_420_SP格式的图片） 206 const dstBufferSize = width * height * 1.5; 207 const dstArr = new Uint8Array(dstBufferSize); 208 // 逐行读取buffer数据 209 for (let j = 0; j < height * 1.5; j++) { 210 // component.byteBuffer的每行数据拷贝前width个字节到dstArr中 211 const srcBuf = new Uint8Array(component.byteBuffer, j * stride, width); 212 dstArr.set(srcBuf, j * width); 213 } 214 let pixelMap = await image.createPixelMap(dstArr.buffer, { 215 size: { height: height, width: width }, srcPixelFormat: 8 216 }); 217 ``` 218 219 方式二：根据stride*height创建pixelMap，然后调用pixelMap的cropSync方法裁剪掉多余的像素。 220 221 ```ts 222 // 创建pixelMap，width宽传行距stride的值 223 let pixelMap = await image.createPixelMap(component.byteBuffer, { 224 size:{height: height, width: stride}, srcPixelFormat: 8}); 225 // 裁剪多余的像素 226 pixelMap.cropSync({size:{width:width, height:height}, x:0, y:0}); 227 ``` 228 229 方式三：将原始component.byteBuffer和stride信息一起传给支持stride的接口处理。
