鸿蒙跨设备互通：让你的应用“借用“另一台设备的相机和图库

引言想象一个场景你正在平板上编辑一份文档需要插入一张纸质资料的照片。平板没有后置摄像头或者拍照体验远不如手机——这时候如果能直接调起旁边那台手机的相机拍完照片自动传回平板那该多省事。这就是鸿蒙跨设备互通要解决的问题。它提供了一种能力让一台设备可以调用同账号下另一台设备的相机、扫描和图库功能拍照、扫文档、选图片视频都不用再手动传来传去。本文基于鸿蒙跨设备互通的开发接口梳理这项能力的适用范围、使用条件以及如何在应用中完成一次完整的跨设备调用。适合对鸿蒙开发有一定基础、希望为应用接入多设备协同能力的开发者阅读。一、哪些设备能互通谁能调用谁跨设备互通并不是任意两台鸿蒙设备之间都能随便调用的它有一套明确的设备关系和调用方向。1.1 基础调用关系最初的设计思路很直观——屏幕更大、但拍照能力可能不够好的设备去调用拍照更强的设备2in1 设备可以调用平板和手机平板可以调用手机也就是说调用方向大致是大屏调小屏。1.2 API 6.1.0(23) 之后的扩展从 API 6.1.0(23) 开始调用关系变得更加灵活。手机、平板和 2in1 设备都可以作为发起方去调用远端设备的能力但远端设备能提供什么能力取决于设备类型远端设备类型可被调用的能力手机拍照、扫描、图库图片与视频平板拍照、扫描、图库图片与视频2in1 设备图库图片与视频简单来说手机和平板是全能选手三项能力都能被远端调用2in1 设备因为自身定位只对外开放图库能力。1.3 必须满足的前提条件要让跨设备互通正常工作以下条件缺一不可系统版本双端设备都需要运行 HarmonyOS NEXT 及以上版本。同一账号双端设备必须登录同一个华为账号。网络和蓝牙双端设备都需要打开 WLAN 和蓝牙开关。如果条件允许接入同一个局域网可以明显提升唤醒远端相机的速度。如果在调用视频选择器时遇到资源加载异常建议先确认双端的设备调用能力是否匹配、系统状态是否正常然后在稳定的网络环境下重试。二、核心流程从发现设备到接收数据跨设备互通的开发流程可以拆解为三个环节发现可用设备 → 发起调用 → 接收回传数据。鸿蒙为这三个环节提供了对应的组件支持。2.1 发现设备设备列表选择器第一步是让用户看到周围有哪些设备可以调用。这通过createCollaborationServiceMenuItems来实现——它是一个自定义构建函数作用是在菜单中展示当前组网内具备对应互通能力的设备列表。使用时需要传入一个能力过滤参数CollaborationServiceFilter告诉它你需要哪种能力的设备。目前支持的过滤值包括过滤值含义ALL匹配拍照、扫描和图库选择器预留值后续会拓展TAKE_PHOTO匹配跨设备拍照能力SCAN_DOCUMENT匹配跨设备扫描能力IMAGE_PICKER匹配跨设备图库图片能力VIDEO_PICKER匹配视频选择器IMAGE_VIDEO_PICKER匹配图片和视频选择器有一点需要注意这个方法必须在Menu组件内调用因为它本质上是往菜单里填充设备列表项。同时它是一个Builder自定义构建函数如果你对Builder的用法还不太熟悉建议先了解一下相关文档。2.2 状态提示与数据回传弹窗组件当用户选择了一台远端设备并触发操作后比如在远端手机上拍照你需要一个组件来做两件事一是提示用户远端设备当前的操作状态二是在操作完成后接收回传的数据。CollaborationServiceStateDialog就是做这个的。它是一个全局弹窗组件放在页面的build方法中即可不会影响原有的页面布局。它最关键的部分是onState回调方法这个回调会在远端操作完成时被触发带回三个参数stateCode操作完成状态0 表示成功bufferType回传数据的类型比如general.image表示图片buffer回传的数据内容本身ArrayBuffer格式开发者只需要在onState里根据这些参数结合自己的业务逻辑处理回传数据即可。三、完整开发实践调用远端相机拍照并显示理解了上面的核心流程后我们来看一个完整的实现。这个示例的目标很简单点击按钮弹出可用设备列表选择一台远端设备拍照拍完后把照片显示在本端页面上。3.1 导入所需模块import{createCollaborationServiceMenuItems,CollaborationServiceStateDialog,CollaborationServiceFilter}fromkit.ServiceCollaborationKit;import{image}fromkit.ImageKit;import{hilog}fromkit.PerformanceAnalysisKit;这里引入了三个 KitServiceCollaborationKit提供跨设备互通的核心能力ImageKit用于处理回传的图片数据PerformanceAnalysisKit用于日志输出。3.2 搭建页面结构EntryComponentstruct Index{Statepicture:PixelMap|undefinedundefined;BuilderMyTestMenu(){Menu(){createCollaborationServiceMenuItems([CollaborationServiceFilter.ALL])}}build(){Column({space:20}){// 状态弹窗全局组件不影响布局CollaborationServiceStateDialog({onState:(stateCode:number,bufferType:string,buffer:ArrayBuffer):voidthis.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)}}整个页面结构很清晰顶部是全局的状态弹窗用户感知不到它的存在除非有状态需要提示中间是触发操作的按钮底部是照片展示区域。按钮通过.bindMenu(this.MyTestMenu)绑定了设备列表菜单。用户点击按钮后会看到周围可用的设备列表选中某台设备就会唤起该设备的相机。3.3 处理回传的照片数据doInsertPicture(stateCode:number,bufferType:string,buffer:ArrayBuffer):void{if(stateCode!0){return}if(bufferTypegeneral.image){letimageSourceimage.createImageSource(buffer)imageSource.createPixelMap().then((pixelMap){this.picturepixelMap;})}}这段逻辑是整个流程的收尾环节先检查stateCode是否为 0即操作成功不成功则直接返回。确认回传数据类型是图片general.image。用ImageKit的createImageSource从ArrayBuffer创建图片源再转成PixelMap。赋值给状态变量picture触发页面刷新照片就显示出来了。整个过程中开发者不需要关心设备发现、连接建立、数据传输这些底层细节框架已经把这些封装好了。你只需要关注要什么能力和拿到数据后怎么用。四、总结与实践建议跨设备互通的核心价值在于打破了单台设备的能力边界。对于平板、2in1 这类大屏设备来说它补齐了拍照和扫描的短板对于多设备协作的场景它省去了拍照后手动传文件的繁琐操作。从开发角度看这项能力的接入成本并不高。核心就是两个组件的配合使用createCollaborationServiceMenuItems负责设备发现和选择CollaborationServiceStateDialog负责状态提示和数据回传。开发者的主要工作集中在onState回调中——根据回传的数据类型做好业务层面的处理即可。在实际接入时有几点值得注意能力过滤要精准如果你的场景只需要拍照传TAKE_PHOTO而不是ALL可以让设备列表更准确避免用户看到不相关的选项。同一局域网能提速虽然 WLAN 蓝牙是最低要求但接入同一局域网对唤醒速度有明显帮助在产品文案或引导中可以提示用户。关注 API 版本差异6.1.0(23) 前后的调用方向有变化。如果你的应用需要兼容较早版本在设备能力判断上要做好区分。回传数据类型判断onState回调中的bufferType会区分图片和视频等不同类型做好类型判断再处理避免数据解析出错。对于已经在做多设备协同场景的应用来说跨设备互通是一个值得优先接入的能力——它的使用门槛低但带来的体验提升是用户能直接感知到的。