学术培训手术远程示教(S) 院内/跨区域手术示教需要多路术中画面并发观看、低延迟互动和会中板书与留痕仅用单路视频会议难以区分多信号源也缺少白板、截图与本地录制闭环。(T) 负责学术培训入口到会中的前端主流程与核心交互发起/加入、多路音视频、协作与录制留痕。(A) 搭建「发起 / 加入」双入口发起侧采集手术名称、术者、单位背景图上传至文件服务并与会务标签拼接落库加入侧四位培训码并调接口校验会场有效性。会场内以 WebRTC 推流/拉流维护「参与者—多子画面」模型主屏侧栏 / 宫格双布局自适应多路画面WebSocket 广播白板开关与笔迹历史、多路显隐与设备侧事件MediaRecorder 支持整场录屏与单路录制主/子画面截图断连侧做推流重连与 DOM 就绪后轮询拉流避免 video 未挂载即拉流。(R) 无效培训码在进入会场前即被拦截会务与背景受控如标签总长 ≤500 字、单图 ≤10MB减少脏数据单场可稳定支持主持侧多路摄像头与屏幕共享并存、学员侧多画面同步观看并在同一会话内完成白板同步 录屏/截图的示教留痕闭环。难点技术挑战多路音视频与状态一致一个人多摄像头、共享屏幕本质是「一个用户对应多个featureCode/多路流」。难点在DOM 里多个video与推流/拉流实例一一对应、DOM 异步渲染导致拉流要等元素就绪你们代码里有多轮重试、断线重连后要恢复绑定而不重复建连或泄漏。WebRTC 推流在非理想网络下的体验推流失败、ICE 断开要感知并做有限重连多路并发推流时差分设备、编码参数清晰度/码率和浏览器兼容性属于典型前端音视频工程问题。复杂 UI 与会中协作状态同步白板开关、笔触历史、多路画面的显隐、远程静音等通过自定义 WebSocket 消息驱动。难点是本地 UI 要立即反馈远端又要和消息顺序/重复处理好避免出现「我看了白板对别人没同步」或竞态。录制与截图的工程边界单场录屏、MediaRecorder单路录制、主屏与子画面截图都依赖「手头拿到的是真正的MediaStream还是占位 URL」能力检测MIME/MP4、分片 Blob 拼装、出错与断流时要自动停录避免坏文件——这些都要前端兜底。布局与性能的取舍侧边栏布局 vs 宫格布局参与者与子画面数量变化时要重算格子尺寸、监听列表深度变化video多实例同时跑对内存和编码压力都敏感。亮点你可展示的「我做了什么」把「会场模型」想清楚再做 UI参与者 children[]多路子画面、每路绑定featureCode、推流/拉流/本地预览三层数据同步——说明你能驾驭状态比页面复杂的 B 端音视频产品。端到端的业务拼装发起培训时手术信息 可选背景图上传统一拼meetingLabel进入会场后在导航栏结构化展示培训码可复制——体现表单、上传与会话链路整体设计而不只是写一个列表页。差异化能力白板 标注 多形态录制截图不是纯「视频通话」而是示教场景板书同步、画面截取、单场/单路录制这是医疗培训场景里的产品亮点也说明你接触过画布/实时协作外围的前端配合。工程健壮性有意识例如预览用FileReader、推拉流绑定用data-feature-code避免 id 前缀问题、推流相关重试与错误提示——面试里用一两句点出「我在音视频项目里更关注资源释放、重连和边界态。」若面试官追问「举一个你印象最深的问题」可答同一用户多路流 Vue 异步更新导致拉流早于 DOM。做法是用稳定的选择器/find、限制重试、推流成功后再次syncStreamToData保证绑定到对的video必要时说明你还处理过断开重连。具体实现细节可按你简历真实参与度调整别把没做过的说成自己做的。收口一句话自我介绍里用「学术培训这个模块对我主要是多端多路 WebRTC、复杂会场状态和多形态录制截图合在一起的前端音视频工程亮点在于示教场景下的协作与留痕难点在于流与 DOM、以及协同消息的一致性。」************************************************************** JD 就是答案 — 企业已经告诉你他要什么人了 每投一个岗位简历都该微调 — 不要一份简历投所有公司✅ JD 要求的技能简历里一定要有呼应 — HR 筛选靠关键词匹配❌ JD 没提的技术不要占太多篇幅 — 写了也不加分 读懂 隐含要求 — 有大型项目经验 体现项目复杂度