惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
DataBreaches.Net
Apple Machine Learning Research
Apple Machine Learning Research
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
SegmentFault 最新的问题
博客园 - 聂微东
罗磊的独立博客
W
WeLiveSecurity
博客园_首页
Scott Helme
Scott Helme
V
Visual Studio Blog
T
The Exploit Database - CXSecurity.com
G
Google Developers Blog
大猫的无限游戏
大猫的无限游戏
Latest news
Latest news
L
Lohrmann on Cybersecurity
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
A
About on SuperTechFans
F
Full Disclosure
Y
Y Combinator Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
博客园 - 司徒正美
博客园 - Franky
C
CXSECURITY Database RSS Feed - CXSecurity.com
F
Fortinet All Blogs
Blog — PlanetScale
Blog — PlanetScale
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
阮一峰的网络日志
阮一峰的网络日志
S
Schneier on Security
雷峰网
雷峰网
博客园 - 【当耐特】
P
Privacy International News Feed
C
Cyber Attacks, Cyber Crime and Cyber Security
Engineering at Meta
Engineering at Meta
aimingoo的专栏
aimingoo的专栏
MongoDB | Blog
MongoDB | Blog
J
Java Code Geeks
T
Tor Project blog
V
V2EX
爱范儿
爱范儿
C
Check Point Blog
T
Threatpost
Project Zero
Project Zero
量子位
V
Vulnerabilities – Threatpost
Know Your Adversary
Know Your Adversary
I
Intezer
G
GRAHAM CLULEY
P
Privacy & Cybersecurity Law Blog
GbyAI
GbyAI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com

博客园_首页

