SpringBoot3+UniApp+LiveKit 企业音视频通话：资料卡拨打、来电浮层、通话中控制怎么落地-北京尧图网络

SpringBoot3UniAppLiveKit 企业音视频通话资料卡拨打、来电浮层、通话中控制怎么落地文档地址https://ruoyioffice.com源码1·GitHubhttps://github.com/yuqing2026/ruoyi-office源码2·GitCodehttps://gitcode.com/zhouzhongyan/ruoyi-office源码3·Giteehttps://gitee.com/yqzy1688/ruoyi-office微信17156169080备注「RuoYi Office」催审批还在切微信打电话忙线、拒接、超时在会话里都看不见。RuoYi Office 把音视频嵌进全功能 IM资料卡点语音 / 视频来电在任意子页浮层弹出接通后控制条只管静音、摄像头和挂断。媒体进 LiveKit 房间状态机、Token、来电信令留在自己的服务。▲ 左手机来电 → SpringBoot3 推 1601 信令 → 中 PC 双人画面 / 来电浮层 → LiveKit Token 进同一房间 → 右 UniApp 静音挂断。Vue3 与 UniApp 共用房间不共用页面引言通话若只是套一层 WebRTC产品会先散企业里「打个电话」看起来像聊天功能落地时却会拆成四件互不相让的事谁能拨、谁该响、房间怎么进、历史怎么写。四件塞进同一个前端组件忙线会漏、群通话会重复开房、小程序还会假装自己也能推流。错法看起来省事上线一周后直接嵌第三方会议链接不用自研组织外账号、无忙线、会话里没有结束原因自研 SDP 协商显得完整弱网、防火墙、移动端编解码全自己扛通话按钮绑死在会话页少写一个浮层人在通讯录时来电看不见按住说话和实时通话共用入口少一个图标用户按住想发语音条却弹出摄像头授权正确的形状是LiveKit 只管房间里的媒体自有后端只管会话状态、Token、来电信令和历史 tip。按住说话是消息气泡实时通话是另一条状态机。本文只写后一条。连接性也要画清SpringBoot3 发 1601、发 Token、写灰气泡LiveKit 只认房间和轨道Vue3 的来电浮层和 UniApp 的通话页共用同一个 room不共用同一套页面。少任何一环都会变成「信令到了但没声音」或「声音通了但会话里没有结束原因」。不要把这篇读成 IM 大全。单聊发图、文件、未读红点8 月那篇轻聊已经写过。这里只写/im/home上能拨出去、能接起来的通话。一、先把产品边界画清1.1 两种 IM不要混成一个按钮形态路由通话按钮OA 轻聊/oa/im通常没有。审批详情找人、传一句油费全功能 IM/im/home资料卡「语音聊天 / 视频聊天」群会话另有选人发起客户只要审批旁边能问一句不要上 LiveKit。上了完整 IM才在资料卡露出拨打。两种形态共用组织选人不共用通话状态机。1.2 私聊一次性信令群通话两段灰气泡私聊主叫邀请被叫接、拒或超时结束原因写进会话。群通话还要让没被邀请的人看见「有人在打」。所以群聊在消息流里多写两段类型编号谁看见什么时候写RTC_CALL1601仅参与方邀请、加入、拒绝、未接、离开RTC_CALL_START1610群全员发起时入消息流RTC_CALL_END1611群全员取消或离开导致关房1601 是浮层的燃料。1610 / 1611 是会话列表预览和历史灰气泡。不要用 1601 广播全群否则没被邀请的人屏幕上会弹接听。1.3 状态机只要三档主表主表im_rtc_callCREATED → RUNNING → ENDED。发起人自己先 JOINED但通话仍停在 CREATED等第一个非发起人接通才切 RUNNING。明细im_rtc_participant每人一行INVITING / JOINED / LEFT / REJECTED / NO_ANSWER。关房时明细必须落到后三个终态之一浮层才收得干净。结束原因写在主表挂断、已拒绝、已取消、无人接听、对方正忙、异常。灰气泡文案认这个枚举不要前端自己编一句「通话结束」。二、系统设计谁干什么子模块功能面向谁通话服务创建、邀请、接听、拒绝、离开、忙线锁全功能 IM 用户LiveKit 客户端封装签 Token、验 Webhook媒体房间WebSocket 通知1601 推参与方正在响铃或在房的人消息服务1610 / 1611 入聊天群成员、私聊双方超时 Job振铃超时标 NO_ANSWER无人接听清理 Job房间残留兜底运维核心决策决策点方案理由媒体不自研LiveKit 推拉流SDP、弱网、设备差异不进业务仓库同好友 / 同群一把锁Redis 锁锁内再查活跃通话防并发各开一通Token 跟响应走create / accept / join 里签发ENDED 不再签前端自然收起浮层不绑会话页全局通话容器人在通讯录也能接小程序不装通话supportsRtc()为 false不要假装全端都通Webhook 只做离开 / 关房兜底。签名失败返回成功但忽略避免给伪造请求反馈。房内 Track 变化由客户端事件处理后端不重复推「谁开了摄像头」。三、PC资料卡拨打和三态浮层入口在全功能 IM 的用户资料卡不是会话输入框旁边的麦克风。输入框麦克风是按住说话。资料卡是「语音聊天 / 视频聊天」。▲ 全功能 IM 会话顶栏电话图标点开是语音 / 视频。输入框麦克风是按住说话不要点错点下去之后主叫进邀请中被叫在任意 IM 子页弹出来电。浮层有三态邀请中、来电、通话中。容器挂在/im/home根上不跟当前会话组件一起卸载。历史里留下时长和结束原因刷新后还在。▲ 会话里的语音通话灰气泡时长、已取消、已拒绝。1610 / 1611 写在这里不是只推 1601▲ 群或私聊预览写成「语音通话」。没被邀请的人只看见灰气泡不弹接听接通后控制条只留媒体动作静音、关摄像头、切扬声器、挂断。忙线文案是「当前已有通话」不要复用会议室「时段冲突」。▲ 顶栏电话入口随时可再拨进行中的通话在会话预览里写成「语音通话 00:44」群通话顶部可以有一条「N 人正在通话」胶囊。点加入走join校验必须是群成员防止只拿 room 字符串就越权进房。群里还能追加邀请被邀请人再收 1601。胶囊条只给还在进行的房间灰气泡留给历史。四、移动端拨打、来电、通话中UniApp 通话页在pages-im/home/conversation/rtc/call/。H5 和 App 走 LiveKit小程序编译期关掉supportsRtc()返回 false按钮直接不渲染。麦克风、摄像头授权和打卡定位授权不是同一套。打卡要的是位置通话要的是媒体设备。首次拨打再弹不要在登录时一口气要完。▲ 好友资料卡底部「音视频通话」再拆语音 / 视频。这里不是按住说话▲ 竖屏通话页头像、计时、静音、扬声器、红色挂断。390×844▲ 控制条只留媒体动作。挂断后回会话灰气泡写结束原因PC 与手机可以同时在线但一通通话只允许一端接。另一端收到 JOINED / END 后收起浮层。不要做成「两边各进一个房间」。演示站若 LiveKit 代理不通页面仍应看得到拨打和来电 UI。媒体没接通不等于信令没落地。正文认分层不假装已经听到声音。五、后端核心实现5.1 创建通话锁、落库、推邀请同好友对、同群必须串行。锁内再查活跃通话避免两个窗口同时点视频。publicImRtcCallDOcreateCall(LonguserId,ImRtcCallCreateReqVOreqVO){validateEnabled();validateCreateCall(userId,reqVO);if(ImConversationTypeEnum.isGroup(reqVO.getConversationType())){returnrtcCallLockRedisDAO.lockGroup(reqVO.getGroupId(),()-createGroupCall(userId,reqVO));}LongpeerUserIdCollUtil.getFirst(reqVO.getInviteeIds());returnrtcCallLockRedisDAO.lockPrivate(userId,peerUserId,()-createPrivateCall(userId,reqVO,peerUserId));}锁内主体写主表参与表再推 1601群聊再写 1610。room 用 UUID同时当 LiveKit 房间名。ImRtcCallDOcallnewImRtcCallDO().setRoom(room).setConversationType(reqVO.getConversationType()).setMediaType(reqVO.getMediaType()).setInviterUserId(inviterId).setStatus(ImRtcCallStatusEnum.CREATED.getStatus()).setStartTime(now);rtcCallMapper.insert(call);// 发起人即时 JOINED被邀请人 INVITINGpushCallInviteNotification(call,inviterUser,inviteeId,invitee,invitees);pushCallStartNotification(call,inviterUser,invitees);私聊对方已在另一通话当场end(BUSY)主叫看到「对方正忙」不要空等振铃超时。5.2 Token只给还活着的房间响应 VO 在 create / accept / join 里带livekitUrl和token。ENDED 把 token 置空前端据此提示「通话已结束」。.setLivekitUrl(imProperties.getRtc().getLivekitUrl()).setToken(ended?null:rtcCallService.signCallToken(userId,call.getRoom()))签发时 video claim 锁死房间roomJoin、canPublish、canSubscribe。TTL 读配置小时数。同 identity 重连会踢前一个连接正好满足「一端接了另一端掉线」。5.3 移动端平台开关比提示文案重要functionsupportsRtc(){// #ifdef H5 || APP-PLUSreturntrue// #endif// #ifndef H5 || APP-PLUSreturnfalse// #endif}小程序编译进 stub按钮不出现。不要在运行时 toast「暂不支持」却仍画出绿色通话键。发起、接听、加入都做 single-flight弱网连点不会开两个房间。六、几个容易做错的点浮层必须是全局的。绑在会话页人切到通讯录就接不到。PC 容器和移动端独立通话页都认同一套 store。历史要落库。重进会话应能看见「通话 3 分 20 秒」或「已拒绝」。只推 1601 不写 1611刷新后气泡消失。超时有两道。前端 RUNNING 端定时打no-answer-call-check后端还有参与者超时 Job。只靠前端被叫杀进程后主叫会一直响。Webhook 是兜底不是主路径。正常挂断走 leave / cancel。房间被媒体侧关掉再靠签名校验后的事件把主表推到 ENDED。局域网地址。配置里的 LiveKit URL 若写成127.0.0.1手机打不开。换成当前 hostname和考勤围栏的「本机 IP」不是同一件事。七、数据结构im_rtc_callid、room、会话类型、媒体类型、发起人、群 id私聊空、状态、结束原因、发起 / 接通 / 结束时间。im_rtc_participantid、callId、room、userId、角色发起 / 被邀 / 中途加入、状态、邀请 / 接听 / 离开时间。不要把 SDP、Track、音量存进这两张表。媒体状态在房间里业务表只回答「这通还在不在、谁该响、为什么结束」。Redis 锁键按私聊双方或群 id。锁粒度不要落到「全站一把通话锁」否则两个不相干的部门会互相排队。八、技术亮点设计要点实现方式价值媒体与信令拆开LiveKit 自有状态机业务仓库不扛编解码1601 只推参与方WebSocket 通知群里其他人不受来电打扰群 START / END1610 / 1611 入消息流会话预览和历史灰气泡忙线锁Redis 同好友 / 同群不会并发出两通Token 跟房间走JWT video claim越权进房被房间名拦住浮层全局/im/home根容器通讯录也能接一端接听同 identity 互踢信令收敛PC 与手机不抢麦小程序 stub编译期关闭不假装全端都通超时双通道前端探活 Job杀进程也能 NO_ANSWERWebhook 兜底验签后关房媒体侧异常可收敛轻聊无按钮/oa/im不进 RTC审批找人不会弹摄像头语音条分开输入框 ≠ 资料卡按住说话不是实时通话九、快速体验在线演示https://ruoyioffice.com/web/账号 admin / admin123登录后打开全功能 IM/im/home。点开一个好友资料卡确认有「语音聊天 / 视频聊天」。另开一个浏览器或手机 H5用被叫账号登录停在通讯录或会话页。主叫点语音。被叫应看到来电浮层而不是必须回到那条会话。接听后看控制条静音、摄像头、挂断。挂断后回会话灰气泡应有结束原因。再进/oa/im轻聊确认没有这对通话按钮。群会话若有人在打看胶囊条和 START 灰气泡。手机 H5 本机一般是http://localhost:9000/通话页路由/pages-im/home/conversation/rtc/call/index。演示站 LiveKit 若不通仍按上面核对浮层和按钮不要用「没声音」否定信令。源码仓库GitHubhttps://github.com/yuqing2026/ruoyi-office GitCodehttps://gitcode.com/zhouzhongyan/ruoyi-office Giteehttps://gitee.com/yqzy1688/ruoyi-office十、结语企业音视频的难度不在画面能不能动而在「谁该响、谁能进房、结束后会话里留下什么」。RuoYi Office 把媒体丢给 LiveKit自己只做状态机、Token、1601 来电和 1610 / 1611 历史。资料卡拨打、全局浮层、通话中控制条是用户能点到的三层轻聊不带通话是给只想问一句油费的客户留的门。读者能带走的三句按钮认资料卡不认输入框麦克风信令认参与方不广播全群小程序可以没有通话不要假装有。你们现在催审批是切微信还是系统里能直接打评论区对照一下轻聊和全功能 IM比空泛「上了即时通讯」有用。相关阅读同目录轻聊讲单聊群聊发图发文件IM 总览只点到通话。那些文章不替代本页的房间和浮层。想要体验 RuoYi Office 的强大功能在线演示https://ruoyioffice.com/web/账号 admin / admin123源码仓库GitHubhttps://github.com/yuqing2026/ruoyi-office GitCodehttps://gitcode.com/zhouzhongyan/ruoyi-office Giteehttps://gitee.com/yqzy1688/ruoyi-office技术咨询添加微信17156169080备注「RuoYi Office」⭐如果觉得不错请给个 Star 支持一下

SpringBoot3+UniApp+LiveKit 企业音视频通话：资料卡拨打、来电浮层、通话中控制怎么落地

相关推荐

STM32 MPU6050数据处理：从原始噪声到稳定姿态的滤波实战

水面漂浮垃圾数据集进行目标检测识别11类河道漂浮数据集中的玻璃垃圾泡沫塑料碎片垃圾金属垃圾 PET塑料瓶垃圾其他塑料垃圾

GitHub周报：前端基本功回暖与AI落地实战拆解

更多资讯

煤矿输送带异物检测数据集解析与YOLO训练实战

携程景点与评论数据爬虫实战：Python实现与反爬应对详解

Fan Control 风扇控制软件教程：调好 3 个参数，风扇安静还不烫

MicroPython Signal类：GPIO跨板卡电平极性统一方案

AI Agent 搜索 MCP 升级路径：从工具组合到基建体系

内链外链怎么搭？实战型SEO链接优化体系全解析

今日更新

能源系统对接碳交易的路径：从碳核算到碳资产运营

智能硬件数据驱动运营：订单日记与预测性维护实践

逆变器下垂控制与虚拟同步机对比：Simulink仿真建模与参数整定

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？