wanglei/EchoChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
263 Commits 1 Branch 0 Tags
96fca438f469beb53a92a051b72d7e97f9cde7be
Commit Graph

9 Commits

Author SHA1 Message Date
duoaohui
96fca438f4 视频连线 2026-05-28 10:15:07 +08:00
duoaohui
a3f19c6245 视频连线 2026-05-27 15:04:50 +08:00
duoaohui
db7ea0b44a 视频连线 2026-05-27 14:38:55 +08:00
duoaohui
ac8ec4c903 视频会议保存 2026-05-18 19:42:55 +08:00
bujinyuan
790996feaf feat(meeting): Task 15 UI 打磨 + 主持人四件套 + 媒体层稳定性回归修复 
- Task 15 UI：6 项原创特色（说话者流光 / 柔性网格 / 自视频浮窗 / 静音氛围色 / 入会滑入 / NetworkBadge 3 条波浪）+ 说话者双源探测（RTP audioLevel + WebAudio RMS）+ 主持人四件套（静音/开麦/转让/踢出）
- 新增 SelfVideoFloat 浮窗组件 + 4 份 design-system 页面文档（home / preview / room / invite）
- 媒体回归补丁（手工联调触发）：
  * 后端 signal_service 在 OnRoomJoin 追加 pushExistingRoomState → 向新加入者补发历史 producers + 历史成员 audio/video 状态
  * 新增 Redis Hash memberStateKey 持久化成员 audio/video enabled，OnMemberStateChanged 落盘、cleanupUserResources 清理
  * 前端 _broadcastSelfState 在本地音视频开关末尾同步 state.changed；_afterJoined 先 getRoom 再 room.join 修复后入者成员状态时序；_onMemberStateChanged 占位兜底
  * _cleanupRemoteProducer 改为按 producerId 精准清理（修复 "关音频误关视频"）
  * _onRoomEnded + createAndEnter/joinAndEnter 强化 reset（修复重入会看不到自己画面）
  * mediasoup-client ensureSend/RecvTransport 引入 in-flight Promise 锁防并发重复建连
- 文档同步：CURRENT_STATUS.md / Task 15 plan / phase2e-2 implementation plan

Made-with: Cursor
 2026-04-23 16:04:46 +08:00
bujinyuan
cacf4ae074 fix(meeting): 提升 toolbar z-index 确保成员/邀请面板开启时仍可点击 
MemberPanel 和 InviteDialog 的 .panel-root 使用了 position:fixed; inset:0;
z-index:200 的全屏遮罩，当面板打开时会覆盖整个视口，包括底部 toolbar。
这导致：
- 用户再次点击 toolbar 的"成员"/"邀请"按钮时，命中的是 mask 而非按钮
- mask 的 @click.self 虽然也会关闭面板（通过点击空白区域），
  但与 toolbar 按钮 toggle 的用户预期行为不一致

修复：把 MeetingToolbar .toolbar 的 z-index 从 15 提升到 210，
确保其高于 .panel-root (z:200) 而低于 .leave-mask (z:220)。

验证：Playwright 实测点击成员按钮 hitSelf=true，打开后再次点击正常关闭。

Made-with: Cursor
 2026-04-22 16:39:41 +08:00
bujinyuan
3aa8174bc0 fix(meeting): 抹除 uni-button ::after 遮罩修复工具栏点击失效 
uni-app H5 会给每个 <button> 编译后的 <uni-button> 自动注入一个
::after 伪元素作为点击态反馈遮罩，其 inset 为 0 -1200px -80px 0
（即 2400px × 160px），向按钮右侧扩展 1200px，下方扩展 80px。

这导致会议工具栏（MeetingToolbar）里每个按钮的 ::after 都横跨整个
toolbar，最后一个"离开"按钮 DOM 顺序最上，其 ::after 覆盖了所有
兄弟按钮的命中区域：点击"静音/视频/邀请/成员/聊天"时实际都命中
"离开"按钮的 ::after，触发离开弹窗；且弹窗中的"取消"按钮同样被
右侧"结束会议"按钮的 ::after 遮挡，点击取消反而会触发结束会议。

修复：在 .btn 和 .leave-btn 上显式设置 ::after { content: none;
display: none }，并把按钮设为 position: relative 固化堆叠上下文。