Linux实操--组管理、权限管理和定时任务 Java + EasyExcel 实现单个接口导出多个Excel Mem0 源码解析系列(二):提示词工程的深度剖析 Openclaw TaskFlow究竟是什么?和普通Skill技能有什么区别 博文阅读密码验证 - 博客园 嘉立创开源:应该是全网MicroPython教程最多的开发板 Hermes Agent 集成实践:从协议到生产 2026年AI编程工具横评:Cursor、Codex、Claude Code、Zed、Windsurf Java程序员必看的RAG入门教程 2026 AI效率神器:Superpowers + Claude Code 保姆级教程 本地大模型部署全攻略:从 0 到 1 玩转 Ollama 【从0到1构建一个ClaudeAgent】内存管理-上下文压缩 .NET 高级开发 | 设计、实现一个事件总线框架 电子小白入门之NE555 3. WorkBuddy:隐藏玩法,一键召唤专家,让 AI 以"专家身份"给你干活 和AI一起搞事情#3:Claude Teammate 游戏开发翻车实录 【OpenClaw】通过 Nanobot 源码学习架构---(7)Memory C# .NET 周刊|2026年3月3期 我在 Debian 11 上把 K8s 单机搭起来了,过程没你想的那么顺(/opt 目录版) 深度学习进阶(七)Data-efficient Image Transformer CLI+Skill搭建浏览器AI自动化框架,告别一切重复枯燥任务 告别Token账单无底洞:OpenClaw本地部署,重塑企业数据主权的唯一解 FastAPI+Vue:文件分片上传+秒传+断点续传,这坑我帮你踩平了! SBTI 爆火后,我做了个程序员版的 CBTI。。已开源 + 附开发过程 多模态检索开始进入工程期:用 Sentence Transformers 搭建可落地的 Multimodal RAG 100多行代码实现一个最简单的Agent(用ReAct) Claude Code 通关手册(八):推荐 5 个 Hooks,代码质量提升 3 倍 老板:“有人截图了!”。安全部门:“收到,马上查暗水印!” - why技术 技术之外,皆是人间 C#/.NET/.NET Core技术前沿周刊 | 第 69 期(2026年4.01-4.12) Snack JSONPath 项目架构分析 Claude Code Buddy 小析:一个非核心功能,如何体现产品的细节完成度 AI新时代下的图床管理方案-Cloudflare图床+MCP+Skills方案指南 化繁为简:顺丰速运App如何通过 HarmonyOS SDK实现专业级空间测量 从零实现富文本编辑器#13-React非编辑节点的内容渲染 AI开发-python-langchain框架(3-23-OpenAI Functions风格Tool Calling智能助手) .NET + AI 进阶实战:基于类的技能开发 - 打造可治理的 Agent 能力模块 【从0到1构建一个ClaudeAgent】规划与协调-技能 上周热点回顾(4.6-4.12) 电子小白的工具三件套:面包板、杜邦线、万能板 单表五亿数据的查询优化 | Mysql、StarRocks 2. WorkBuddy:从“我是谁”到“帮我干活” C# 如何减少代码运行时间:7 个实战技巧 基于HelixToolkit.SharpDX 渲染3D模型 - 笺上知微 从零开始的双臂具身VLA起源及现阶段发展综述 - SkyXZ 记对 xonsh shell 的使用, 脚本编写, 迁移及调优 - pluvium27 受够了Vibe Coding的失控?换个起点,让AI事半功倍 从开始配置漏洞环境到漏洞复现流程 - 難しい 关于10年工作经验的程序员对OpenClaw的实战经验分享以及看法 - 虚无境 Any metadata 的内存布局 C# .NET 周刊|2026年3月2期 - InCerry 我帮你测过了,测试圈排名第二的 Skill 依然很牛逼 Skill Discovery | 无监督技能发现的经典工作总结 - MoonOut PbootCMS 网站内容数量多导致访问慢?这些实用优化方案帮你提速! - 家兴网络技术工作室 上下文工程是什么?过时了么?一文讲明白! - 一枫说码 网站漏洞怎么发现并修复?一篇实用指南(附完整流程) - 家兴网络技术工作室 开了 TUN 模式还是直连?90% 的人都踩过这个坑 Github日报|2026年04月12日 - AI一族 AScript扩展多种脚本语言 - rockey627 AI 学习笔记:Agent 的记忆机制 你能被装进一个文件里吗?——7 万人把同事"蒸馏"成了 AI - 我没有三颗心脏 Claude Code 通关手册(七):给 AI 装上技能包——Skills 完全指南 - 暮色之狐 在浏览器中快速编辑代码:VSCode Web 集成实践 - Newbe36524 蒸馏自己 skill?基于 Deepseek 的蒸馏器,丐版蒸馏方式,简单便捷 - To_Carpe_Diem Spring AI Aliababa和AgentScope,哪个更好? - 苏三说技术 Etsy 把 1000 个 MySQL 分片迁进 Vitess:425TB 数据背后的真正问题不是性能,而是运维规模 MicroPython LVGL基础知识和概念:底层渲染与性能优化 - FreakStudio 数据库草图算法 Python 潮流周刊#146:CPython 引入 Rust 的进展 - 豌豆花下猫 最小生成树 - mofei1116 红日靶场七:从外网入口、容器逃逸到 AD 接管的完整利用链复盘 - YouDiscovered1t 分享四款开源且实用的 Kafka 管理工具 - 追逐时光者 vLLM 权重加载机制全解析:从挑战到理想架构 LCT 学习笔记 - ACehomoxue Avalonia UI 12.0.0 正式发布:架构演进和性能飞跃 - 张善友 当 AI Agent 把调用链拉长,延迟开始成为一门生意 conhost.exe 无法显示 U+2717 - 145a 太秀了,我把自己蒸馏成了 Skill!已开源 - 程序员鱼皮 ASP.NET Core 内存缓存实战:一篇搞懂该怎么配、怎么避坑 基于 Ghostty 带有分割标签页和为 Claude 编程设计的通知终端 - BugShare AI 焊死入口:教育的“操作系统级”重塑 - 郝hai 初级Java开发工程师使用sql脚本编写代码的过程是简单而且不糊涂 - CoderOilStation Claude Code通关手册(六):MCP协议完全指南 - 暮色之狐 边框灯光环绕动画特效实现指南 - Newbe36524 开源:子木蒸馏版的 SEO 审计工具 seo-audit-skill v1.0 我所理解的Python元模型 【从0到1构建一个ClaudeAgent】规划与协调-TodoWrite - 程序员Seven Claude 和 Codex 在审计 Skill 上性能差异探究 - ACai_sec AScript如何实现中文脚本引擎 - rockey627 【渗透测试】HTB Season10 Garfield 全过程wp - dynasty_chenzi Android 开发者为什么必须掌握 AI 能力?端侧视角下的技术变革 树状数组正确性证明 - AC-wyr 你的 AI 焦虑,可能比 AI 本身更危险——ATM 机没有消灭银行柜员,但恐慌消灭了你的判断力 - 我没有三颗心脏 一个拉胯的分库分表方案有多绝望?整个部门都在救火! - 冰河团队 动态规划入门必学之走方格问题 - Ofnoname PostgREST 与 PostgreSQL 角色权限配置全解析(生产级实践) - SheepDog1998 使用 UEFI 图形输出协议 GOP 在屏幕上显示图像的方法 - 阿源- Claude Code通关手册(五):组建你的AI专家团队,子代理系统 - 暮色之狐 一个程序员到架构师的催婚路之感悟(整整10年后的催婚相亲感悟) - MisterLip 用 Agent Skill 自动生成工作周报 - 赵康
uni-app 实现视频聊天、屏幕分享,支持Android、HarmonyOS、iOS
zhuweisky · 2026-05-26 · via 博客园_首页

  uni-app 作为国内主流的手机APP开发框架,一套代码,可以同时支持安卓、苹果和纯血鸿蒙(HarmonyOS),真是太方便了。当要开发在多种手机设备上运行的APP时,这会为我们节省大量的时间成本。

  之前我们基于.NET Core实现过一个PC端 视频聊天和远程桌面的Demo (支持Windows、信创Linux),现在基于uni-app强大的跨平台能力,我们来为这个Demo增加手机APP端(并且使得APP端与PC端可以互通)。虽然,不同的手机系统上调用的底层的音视频API不一样,但我们将其封装成统一的uni-app模块,这样在uni-app层,就可以统一调用了。现在,我们来看看具体的实现过程,文末有Demo源码可以下载。

