From 48b5c7d76bebb40340b1e02104b381b5c567ff86 Mon Sep 17 00:00:00 2001 From: zhangchao Date: Wed, 6 Sep 2023 17:32:17 +0800 Subject: [PATCH] =?UTF-8?q?fixed=20c14b44a=20from=20https://gitee.com/zc24?= =?UTF-8?q?68/docs/pulls/24146=20ArkTs=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhangchao --- zh-cn/application-dev/media/Readme-CN.md | 2 +- .../media/camera-dual-channel-preview.md | 203 +++++++++--------- 2 files changed, 107 insertions(+), 98 deletions(-) diff --git a/zh-cn/application-dev/media/Readme-CN.md b/zh-cn/application-dev/media/Readme-CN.md index b4dd333e70..0c3491b48c 100755 --- a/zh-cn/application-dev/media/Readme-CN.md +++ b/zh-cn/application-dev/media/Readme-CN.md @@ -63,7 +63,7 @@ - [拍照实现方案](camera-shooting-case.md) - [录像实现方案](camera-recording-case.md) - [使用人像模式拍照](camera-mode.md) - - [双路预览](dual-channel-preview.md) + - [双路预览](camera-dual-channel-preview.md) - [性能提升方案（仅对系统应用开放）](camera-performance-improvement.md) - 图片 - [图片开发概述](image-overview.md) diff --git a/zh-cn/application-dev/media/camera-dual-channel-preview.md b/zh-cn/application-dev/media/camera-dual-channel-preview.md index bc37733fd0..c2f688032c 100644 --- a/zh-cn/application-dev/media/camera-dual-channel-preview.md +++ b/zh-cn/application-dev/media/camera-dual-channel-preview.md @@ -23,23 +23,25 @@ 创建双路预览流的SurfaceId，除XComponent组件的SurfaceId外，还需要使用ImageReceiver组件创建生成的SurfaceId，需要使用image模块提供的接口。 - ```js + ```ts import image from '@ohos.multimedia.image'; ``` 2. 创建ImageReceiver组件Surface。 - ```js - function getImageReceiverSurfaceId() { - let receiver = image.createImageReceiver(640, 480, 4, 8); - console.info('before ImageReceiver check'); - if (receiver !== undefined) { - console.info('ImageReceiver is ok'); - let ImageReceiverSurfaceId = receiver.getReceivingSurfaceId(); - console.info('ImageReceived id: ' + JSON.stringify(ImageReceiverSurfaceId)); - } else { - console.info('ImageReceiver is not ok'); - } + ```ts + async function getImageReceiverSurfaceId(): Promise { + let receiver: image.ImageReceiver = image.createImageReceiver(640, 480, 4, 8); + console.info('before ImageReceiver check'); + let ImageReceiverSurfaceId: string; + if (receiver !== undefined) { + console.info('ImageReceiver is ok'); + let ImageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId(); + console.info(`ImageReceived id: ${ImageReceiverSurfaceId}`); + } else { + console.info('ImageReceiver is not ok'); + } + return ImageReceiverSurfaceId; } ``` @@ -47,27 +49,33 @@ 可参考[相机预览指导文档](camera-preview.md)。 - ```js + ```ets + //xxx.ets // 创建XComponentController - mXComponentController: XComponentController = new XComponentController; - build() { + @Component + struct XComponentPage { + // 创建XComponentController + mXComponentController: XComponentController = new XComponentController; + + build() { Flex() { - // 创建XComponent - XComponent({ - id: '', - type: 'surface', - libraryname: '', - controller: this.mXComponentController - }) - .onLoad(() => { - // 设置Surface宽高（1920*1080），预览尺寸设置参考前面 previewProfilesArray 获取的当前设备所支持的预览分辨率大小去设置 - this.mXComponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080}); - // 获取Surface ID - globalThis.XComponentsurfaceId = this.mXComponentController.getXComponentSurfaceId(); + // 创建XComponent + XComponent({ + id: '', + type: 'surface', + libraryname: '', + controller: this.mXComponentController + }) + .onLoad(() => { + // 设置Surface宽高（1920*1080），预览尺寸设置参考前面 previewProfilesArray 获取的当前设备所支持的预览分辨率大小去设置 + this.mXComponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080}); + // 获取Surface ID + let surfaceId: string = this.mXComponentController.getXComponentSurfaceId(); }) - .width('100%') - .height('100%') + .width('1920px') + .height('1080px') } + } } ``` @@ -75,83 +83,84 @@ 将步骤2、3生成的两路SurfaceId通过createPreviewOutput方法传递到相机服务，创建两路预览流，其余流程按照正常预览流程开发。 - ```js - let cameraManager = camera.getCameraManager(globalThis.abilityContext); - let CamerasDevices = cameraManager.getSupportedCameras(); // 获取支持的相机设备对象 - - // 正常写法通过下面方式获取实际情况下的profile对象 - // let profiles = await this.cameraManager.getSupportedOutputCapability(CamerasDevices[cameraDeviceIndex]); // 获取对应相机设备profiles - // let previewProfiles = profiles.previewProfiles; - - // 预览流1 - let previewProfilesObj: camera.Profile; - previewProfilesObj.size.width = 640; - previewProfilesObj.size.height = 480; - previewProfilesObj.format = 3; - - // 预览流2 - let previewProfilesObj2: camera.Profile; - previewProfilesObj2.size.width = 640; - previewProfilesObj2.size.height = 480; - previewProfilesObj2.format = 3; - - // 创建 预览流1 输出对象 - let previewOutput = cameraManager.createPreviewOutput(previewProfilesObj, XComponentsurfaceId); - - // 创建 预览流2 输出对象 - let imageReceiverSurfaceId: string = await this.mReceiver.getReceivingSurfaceId(); - let previewOutput2 = cameraManager.createPreviewOutput(previewProfilesObj2, imageReceiverSurfaceId); - - // 创建cameraInput输出对象 - let cameraInput = cameraManager.createCameraInput(CamerasDevices[cameraDeviceIndex]); - - // 打开相机 - await cameraInput.open(); - - // 会话流程 - let captureSession = await cameraManager.createCaptureSession(); - - // 开始配置会话 - captureSession.beginConfig(); - - // 把CameraInput加入到会话 - captureSession.addInput(cameraInput); - - // 把 预览流1 加入到会话 - captureSession.addOutput(previewOutput) - - // 把 预览流2 加入到会话 - captureSession.addOutput(previewOutput2); - - // 提交配置信息 - await captureSession.commitConfig(); - - // 会话开始 - await captureSession.start(); + ```ts + import camera from '@ohos.multimedia.camera'; + + async function createDualChannelPreview(cameraManager: camera.CameraManager, XComponentSurfaceId: string, receiver: image.ImageReceiver): Promise { + let camerasDevices: Array = cameraManager.getSupportedCameras(); // 获取支持的相机设备对象 + + // 获取profile对象 + let profiles: camera.CameraOutputCapability = await this.cameraManager.getSupportedOutputCapability(camerasDevices[0]); // 获取对应相机设备profiles + let previewProfiles: Array = profiles.previewProfiles; + + // 预览流1 + let previewProfilesObj: camera.Profile = previewProfiles[0]; + + // 预览流2 + let previewProfilesObj2: camera.Profile = previewProfiles[0]; + + // 创建 预览流1 输出对象 + let previewOutput: camera.PreviewOutput = cameraManager.createPreviewOutput(previewProfilesObj, XComponentSurfaceId); + + // 创建 预览流2 输出对象 + let imageReceiverSurfaceId: string = await receiver.getReceivingSurfaceId(); + let previewOutput2: camera.PreviewOutput = cameraManager.createPreviewOutput(previewProfilesObj2, imageReceiverSurfaceId); + + // 创建cameraInput对象 + let cameraInput: camera.CameraInput = cameraManager.createCameraInput(camerasDevices[0]); + + // 打开相机 + await cameraInput.open(); + + // 会话流程 + let captureSession: camera.CaptureSession = cameraManager.createCaptureSession(); + + // 开始配置会话 + captureSession.beginConfig(); + + // 把CameraInput加入到会话 + captureSession.addInput(cameraInput); + + // 把 预览流1 加入到会话 + captureSession.addOutput(previewOutput) + + // 把 预览流2 加入到会话 + captureSession.addOutput(previewOutput2); + + // 提交配置信息 + await captureSession.commitConfig(); + + // 会话开始 + await captureSession.start(); + } ``` 5. 通过ImageReceiver实时获取预览图像。 通过ImageReceiver组件中imageArrival事件监听获取底层返回的图像数据，详细的API说明请参考[Image API参考](../reference/apis/js-apis-image.md)。 - ```js - this.receiver.on('imageArrival', () => { - this.receiver.readNextImage((err, nextImage: image.Image) => { - if (err || nextImage === undefined) { - return; - } - nextImage.getComponent(image.ComponentType.JPEG, (errMsg, img) => { - if (errMsg || img === undefined) { - return; + ```ts + import { BusinessError } from '@ohos.base'; + + function onImageArrival(receiver: image.ImageReceiver): void { + receiver.on('imageArrival', () => { + receiver.readNextImage((err: BusinessError, nextImage: image.Image) => { + if (err || nextImage === undefined) { + return; + } + nextImage.getComponent(image.ComponentType.JPEG, (err: BusinessError, imgComponent: image.Component) => { + if (err || imgComponent === undefined) { + return; } - let buffer; - if (img.byteBuffer) { - buffer = img.byteBuffer; + let buffer: ArrayBuffer; + if (imgComponent.byteBuffer) { + buffer = imgComponent.byteBuffer; } else { - return; + return; } // do something...; - }) + }) }) - }) + }) + } ``` -- GitLab