验证：Playwright 真实点击各按钮 hitSelf=true，取消按钮不再
错误触发结束会议逻辑。

Made-with: Cursor
 2026-04-22 16:27:16 +08:00
bujinyuan
ff46dc5f76 fix(phase2e-2): 视频 HD 分辨率 + toolbar 防溢出 + 聊天按钮 toggle 
问题
1. 进入会议后视频比预览页更"近、更糊"
   · 预览 / startLocalVideo 均固定 640x480，mediasoup 视频轨清晰度偏低
   · 进房后 videoTile cover 裁切在大画布更明显 → 观感"放大"
2. 会议内聊天 / 邀请 / 成员按钮"点击无反应"
   · 核心：.body flex 子内容过高时 toolbar 未固定收缩，被挤出视口
     下方 (y > vh)，用户点击位置在屏幕外
   · 次要：openChat 仅 set true，已打开状态下再次点击无视觉反馈
3. 聊天按钮无法关闭面板：只有面板内 × 按钮能关

修复
- store/meeting.js startLocalVideo + preview.vue getUserMedia 统一
  改为 ideal 1280x720 + frameRate ideal 24 / max 30，浏览器在设备不
  支持时自动降级；进房与预览视觉表现一致
- components/meeting/MeetingToolbar.vue .toolbar 加 flex-shrink:0
  + position:relative + z-index:15，保证 toolbar 永远贴底不被 body
  压缩，且点击层级高于 ChatPanel 背景
- pages/meeting/room.vue .top-bar 加 flex-shrink:0，避免 body 溢出
  时顶栏压缩引发整体错位
- pages/meeting/room.vue openChat 改 toggle：已打开则关闭，未打开则
  展开并 markChatsRead，交互更符合直觉

验证（Playwright 1024x576）
- 预览 getVideoTracks()[0].getSettings() → 1280x720 / 24fps ✓
- 进房后 localVideo settings 同样 1280x720 ✓
- 聊天按钮 boundingRect y=505 bottom=567 ≤ vh 576，inViewport=true ✓
- 点击聊天 → chat-col.open=true 宽度 320.5px；再点击 → open=false ✓
- 截图 room-hd-chat-open.png：视频清晰、聊天面板展开、toolbar 贴底

Made-with: Cursor
 2026-04-22 16:13:25 +08:00
bujinyuan
59f824ad27 feat(phase2e-2): 会议室主页与核心 UI 组件落地（Task 11） 
新增页面：
- pages/meeting/room.vue：会议主容器，组装 VideoGrid/Toolbar/MemberPanel/InviteDialog
  * 顶部条：标题/会议号/复制、连接状态 pill、网络徽标、计时器
  * 主区：按成员数自适应网格渲染 VideoTile
  * 底部：麦/摄/邀请/成员/聊天/挂断工具条
  * 离会确认弹窗：主持人可选"结束会议 / 仅自己离开"
  * onUnload 兜底调用 leave 避免脏状态残留

新增组件（components/meeting/）：
- VideoTile.vue：原生 video/audio 挂载（H5）+ 名字/静音/主持人/说话者边框
- VideoGrid.vue：1/2/3-4/5-9/10+ 响应式 CSS Grid 布局
- MeetingToolbar.vue：6 按钮工具条，loading 态 + 徽标
- MemberPanel.vue：右侧滑入抽屉，主持人可转让/踢出
- InviteDialog.vue：居中弹窗，一键复制会议号/链接/邀请文案
- NetworkBadge.vue：4 格信号柱，level 0-4 分色

配套改动：
- preview.vue：入会成功后跳 /pages/meeting/room?code=xxx（原先指向 debug）
- pages.json：注册 room 路由，navigationStyle=custom 隐藏默认导航
- store/meeting.js：remoteConsumers 外层 slot 解除 markRaw，使
  slot.audio/slot.video 赋值能驱动 VideoTile 响应式重渲染

验证：Playwright E2E 完成 create → preview → room 全链路
- 视频块、会议号、连接状态、计时器、工具条渲染正确
- 邀请弹窗、成员抽屉、静音切换、离会确认均工作正常

Made-with: Cursor
 2026-04-22 14:41:27 +08:00