一. 开发环境

开发工具:HBuilderX 5.04

开发语言:VUE3+JS

测试手机:华为 Mate 60 Pro (纯血鸿蒙) 、小米16 、 iPhone 12

HarmonyOS:6.0.0

Andriod:16

IOS:17.0.2 

二.功能介绍

  手机端登录成功后,运行的主界面如下图所示:  

        

微信图片_20260522103347_58_74 

1. 视频聊天

(1)每个登录的用户都可向其他任意在线用户发送视频聊天请求。

(2)当收到来自其他在线用户的视频聊天邀请时,可接受或拒绝对方的请求。

(3)当接受其他在线用户的视频聊天邀请时,即可开启视频聊天。 

2. 屏幕分享

(1)每个登录的用户都可向其他任意在线用户发送屏幕分享请求;当对方未响应时,可主动取消屏幕分享请求。

(2)当收到来自其他在线用户请求屏幕分享时,可接受或拒绝对方的请求。

(3)当发送方收到其他在线用户同意屏幕分享时,即可观看对方的屏幕。

三.具体实现

 下面我们讲一下Demo中核心的代码实现

1.自定义消息类型 InformationTypes

export 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 class="toolBox" @touchmove="drag" @touchstart="drag" @touchend="drag"
                :style="`z-index: 9999;position: fixed; left: ${cameraLeft}px; top: ${cameraTop}px;`">
                <HmosCameraSurfaceViewVue ref="camera_self_panel_view" class="selfVideoView">
                </HmosCameraSurfaceViewVue>
            </view>
            <!-- #endif -->

            <!-- #ifndef APP-HARMONY -->
            <view class="toolBox" @touchmove="drag" @touchstart="drag" @touchend="drag"
                :style="`z-index: 9999;position: fixed; left: ${cameraLeft}px; top: ${cameraTop}px;`">
                <CameraSurfaceView class="selfVideoView" ref="selfCameraView">
                </CameraSurfaceView>
            </view>
            <!-- #endif -->
//ios与android,端需要获取控件实例,然后调用控件里的方法设置控件,鸿蒙端直接使用我们封装好的HmosCameraSurfaceViewVue,就可以预览自己的视频
const selfCameraView = ref(null)
//在onReady里设置控件
onReady(() => {
console.log(selfCameraView.value);
selfCameraView.value.setVideo()
})        

(3)当发送聊天邀请时,将显示视频邀请窗口             

3. 回复对方视频请求

(1)当收到对方的视频聊天邀请时,将显示视频邀请窗口   

     微信图片_20260522110659_60_74

  (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效果如下图所示:  

      微信图片_20260522114138_61_74

5. 实现屏幕分享

         屏幕分享的请求/应答逻辑几乎与视频聊天请求/应答逻辑是一模一样的。这里就不再罗列响应的代码了。

    下面的截图是以Windows与鸿蒙手机端互动为例:Windows端作为请求方,手机端作为应答方。(反过来也是一样的)

(1)PC端发起请求 

      image

 (2)手机端收到对方的屏幕分享请求时,将显示请求窗口。  

      90f0ad11025667b66a9120f596ed2e8e

  (3)当手机端同意请求时,PC端就可以观看手机的屏幕了。

      QQ_1779421573219 

 四.不同端的配置

 (1)由于苹果和安卓使用的是uniapp的原生语言插件,鸿蒙使用的是uts原生混编,所以插件的配置会有些许不同

QQ_1779431124597QQ_1779431181279

   如图所示,安卓苹果插件需要放在nativeplugins目录下,而鸿蒙插件需要放在uni_modules目录下。并且,安卓苹果的插件,需要通过uniapp云打包后,才能使用,鸿蒙直接运行即可。

QQ_1779432114469

   导入插件并且打包完后,安卓苹果便可以通过uni.requireNativePlugin来获取插件实例,鸿蒙直接通过import就可以获取到插件。 

五. 源码下载

 1. uni-app 端:VideoChatMini-uniapp.rar (支持Android、iOS、HarmonyOS)

 2. 服务端 + PC 端:VideoChatMini.rar  (支持Windows、Linux、银河麒麟、统信UOS)

  在这里,我也给出了服务端和PC端的源码,服务端和PC端都是 C# 开发的(开发环境是 VS2022),跨平台使用的是.NET Core 。

  如此一来,所有的PC之间、所有的手机之间、以及所有的手机和PC之间,都可以互通的,也就是可以相互视频通话,以及观看屏幕/桌面。

  关于这个Demo,如果你有好的建议,请留言给我,谢谢。