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

推荐订阅源

博客园_首页
T
Threat Research - Cisco Blogs
GbyAI
GbyAI
Y
Y Combinator Blog
美团技术团队
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 【当耐特】
S
SegmentFault 最新的问题
IT之家
IT之家
Recent Announcements
Recent Announcements
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
阮一峰的网络日志
阮一峰的网络日志
T
The Blog of Author Tim Ferriss
Martin Fowler
Martin Fowler
Microsoft Azure Blog
Microsoft Azure Blog
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
U
Unit 42
WordPress大学
WordPress大学
博客园 - Franky
L
LangChain Blog
人人都是产品经理
人人都是产品经理
小众软件
小众软件
博客园 - 叶小钗
罗磊的独立博客
酷 壳 – CoolShell
酷 壳 – CoolShell
大猫的无限游戏
大猫的无限游戏
云风的 BLOG
云风的 BLOG
Vercel News
Vercel News
雷峰网
雷峰网
腾讯CDC
Google DeepMind News
Google DeepMind News
博客园 - 三生石上(FineUI控件)
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Help Net Security
Help Net Security
C
Check Point Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
N
News and Events Feed by Topic
V2EX - 技术
V2EX - 技术
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Schneier on Security
Schneier on Security
博客园 - 聂微东
A
Arctic Wolf
H
Heimdal Security Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
The Exploit Database - CXSecurity.com
C
Cyber Attacks, Cyber Crime and Cyber Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Google DeepMind News
Google DeepMind News

博客园_首页

Plist 二进制格式 Milvus 和 PGVector,哪个更好? OpenClaw 已过时?在 VS Code 中运行 Hermes Agent! 第30篇文章:一个大三计科生的自白 Manim如何在数学公式中完美显示中文? Docker 部署 RocketMQ 5 并发编程核心概念辨析 C#事务处理最佳实践:别再让“主表存了、明细丢了”的破事发生 CLI 是什么?为什么大厂突然集体卷命令行? 【从0到1构建一个ClaudeAgent】协作-自主Agent UIImageView 设置图片不生效的原因排查 最小二乘问题详解20:无先验约束下的增量式SFM自由网平差 痞子衡嵌入式:大话双核i.MXRT1180之XIP应用里借助MU实现可靠Flash IAP的方法 AI Chat 封装, SemanticKerne.AiProvider.Unified 已发布 Windows下右键编辑js文件无法打开记事本——在注册表中使用环境变量 在后台服务中使用 Scoped 服务,为什么总是报错? H200 安装驱动并使用sglang启动模型 wireshark 抓包Trap上报告警内容 我用 AI 辅助开发了一系列小工具(2):图片压缩工具 [A Primer On MC and CC] 2.1 Memory Consistency 1 - 指令重排序和 SC 模型 Oracle数据库SCN推进技术详解与实践指南 玩转控件:封装个带图片的Label控件 Claude Code 4.7 真正该升级的不是模型,而是你的工作流 前端小白一句话,AI 帮我做了个颜值拉满的桌面媒体播放器。当代码不再是门槛,一句话编程就是现实。 5. WorkBuddy: 小龙虾的灵魂三件套,让你的小龙虾不只是工具 SQLite 分片方案实战:三种分片策略的深度对比 告别简陋 UI!一款基于 Fluent Design 和基于 WinUI 的开源免费、现代化的 Avalonia UI 控件库 关于二进制排列组合枚举的总结 AI开发-python-LangGraph框架(3-27-LangGraph从零实现大模型智能决策工作流) ElasticSearch主分片和副本分片概念详解 【002】HTTPS 粗解:证书、TLS 握手与对后端配置的影响 Hermes Agent 一周暴涨五万 Star,但我劝你别急着追 明明连接的是Redis的DB0,为什么能查到DB3的数据? 【从0到1构建一个ClaudeAgent】协作-Agent团队 熟悉电子元器件之后,电子小白下一步该怎么走? MAF快速入门(23)通过C#类定义Skills .NET 高级开发 | 手写一个对象映射框架 FastAPI数据库ORM怎么选?我肝了三个Demo后,终于不再纠结了 mysqldump 参数拾遗:在遗忘与铭记之间 C# .NET 周刊|2026年3月5期 Claude code入门 - 陈彦斌 一文学习入门 ThingsBoard 开源物联网平台 GitHub 热门项目 | 2026年04月16日 如何为GIT设置全局勾子,为每次提交追加信息 Number.isFinite和isFinite与isNaN()和Number.isNaN的区别 PortSwigger SQL注入LAB2 推荐一个测试人必备的Skills,从功能到性能全搞定(附详细实操和安装下载方式) 筑基期:掌握Odoo基础核心知识点02(Odoo XML 开发方式详解) GLM模型这么火,咱们用vllm也咧一个呗! 深入理解 AbortController:从底层原理到跨语言设计哲学 字符串学习笔记 多租户系统框架的基础模块设计和分析设计 Apache SeaTunnel Zeta 为什么能做到“又快又稳”? AI开发-python-LangGraph框架(3-26-LangGraph基本概念及第一个简单样例) Vue 3 组件通信,别只会用 Props 和 Emits 了,这几个狠活儿你得看看 ElasticSearch7.X版本配置密码 用Manim实现动态交点计算--从一个动点问题说起 团结引擎+Addressable+Instant Game打包抖音小游戏 function call 实战:让 LLM 自动判断 pod 异常、调用日志工具并完成故障分析 bubseek —— 让 Agent 的足迹,变成团队的洞察 通过 C# 读取并导出 PDF 书签 如何用 GitHub Actions 实现 Steam 自动化发布 【从0到1构建一个ClaudeAgent】并发-后台任务 .NET 高级开发 | 定制 ASP.NET Core 框架 电子小白:什么是运算放大器(运放) zero2Agent:面向大厂面试的 Agent 工程教程,从概念到生产的完整学习路线 堆上的ORW HC32F460 USB CDC通信异常:非对齐访问异常排查 20260413-Hyperbridge 攻击事件:发生在默克尔山上的验证绕过 那些喊着AI 要淘汰你的人,正在靠你的焦虑赚大钱! 深度学习进阶(八)Swin Transformer 最小二乘问题详解19:带先验约束的增量式SFM优化与实现 SnapTranslate 3.0 正式发布:全局划词翻译 + 完整英语学习闭环,一站式搞定查词、记词、复习 工作的意义、工作的困难认知再思考 .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 上下文工程是什么?过时了么?一文讲明白! - 一枫说码 开了 TUN 模式还是直连?90% 的人都踩过这个坑 AScript扩展多种脚本语言 - rockey627 AI 学习笔记:Agent 的记忆机制 你能被装进一个文件里吗?——7 万人把同事"蒸馏"成了 AI - 我没有三颗心脏 Claude Code 通关手册(七):给 AI 装上技能包——Skills 完全指南 - 暮色之狐 在浏览器中快速编辑代码:VSCode Web 集成实践 - Newbe36524 蒸馏自己 skill?基于 Deepseek 的蒸馏器,丐版蒸馏方式,简单便捷 - To_Carpe_Diem Spring AI Aliababa和AgentScope,哪个更好? - 苏三说技术
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,如果你有好的建议,请留言给我,谢谢。