跨设备互通提供跨设备的相机、扫描、图库访问能力，平板或2in1设备可以调用手机的相机、扫描、图库等功能。

场景介绍

您通过此能力实现跨设备交互，可以使用其他设备的相机、扫描和图库功能。

约束与限制

需同时满足以下条件，才能使用该功能：

• 设备限制

  • 本端设备：HarmonyOS版本为HarmonyOS NEXT及以上的平板或2in1设备。
  • 远端设备：HarmonyOS版本为HarmonyOS NEXT及以上、具有相机能力的手机或平板设备。

• 使用限制

  • 双端设备需要登录同一华为账号。

  • 跨设备互通API支持根据特定调用策略调用设备。调用策略：2in1设备可以调用平板和手机，平板可以调用手机，同类型设备不可调用。

  • 双端设备需要打开WLAN和蓝牙开关。

    条件允许时，建议双端设备接入同一个局域网，可提升唤醒相机的速度。

接口说明

开发步骤

1. 导入模块。

import { createCollaborationServiceMenuItems, CollaborationServiceStateDialog, CollaborationServiceFilter } from '@kit.ServiceCollaborationKit';

[createCollaborationServiceMenuItems]是设备列表菜单项模块，传入[CollaborationServiceFilter]的能力枚举值；[CollaborationServiceStateDialog]是状态提示框模块。

1. 在Menu中调用createCollaborationServiceMenuItems添加设备列表选择器，在菜单项内显示设备列表。

   说明

   在调用[createCollaborationServiceMenuItems]前，需了解：

   • 该方法需要在[Menu]组件内调用。
   • 该方法是自定义构建函数，您在使用前需要先了解[@Builder]。

2. 传入Array类型的[CollaborationServiceFilter]枚举值即可使用对应能力，目前支持ALL、TAKE_PHOTO、SCAN_DOCUMENT和IMAGE_PICKER。

   ALL为预留值，匹配所有业务，功能将在后续拓展，TAKE_PHOTO匹配跨设备拍照能力，SCAN_DOCUMENT匹配跨设备扫描能力，IMAGE_PICKER匹配跨设备图库能力。

@Builder
MyTestMenu() {
  Menu() {
    createCollaborationServiceMenuItems([CollaborationServiceFilter.ALL]) 
  }
}

1. 在build方法中添加弹窗组件[CollaborationServiceStateDialog]，用于提示远端相机拍摄状态和回传数据，需要实现其中的[onState]方法。[CollaborationServiceStateDialog]是全局的提示框，不会对原有布局产生影响。

2. 为弹窗组件绑定和实现[onState]方法，用于接收和处理照片数据。

   回调函数的传入参数stateCode是完成状态，buffer是回传的图片数据，可通过状态和图片数据结合自身的业务逻辑实现[onState]方法。

CollaborationServiceStateDialog({
  onState: (stateCode: number, bufferType: string, buffer: ArrayBuffer):void => this.doInsertPicture(stateCode, bufferType, buffer)
})

完整示例

通过以下示例，您可以完成一次调用对端相机拍摄的操作。

import {
  createCollaborationServiceMenuItems,
  CollaborationServiceStateDialog,
  CollaborationServiceFilter
} from '@kit.ServiceCollaborationKit';
import { image } from '@kit.ImageKit';
import { hilog } from '@kit.PerformanceAnalysisKit';


@Entry
@Component
struct Index {
  @State picture: PixelMap | undefined = undefined;


  @Builder
  MyTestMenu() {
    Menu() {
      createCollaborationServiceMenuItems([CollaborationServiceFilter.ALL])
    }
  }


  build() {
    Column({ space: 20 }) {
      CollaborationServiceStateDialog({
        onState: (stateCode: number, bufferType: string, buffer: ArrayBuffer): void => this.doInsertPicture(stateCode, bufferType, buffer)
      })
      Button('使用远端设备进行拍照')
        .type(ButtonType.Normal)
        .borderRadius(10)
        .bindMenu(this.MyTestMenu)


      if (this.picture) {
        Image(this.picture)
          .borderStyle(BorderStyle.Dotted)
          .borderWidth(1)
          .objectFit(ImageFit.Contain)
          .height('80%')
          .onComplete((event) => {
            if (event != undefined) {
              hilog.info(0, "MEMOMOCK", "onComplete " + event.loadingStatus)
            }
          })
      }
    }
    .padding(20)
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }


  doInsertPicture(stateCode: number, bufferType: string, buffer: ArrayBuffer): void {
    if (stateCode != 0) {
      return
    }
    if (bufferType == "general.image") {
      let imageSource = image.createImageSource(buffer)
      imageSource.createPixelMap().then((pixelMap) => {
        this.picture = pixelMap;
      })
    }
  }
}

本文提到的 [相关技术点] 只是冰山一角！勉费《HarmonyOS全栈开发实战》+《鸿蒙项目源码合集》，涵盖基础到进阶，助你快速上手鸿蒙！👉 点我【下方】立拿