之前我们基于.NET Core实现过一个PC端 视频聊天和远程桌面的Demo 支持Windows、信创Linux现在基于uni-app强大的跨平台能力我们来为这个Demo增加手机APP端并且使得APP端与PC端可以互通。虽然不同的手机系统上调用的底层的音视频API不一样但我们将其封装成统一的uni-app模块这样在uni-app层就可以统一调用了。现在我们来看看具体的实现过程文末有Demo源码可以下载。一. 开发环境开发工具HBuilderX 5.04开发语言VUE3JS测试手机华为 Mate 60 Pro 纯血鸿蒙 、小米16 、 iPhone 12HarmonyOS6.0.0Andriod16IOS17.0.2二功能介绍手机端登录成功后运行的主界面如下图所示1. 视频聊天1每个登录的用户都可向其他任意在线用户发送视频聊天请求。2当收到来自其他在线用户的视频聊天邀请时可接受或拒绝对方的请求。3当接受其他在线用户的视频聊天邀请时即可开启视频聊天。2. 屏幕分享1每个登录的用户都可向其他任意在线用户发送屏幕分享请求当对方未响应时可主动取消屏幕分享请求。2当收到来自其他在线用户请求屏幕分享时可接受或拒绝对方的请求。3当发送方收到其他在线用户同意屏幕分享时即可观看对方的屏幕。三具体实现下面我们讲一下Demo中核心的代码实现1.自定义消息类型 InformationTypesexport const informationType { /** * 视频请求 * */ VideoRequest: 0, /** * 回复视频请求的结果 * */ VideoResult: 1, /** * 通知对方 挂断 视频连接 * */ CloseVideo: 2, /** * 通知好友 网络原因导致 视频中断 * */ NetReasonCloseVideo: 3, /** * 通知对方(忙线中) 挂断 视频连接 * */ BusyLine: 4, /** * 远程桌面请求 * */ DesktopRequest: 5, /** * 回复远程桌面请求的结果 * */ DesktopResult: 6, /** * 主动取消远程桌面请求 * */ CancelDesktop: 7, /** * 对方主人端主动断开远程桌面 * */ OwnerCloseDesktop: 8, /** * 客人端断开远程桌面连接 * */ GuestCloseDesktop: 9 }2. 发送视频请求1当发起视频聊天时将显示视频聊天窗口,并发送视频连接请求//通过import导入OMCS插件包里的多媒体管理器类以及其他连接器类 import { MultimediaManagerFactory, DesktopConnector, CameraConnector, MicrophoneConnector } from ../OMCS/OMCS-Uni; //获取到多媒体管理器 const multimediamanager MultimediaManagerFactory.GetSingleton() //发起视频聊天请求函数 const goVideo () { //发送视频连接请求 multimediamanager.SendCustomizedMessage(ownerID.value,informationType.VideoRequest,[0],) getConnector(ownerID.value) //跳转到视频请求页面 uni.navigateTo({ url: /pages/videoPage?userID${userID.value}ownerID${ownerID.value}isMyRequest${1} }) }2连接自己的摄像头预览自己的视频://通过uniapp的条件编译区分鸿蒙与ios和android !-- #ifdef APP-HARMONY -- view classtoolBox touchmovedrag touchstartdrag touchenddrag :stylez-index: 9999;position: fixed; left: ${cameraLeft}px; top: ${cameraTop}px; HmosCameraSurfaceViewVue refcamera_self_panel_view classselfVideoView /HmosCameraSurfaceViewVue /view !-- #endif -- !-- #ifndef APP-HARMONY -- view classtoolBox touchmovedrag touchstartdrag touchenddrag :stylez-index: 9999;position: fixed; left: ${cameraLeft}px; top: ${cameraTop}px; CameraSurfaceView classselfVideoView refselfCameraView /CameraSurfaceView /view !-- #endif -- //ios与android端需要获取控件实例然后调用控件里的方法设置控件,鸿蒙端直接使用我们封装好的HmosCameraSurfaceViewVue就可以预览自己的视频 const selfCameraView ref(null) //在onReady里设置控件 onReady(() { console.log(selfCameraView.value); selfCameraView.value.setVideo() })3当发送聊天邀请时将显示视频邀请窗口3. 回复对方视频请求1当收到对方的视频聊天邀请时将显示视频邀请窗口2发送回复视频聊天请求消息//挂断 const handsup () { //发送挂断消息 MultimediaManagerFactory.GetSingleton().SendCustomizedMessage(ownerID.value, informationType.CloseVideo, [],) if (isRequestVideo.value) { uni.disConnector() } isRequestVideo.value false isMyRequest.value false uni.navigateBack(); } //接听 const answer () { //发送接听消息 MultimediaManagerFactory.GetSingleton().SendCustomizedMessage(ownerID.value, informationType.VideoResult, [1], ) isRequestVideo.value true timer() requestCamera() }4. 收到对方发送过来的消息回调multimediamanager.setCustomMessageReceivedCallback((res) { try { //res为服务端返回过来的JSON数据 const message JSON.parse(res) requestID.value message.SourceUserID switch (message.InformationType) { case informationType.VideoRequest: //有人发出视频邀请 if (cameraConnector.value null microphoneConnector.value null) { getConnector(message.SourceUserID) } else { console.log(正在通话中); return } uni.navigateTo({ url: /pages/videoPage?userID${userID.value}ownerID${requestID.value}isMyRequest${0} }); break; case informationType.VideoResult: //对方回复视频邀请请求 const res new Stream(message.Content) const videoBool res.readBoolean() if (videoBool) { isRequestVideo1.value true; } else { uni.showToast({ position: bottom, title: 对方挂断 }) if (isRequestVideo1.value) { disConnector() } isRequestVideo1.value false; } uni.$emit(updateVideoResult, { isRequestVideo: isRequestVideo1.value }) break case informationType.CloseVideo: if (isRequestVideo1.value) { disConnector() } uni.showToast({ position: bottom, title: 对方挂断了音视频邀请 }) uni.navigateBack() break case informationType.DesktopRequest: console.log(有人请求远程桌面); ownerID.value message.SourceUserID popup.value.open() break case informationType.DesktopResult: //请求远程桌面的回复 const stream new Stream(message.Content) const bool stream.readBoolean() console.log(bool); if (bool) { console.log(1); // #ifndef APP-HARMONY desktopConnector.value new DesktopConnector(requestID.value) // #endif console.log(2); // #ifndef APP-HARMONY uni.__desktopConnector desktopConnector.value // #endif console.log(3); uni.navigateTo({ url: /pages/desktop?destUserID${ownerID.value} }) isScreenShareRequest.value false } else { uni.showToast({ position: bottom, title: 对方拒绝了屏幕分享请求 }) isScreenShareRequest.value false } break case informationType.CancelDesktop: uni.showToast({ position: bottom, title: 对方主动断开了桌面连接 }) popup.value.close() break case informationType.OwnerCloseDesktop: uni.reLaunch({ url: /pages/home?userID${userID.value} }) uni.showToast({ position: bottom, title: 对方主动断开了桌面连接 }) // #ifndef APP-HARMONY desktopConnector.value.disconnect() uni.__desktopConnector null // #endif break case informationType.GuestCloseDesktop: multimediamanager.stopScreenBroadcast() isSomeoneWatchScreen.value false break } } catch (err) { console.log(err); } })当对方回复同意时将连接到对方的麦克风和摄像头开始视频聊天会话onLoad((e) { console.log(e); //监听对方是否同意视频连接 uni.$on(updateVideoResult, (data) { isRequestVideo.value data.isRequestVideo if (isRequestVideo.value) { requestCamera() timer() } }) //切换摄像头 MultimediaManagerFactory.GetSingleton().switchCameraDeviceIndex(cameraIndex.value); //打开扬声器 MultimediaManagerFactory.GetSingleton().openSpeaker(); //设置是否打开麦克风 MultimediaManagerFactory.GetSingleton().setOutputAudio(isOpenMic.value); ownerID.value e.ownerID console.log(ownerID.value); isMyRequest.value Boolean(Number(e.isMyRequest)) }) const requestCamera () { uni.cameraConnector.beginConnect() uni.microphoneConnector.beginConnect() // #ifndef APP-HARMONY console.log(selfCameraView.value); nextTick(() { console.log(selfCameraView.value); selfCameraView.value.setVideo() }) // #endif uni.cameraConnector.videoRequestIFrame() }视频会话的UI效果如下图所示5. 实现屏幕分享屏幕分享的请求/应答逻辑几乎与视频聊天请求/应答逻辑是一模一样的。这里就不再罗列响应的代码了。下面的截图是以Windows与鸿蒙手机端互动为例Windows端作为请求方手机端作为应答方。反过来也是一样的1PC端发起请求