简介这是一套基于 WebRTC 实现的轻量级视频会议应用完整源码面向计算机相关专业学生如计科、人工智能、物联网、通信等及初入前端/音视频开发领域的学习者解决实时音视频通信基础功能集成与项目落地实践问题适用于课程设计、毕业设计原型开发或技术验证场景。压缩包共94个文件以48个JavaScript核心逻辑文件为主辅以7个Vue组件、4个HTML入口页、6个JSON配置与5个Markdown说明文档涵盖从信令服务AppRTC-node-server、前端路由与状态管理到UI资源PNG/SVG的完整结构整体仅299KB便于快速导入与本地调试。目前已有48人学习下载资源经实测可正常运行包含详细的中文README说明、开发环境配置指南及多环境构建脚本webpack.dev/prod.conf.js等读者可直接复现双端视频通话、媒体流控制与基础信令交互全流程并深入理解WebRTC在真实项目中的模块组织方式与工程化实践要点。1. 这不是一个“能跑就行”的 WebRTC Demo而是一套可调试、可拆解、可嵌入真实项目的视频会议最小可行架构很多同学拿到 WebRTC 视频会议源码第一反应是 npm install npm run dev —— 页面弹出来两个标签页互相看到对方就以为“成了”。但真正卡住的从来不是“能不能连”而是“为什么连不上”“为什么只有音频没视频”“为什么在 Chrome 里正常Edge 里黑屏”“怎么加个屏幕共享按钮”“如何把这堆逻辑塞进我自己的 Vue 管理后台里”。这个rtc-demo项目不是玩具它用 Vue 2 Node.jsAppRTC-node-server双端协同完整实现了信令交换、SDP 协商、ICE 候选收集与交换、媒体流绑定、本地预览与远端渲染等核心链路。所有关键路径都做了日志打点如console.log([RTC] offer created)错误分支有明确 fallback比如oniceconnectionstatechange切到failed时触发重连提示且服务端不依赖任何云厂商 SDK纯原生 WebSocket Express 实现信令中转。它适合两类人一类是课程作业/毕设需要快速验证 WebRTC 端到端流程的同学另一类是已有 Vue 项目想低成本集成实时音视频能力的前端工程师——你不需要重写整个 UI只要理解app.js中RTCPeerConnection的生命周期钩子和src/components/VideoView.vue的流绑定方式就能抽离出可复用的useWebRTC组合式函数。2. 从信令服务器启动到本地媒体流获取Vue 前端与 Node 后端的协作边界必须厘清WebRTC 的本质是 P2P但 P2P 前必须完成“破冰”双方要知道彼此的网络地址ICE Candidate、媒体能力SDP Offer/Answer。这个“破冰”过程不能靠浏览器自己完成必须由一个第三方服务即信令服务器中转消息。本项目中bin/www是 Express 启动入口routes/index.js定义了/join和/room两个基础路由而真正的信令通道由app.js中的io.on(connection)处理。注意它没有使用 Socket.IO 的房间自动管理而是手动维护rooms对象每个房间存储当前连接的 socket ID 列表。这种设计看似原始却极大降低了调试复杂度——你可以在console.log(room, roomId, has, rooms[roomId].length, peers)直接看到房间状态而不是被 Socket.IO 的抽象层遮蔽。2.1 启动并验证信令服务确保 WebSocket 可达是后续一切的前提项目根目录下执行cd rtc-demo npm install npm start提示npm start实际调用node ./bin/www监听3000端口。若端口被占用需修改bin/www第 18 行port normalizePort(process.env.PORT || 3000);。启动后访问http://localhost:3000应返回Express server running on port 3000而非 404。此时打开浏览器开发者工具 Network 标签页过滤ws新建标签页访问http://localhost:3000/room/test应能看到WebSocket connection to ws://localhost:3000/socket.io/?EIO4transportwebsocket成功建立。若显示Failed to load resource说明 Express 未正确挂载 Socket.IO 中间件——检查app.js第 35 行是否为const io require(socket.io)(server);且第 42 行io.on(connection, ...)是否在server.listen()之后。2.2 Vue 前端媒体初始化getUserMedia 的权限、约束与降级策略src/App.vue的mounted()钩子中调用了initLocalStream()其核心是navigator.mediaDevices.getUserMedia({ video: true, audio: true })。但生产环境必须处理三类失败场景权限拒绝用户点击“拒绝”catch中触发this.$message.error(请允许摄像头和麦克风访问)设备不可用无摄像头then后需检查stream.getVideoTracks().length 0此时应禁用视频按钮并提示“检测到无可用视频设备”HTTPS 强制要求getUserMedia在非 HTTPS 或localhost外的 HTTP 页面会被浏览器直接拒绝。本项目package.json中dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js启动的是http://localhost:8080符合要求但若部署到 Nginx必须配置 SSL否则getUserMedia抛出NotAllowedError。// src/utils.js 中 extractMediaConstraints 函数 export function extractMediaConstraints (options) { const constraints {} if (options.video) { constraints.video typeof options.video object ? options.video // 允许传入 { width: { ideal: 1280 }, height: { ideal: 720 } } : true } if (options.audio) { constraints.audio typeof options.audio object ? options.audio // 如 { echoCancellation: true, noiseSuppression: true } : true } return constraints }参数说明video: { width: { ideal: 1280 } }表示“理想宽度为 1280px”浏览器会尽力满足但不保证audio: { echoCancellation: true }启用回声消除对会议质量至关重要若不设置多人会议时易出现啸叫。该函数被app.js中getLocalStream()调用是约束参数统一入口。2.3 信令交互协议设计为什么用 JSON 而不用二进制字段命名如何避免歧义app.js中定义了 5 种信令消息类型join,leave,offer,answer,candidate。所有消息均为 JSON 格式结构高度扁平{ type: offer, roomId: test, sdp: v0\r\no- 123456789 2 IN IP4 127.0.0.1... }注意sdp字段值是原始 SDP 字符串未做 Base64 编码。这是刻意为之——便于调试时直接在控制台console.log(msg.sdp)查看媒体行mvideo 1234 RTP/AVP 120也方便用sdp-transform库解析修改如动态禁用 H.264强制 VP8。若项目需传输大 candidate如 IPv6 地址才考虑 Base64。字段名全部小写下划线room_id会被视为错误与 WebSocket 消息规范一致避免 Vue 组件中msg.roomId与后端room_id不匹配导致 join 失败。3. SDP 协商与 ICE 连接理解 offer/answer 流程中的状态机与超时控制WebRTC 连接建立不是原子操作而是跨越多个异步事件的状态跃迁。本项目将RTCPeerConnection实例挂载在 Vue 实例上this.pc new RTCPeerConnection(config)并通过pc.oniceconnectionstatechange、pc.onsignalingstatechange等事件驱动 UI 状态更新。关键在于必须等待pc.signalingState stable才能发送下一个 offer否则 Chrome 会抛出InvalidStateError。项目在app.js的createOffer()方法中加入了显式判断if (this.pc.signalingState ! stable) { console.warn([RTC] Cannot create offer: signalingState is, this.pc.signalingState) return }逻辑说明signalingState有stable/have-local-offer/have-remote-offer/have-local-pranswer/have-remote-pranswer/closed六种状态。当 A 发送 offer 后A 的状态变为have-local-offerB 收到后调用setRemoteDescription(offer)B 的状态变为have-remote-offer此时 B 才能安全调用createAnswer()。若忽略此检查连续点击“开始会议”按钮会导致状态错乱连接永远无法建立。3.1 ICE 候选收集的时机与去重为什么onicecandidate可能触发多次RTCPeerConnection在收集到一个 ICE 候选如candidate:1234567890 1 udp 2122260223 192.168.1.100 54321 typ host generation 0时触发onicecandidate事件。本项目在app.js的setupPeerConnection()中注册该事件this.pc.onicecandidate (event) { if (event.candidate) { // 发送给信令服务器由其广播给房间内其他成员 this.socket.emit(candidate, { roomId: this.roomId, candidate: event.candidate }) } }参数说明event.candidate是RTCIceCandidate对象candidate属性是字符串。注意if (event.candidate)判断——当候选收集结束时event.candidate为null此时不应发送空消息。项目未实现候选去重因 WebRTC 栈自身已保证同一 candidate 不会重复触发。但若网络抖动导致信令服务器重复投递远端需在pc.addIceCandidate()前校验candidate是否已存在可通过pc.getConfiguration().iceServers中的urls判断是否为同一 STUN/TURN 服务器生成。3.2 STUN/TURN 服务器配置为什么默认只配 STUN何时必须引入 TURNbuild/webpack.base.conf.js中const pcConfig { iceServers: [{ urls: stun:stun.l.google.com:19302 }] }仅配置了 Google 公共 STUN 服务器。STUN 用于获取公网 IP 和端口但无法穿透对称型 NAT企业防火墙常见。此时必须部署 TURN 服务器如 Coturn并在iceServers中追加{ urls: turn:your-turn-server.com:3478, username: user, credential: pass }验证方法在 Chrome 访问chrome://webrtc-internals发起一次连接后点击GetUserMedia下的getStats()筛选candidate-pair类型观察state字段。若长期为checking或failed且localCandidateType为relay而非host或srflx说明 STUN 失败需 TURN。本项目未内置 TURN因 Coturn 部署复杂度高但pcConfig已预留扩展点——只需修改build/webpack.base.conf.js并重新打包无需改业务逻辑。3.3 远端流绑定与自动播放video标签的autoplay为何有时失效src/components/VideoView.vue中远端视频通过:srcObjectremoteStream绑定video refremoteVideo :srcObjectremoteStream autoplay muted playsinline classvideo-remote /注意autoplay失效的主因是浏览器策略——若页面无用户手势如 clickvideo的autoplay会被静音阻止。本项目在app.js的addRemoteStream()中显式调用video.play()if (this.$refs.remoteVideo) { this.$refs.remoteVideo.srcObject stream this.$nextTick(() { this.$refs.remoteVideo.play().catch(e { console.error([Video] Auto play failed:, e) // 触发用户点击提示 this.showPlayHint true }) }) }playsinline属性确保 iOS Safari 在页面内播放而非全屏muted是绕过自动播放限制的必要条件即使远端是纯视频流也需加muted。this.$nextTick()确保 DOM 更新后再调用play()避免srcObject未生效导致play()报错。4. 将 WebRTC 逻辑解耦为 Vue Composition API从 Options API 到useWebRTC的重构路径Vue 2 项目虽未原生支持 Composition API但可通过vue/composition-api插件引入。本项目src/utils.js已预留useWebRTC函数骨架其目标是将app.js中的RTCPeerConnection管理、信令收发、流绑定等逻辑封装为可复用的 Hook。重构不是为了炫技而是解决三个实际问题多组件复用当前App.vue承担全部逻辑若需在MeetingRoom.vue和ScreenShare.vue中分别管理不同连接代码将严重重复测试友好Options API 的this上下文难以单元测试而useWebRTC返回纯函数可直接 Jest Mocknavigator.mediaDevices状态隔离多个会议实例需独立的pc实例和信令通道Composition API 天然支持闭包隔离。4.1useWebRTC的核心接口设计暴露哪些方法隐藏哪些细节// src/composables/useWebRTC.js export function useWebRTC (roomId, socket) { const localStream ref(null) const remoteStream ref(null) const pc ref(null) const isConnecting ref(false) const init async () { localStream.value await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) } const createOffer async () { if (!pc.value) throw new Error(PeerConnection not initialized) const offer await pc.value.createOffer() await pc.value.setLocalDescription(offer) socket.emit(offer, { roomId, sdp: offer.sdp }) } const addRemoteStream (stream) { remoteStream.value stream } return { localStream, remoteStream, isConnecting, init, createOffer, addRemoteStream } }关键设计点socket作为参数注入而非在 Hook 内部import socket from /utils/socket确保不同业务模块可传入各自配置的 Socket 实例如带 token 认证的io(wss://api.example.com, { auth: { token } })。addRemoteStream不直接操作 DOM而是更新ref由组件通过v-bind:srcObjectremoteStream响应式绑定符合 Vue 数据驱动思想。4.2 在现有组件中迁移三步完成App.vue的轻量化改造第一步安装插件若未安装npm install vue/composition-api在src/main.js顶部添加import VueCompositionAPI from vue/composition-api Vue.use(VueCompositionAPI)第二步在App.vue中替换逻辑script import { useWebRTC } from /composables/useWebRTC import io from socket.io-client export default { name: App, setup() { const socket io(http://localhost:3000) const { localStream, remoteStream, init, createOffer } useWebRTC(test, socket) const handleStart async () { await init() createOffer() } return { localStream, remoteStream, handleStart } } } /script第三步同步更新模板!-- 移除原 video 的 :srcObjectlocalStream -- video :srcObjectlocalStream autoplay muted playsinline / video :srcObjectremoteStream autoplay muted playsinline / button clickhandleStart开始会议/button优势App.vue的script部分代码量减少 60%所有 WebRTC 逻辑集中在useWebRTC.js后续新增屏幕共享只需在 Hook 中扩展createScreenShareOffer()方法不影响 UI 组件。5. 排查连接失败的五大必查项从信令日志到 Chrome WebRTC Internals 的逐层定位法当两个标签页无法建立视频连接不要急于重装依赖或怀疑源码有 bug。按以下顺序逐层验证90% 的问题可在 5 分钟内定位5.1 信令层确认 offer/answer/candidate 消息是否完整到达在app.js的socket.on(offer)、socket.on(answer)、socket.on(candidate)回调开头添加日志socket.on(offer, (msg) { console.log([SIGNAL] Received OFFER for room, msg.roomId, from, socket.id) // 原有逻辑... })同时在 Chrome 开发者工具 Console 中筛选SIGNAL观察A 标签页点击“开始”后是否打印[SIGNAL] Received OFFER...B 标签页加入同一房间后是否收到该 offerB 发送 answer 后A 是否收到若某条消息缺失说明信令服务器未正确广播——检查rooms[roomId]数组是否包含双方 socket IDio.to(roomId).emit()是否被调用。5.2 SDP 层用sdp-transform解析 offer确认编解码器是否协商成功将app.js中收到的msg.sdp字符串复制到 https://sdp-parser.netlify.app/ 在线解析。重点关注mvideo行后的artpmap:字段如artpmap:120 VP8/90000确认双方均支持 VP8Chrome 默认或 H.264Safari 默认asendrecv表示双向音视频若为asendonly则远端无法接收aextmap:中的http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01表示启用网络拥塞控制若缺失可能影响弱网表现。5.3 ICE 层在chrome://webrtc-internals中查看 candidate-pair 状态打开该页面找到当前RTCPeerConnection实例点击右侧getStats()。筛选candidate-pair观察state字段succeeded表示连接成功failed表示失败nominated字段true表示该 candidate pair 已被选中localCandidateType与remoteCandidateType若均为host说明局域网直连若一方为relay说明经过 TURN若长期为checking可能是防火墙阻断 UDP。5.4 媒体层检查getStats()中的inbound-rtp流量筛选inbound-rtp观察bytesReceived是否随时间增长。若为 0说明远端未发送媒体流——检查远端pc.addStream(localStream)是否被调用或pc.createOffer({ offerToReceiveVideo: true })是否设置了接收视频。5.5 Vue 层确认srcObject绑定是否触发在VideoView.vue的watch中添加watch(() props.srcObject, (newVal) { console.log([VIDEO] srcObject updated to, newVal?.id || null) }, { immediate: true })若日志中newVal为null说明remoteStream未正确赋值——回溯app.js中pc.onaddstream或pc.ontrack是否被触发以及addRemoteStream()是否被调用。最后技巧在app.js的pc.oniceconnectionstatechange中当pc.iceConnectionState disconnected时主动调用pc.restartIce()重试候选收集比完全重建RTCPeerConnection更轻量。本项目未实现此逻辑但你可在useWebRTC.js的createOffer()后追加pc.oniceconnectionstatechange () { if (pc.iceConnectionState disconnected) { setTimeout(() pc.restartIce(), 1000) } }本文还有配套的精品资源点击获取
Vue2+Node WebRTC视频会议最小可行架构
简介这是一套基于 WebRTC 实现的轻量级视频会议应用完整源码面向计算机相关专业学生如计科、人工智能、物联网、通信等及初入前端/音视频开发领域的学习者解决实时音视频通信基础功能集成与项目落地实践问题适用于课程设计、毕业设计原型开发或技术验证场景。压缩包共94个文件以48个JavaScript核心逻辑文件为主辅以7个Vue组件、4个HTML入口页、6个JSON配置与5个Markdown说明文档涵盖从信令服务AppRTC-node-server、前端路由与状态管理到UI资源PNG/SVG的完整结构整体仅299KB便于快速导入与本地调试。目前已有48人学习下载资源经实测可正常运行包含详细的中文README说明、开发环境配置指南及多环境构建脚本webpack.dev/prod.conf.js等读者可直接复现双端视频通话、媒体流控制与基础信令交互全流程并深入理解WebRTC在真实项目中的模块组织方式与工程化实践要点。1. 这不是一个“能跑就行”的 WebRTC Demo而是一套可调试、可拆解、可嵌入真实项目的视频会议最小可行架构很多同学拿到 WebRTC 视频会议源码第一反应是 npm install npm run dev —— 页面弹出来两个标签页互相看到对方就以为“成了”。但真正卡住的从来不是“能不能连”而是“为什么连不上”“为什么只有音频没视频”“为什么在 Chrome 里正常Edge 里黑屏”“怎么加个屏幕共享按钮”“如何把这堆逻辑塞进我自己的 Vue 管理后台里”。这个rtc-demo项目不是玩具它用 Vue 2 Node.jsAppRTC-node-server双端协同完整实现了信令交换、SDP 协商、ICE 候选收集与交换、媒体流绑定、本地预览与远端渲染等核心链路。所有关键路径都做了日志打点如console.log([RTC] offer created)错误分支有明确 fallback比如oniceconnectionstatechange切到failed时触发重连提示且服务端不依赖任何云厂商 SDK纯原生 WebSocket Express 实现信令中转。它适合两类人一类是课程作业/毕设需要快速验证 WebRTC 端到端流程的同学另一类是已有 Vue 项目想低成本集成实时音视频能力的前端工程师——你不需要重写整个 UI只要理解app.js中RTCPeerConnection的生命周期钩子和src/components/VideoView.vue的流绑定方式就能抽离出可复用的useWebRTC组合式函数。2. 从信令服务器启动到本地媒体流获取Vue 前端与 Node 后端的协作边界必须厘清WebRTC 的本质是 P2P但 P2P 前必须完成“破冰”双方要知道彼此的网络地址ICE Candidate、媒体能力SDP Offer/Answer。这个“破冰”过程不能靠浏览器自己完成必须由一个第三方服务即信令服务器中转消息。本项目中bin/www是 Express 启动入口routes/index.js定义了/join和/room两个基础路由而真正的信令通道由app.js中的io.on(connection)处理。注意它没有使用 Socket.IO 的房间自动管理而是手动维护rooms对象每个房间存储当前连接的 socket ID 列表。这种设计看似原始却极大降低了调试复杂度——你可以在console.log(room, roomId, has, rooms[roomId].length, peers)直接看到房间状态而不是被 Socket.IO 的抽象层遮蔽。2.1 启动并验证信令服务确保 WebSocket 可达是后续一切的前提项目根目录下执行cd rtc-demo npm install npm start提示npm start实际调用node ./bin/www监听3000端口。若端口被占用需修改bin/www第 18 行port normalizePort(process.env.PORT || 3000);。启动后访问http://localhost:3000应返回Express server running on port 3000而非 404。此时打开浏览器开发者工具 Network 标签页过滤ws新建标签页访问http://localhost:3000/room/test应能看到WebSocket connection to ws://localhost:3000/socket.io/?EIO4transportwebsocket成功建立。若显示Failed to load resource说明 Express 未正确挂载 Socket.IO 中间件——检查app.js第 35 行是否为const io require(socket.io)(server);且第 42 行io.on(connection, ...)是否在server.listen()之后。2.2 Vue 前端媒体初始化getUserMedia 的权限、约束与降级策略src/App.vue的mounted()钩子中调用了initLocalStream()其核心是navigator.mediaDevices.getUserMedia({ video: true, audio: true })。但生产环境必须处理三类失败场景权限拒绝用户点击“拒绝”catch中触发this.$message.error(请允许摄像头和麦克风访问)设备不可用无摄像头then后需检查stream.getVideoTracks().length 0此时应禁用视频按钮并提示“检测到无可用视频设备”HTTPS 强制要求getUserMedia在非 HTTPS 或localhost外的 HTTP 页面会被浏览器直接拒绝。本项目package.json中dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js启动的是http://localhost:8080符合要求但若部署到 Nginx必须配置 SSL否则getUserMedia抛出NotAllowedError。// src/utils.js 中 extractMediaConstraints 函数 export function extractMediaConstraints (options) { const constraints {} if (options.video) { constraints.video typeof options.video object ? options.video // 允许传入 { width: { ideal: 1280 }, height: { ideal: 720 } } : true } if (options.audio) { constraints.audio typeof options.audio object ? options.audio // 如 { echoCancellation: true, noiseSuppression: true } : true } return constraints }参数说明video: { width: { ideal: 1280 } }表示“理想宽度为 1280px”浏览器会尽力满足但不保证audio: { echoCancellation: true }启用回声消除对会议质量至关重要若不设置多人会议时易出现啸叫。该函数被app.js中getLocalStream()调用是约束参数统一入口。2.3 信令交互协议设计为什么用 JSON 而不用二进制字段命名如何避免歧义app.js中定义了 5 种信令消息类型join,leave,offer,answer,candidate。所有消息均为 JSON 格式结构高度扁平{ type: offer, roomId: test, sdp: v0\r\no- 123456789 2 IN IP4 127.0.0.1... }注意sdp字段值是原始 SDP 字符串未做 Base64 编码。这是刻意为之——便于调试时直接在控制台console.log(msg.sdp)查看媒体行mvideo 1234 RTP/AVP 120也方便用sdp-transform库解析修改如动态禁用 H.264强制 VP8。若项目需传输大 candidate如 IPv6 地址才考虑 Base64。字段名全部小写下划线room_id会被视为错误与 WebSocket 消息规范一致避免 Vue 组件中msg.roomId与后端room_id不匹配导致 join 失败。3. SDP 协商与 ICE 连接理解 offer/answer 流程中的状态机与超时控制WebRTC 连接建立不是原子操作而是跨越多个异步事件的状态跃迁。本项目将RTCPeerConnection实例挂载在 Vue 实例上this.pc new RTCPeerConnection(config)并通过pc.oniceconnectionstatechange、pc.onsignalingstatechange等事件驱动 UI 状态更新。关键在于必须等待pc.signalingState stable才能发送下一个 offer否则 Chrome 会抛出InvalidStateError。项目在app.js的createOffer()方法中加入了显式判断if (this.pc.signalingState ! stable) { console.warn([RTC] Cannot create offer: signalingState is, this.pc.signalingState) return }逻辑说明signalingState有stable/have-local-offer/have-remote-offer/have-local-pranswer/have-remote-pranswer/closed六种状态。当 A 发送 offer 后A 的状态变为have-local-offerB 收到后调用setRemoteDescription(offer)B 的状态变为have-remote-offer此时 B 才能安全调用createAnswer()。若忽略此检查连续点击“开始会议”按钮会导致状态错乱连接永远无法建立。3.1 ICE 候选收集的时机与去重为什么onicecandidate可能触发多次RTCPeerConnection在收集到一个 ICE 候选如candidate:1234567890 1 udp 2122260223 192.168.1.100 54321 typ host generation 0时触发onicecandidate事件。本项目在app.js的setupPeerConnection()中注册该事件this.pc.onicecandidate (event) { if (event.candidate) { // 发送给信令服务器由其广播给房间内其他成员 this.socket.emit(candidate, { roomId: this.roomId, candidate: event.candidate }) } }参数说明event.candidate是RTCIceCandidate对象candidate属性是字符串。注意if (event.candidate)判断——当候选收集结束时event.candidate为null此时不应发送空消息。项目未实现候选去重因 WebRTC 栈自身已保证同一 candidate 不会重复触发。但若网络抖动导致信令服务器重复投递远端需在pc.addIceCandidate()前校验candidate是否已存在可通过pc.getConfiguration().iceServers中的urls判断是否为同一 STUN/TURN 服务器生成。3.2 STUN/TURN 服务器配置为什么默认只配 STUN何时必须引入 TURNbuild/webpack.base.conf.js中const pcConfig { iceServers: [{ urls: stun:stun.l.google.com:19302 }] }仅配置了 Google 公共 STUN 服务器。STUN 用于获取公网 IP 和端口但无法穿透对称型 NAT企业防火墙常见。此时必须部署 TURN 服务器如 Coturn并在iceServers中追加{ urls: turn:your-turn-server.com:3478, username: user, credential: pass }验证方法在 Chrome 访问chrome://webrtc-internals发起一次连接后点击GetUserMedia下的getStats()筛选candidate-pair类型观察state字段。若长期为checking或failed且localCandidateType为relay而非host或srflx说明 STUN 失败需 TURN。本项目未内置 TURN因 Coturn 部署复杂度高但pcConfig已预留扩展点——只需修改build/webpack.base.conf.js并重新打包无需改业务逻辑。3.3 远端流绑定与自动播放video标签的autoplay为何有时失效src/components/VideoView.vue中远端视频通过:srcObjectremoteStream绑定video refremoteVideo :srcObjectremoteStream autoplay muted playsinline classvideo-remote /注意autoplay失效的主因是浏览器策略——若页面无用户手势如 clickvideo的autoplay会被静音阻止。本项目在app.js的addRemoteStream()中显式调用video.play()if (this.$refs.remoteVideo) { this.$refs.remoteVideo.srcObject stream this.$nextTick(() { this.$refs.remoteVideo.play().catch(e { console.error([Video] Auto play failed:, e) // 触发用户点击提示 this.showPlayHint true }) }) }playsinline属性确保 iOS Safari 在页面内播放而非全屏muted是绕过自动播放限制的必要条件即使远端是纯视频流也需加muted。this.$nextTick()确保 DOM 更新后再调用play()避免srcObject未生效导致play()报错。4. 将 WebRTC 逻辑解耦为 Vue Composition API从 Options API 到useWebRTC的重构路径Vue 2 项目虽未原生支持 Composition API但可通过vue/composition-api插件引入。本项目src/utils.js已预留useWebRTC函数骨架其目标是将app.js中的RTCPeerConnection管理、信令收发、流绑定等逻辑封装为可复用的 Hook。重构不是为了炫技而是解决三个实际问题多组件复用当前App.vue承担全部逻辑若需在MeetingRoom.vue和ScreenShare.vue中分别管理不同连接代码将严重重复测试友好Options API 的this上下文难以单元测试而useWebRTC返回纯函数可直接 Jest Mocknavigator.mediaDevices状态隔离多个会议实例需独立的pc实例和信令通道Composition API 天然支持闭包隔离。4.1useWebRTC的核心接口设计暴露哪些方法隐藏哪些细节// src/composables/useWebRTC.js export function useWebRTC (roomId, socket) { const localStream ref(null) const remoteStream ref(null) const pc ref(null) const isConnecting ref(false) const init async () { localStream.value await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) } const createOffer async () { if (!pc.value) throw new Error(PeerConnection not initialized) const offer await pc.value.createOffer() await pc.value.setLocalDescription(offer) socket.emit(offer, { roomId, sdp: offer.sdp }) } const addRemoteStream (stream) { remoteStream.value stream } return { localStream, remoteStream, isConnecting, init, createOffer, addRemoteStream } }关键设计点socket作为参数注入而非在 Hook 内部import socket from /utils/socket确保不同业务模块可传入各自配置的 Socket 实例如带 token 认证的io(wss://api.example.com, { auth: { token } })。addRemoteStream不直接操作 DOM而是更新ref由组件通过v-bind:srcObjectremoteStream响应式绑定符合 Vue 数据驱动思想。4.2 在现有组件中迁移三步完成App.vue的轻量化改造第一步安装插件若未安装npm install vue/composition-api在src/main.js顶部添加import VueCompositionAPI from vue/composition-api Vue.use(VueCompositionAPI)第二步在App.vue中替换逻辑script import { useWebRTC } from /composables/useWebRTC import io from socket.io-client export default { name: App, setup() { const socket io(http://localhost:3000) const { localStream, remoteStream, init, createOffer } useWebRTC(test, socket) const handleStart async () { await init() createOffer() } return { localStream, remoteStream, handleStart } } } /script第三步同步更新模板!-- 移除原 video 的 :srcObjectlocalStream -- video :srcObjectlocalStream autoplay muted playsinline / video :srcObjectremoteStream autoplay muted playsinline / button clickhandleStart开始会议/button优势App.vue的script部分代码量减少 60%所有 WebRTC 逻辑集中在useWebRTC.js后续新增屏幕共享只需在 Hook 中扩展createScreenShareOffer()方法不影响 UI 组件。5. 排查连接失败的五大必查项从信令日志到 Chrome WebRTC Internals 的逐层定位法当两个标签页无法建立视频连接不要急于重装依赖或怀疑源码有 bug。按以下顺序逐层验证90% 的问题可在 5 分钟内定位5.1 信令层确认 offer/answer/candidate 消息是否完整到达在app.js的socket.on(offer)、socket.on(answer)、socket.on(candidate)回调开头添加日志socket.on(offer, (msg) { console.log([SIGNAL] Received OFFER for room, msg.roomId, from, socket.id) // 原有逻辑... })同时在 Chrome 开发者工具 Console 中筛选SIGNAL观察A 标签页点击“开始”后是否打印[SIGNAL] Received OFFER...B 标签页加入同一房间后是否收到该 offerB 发送 answer 后A 是否收到若某条消息缺失说明信令服务器未正确广播——检查rooms[roomId]数组是否包含双方 socket IDio.to(roomId).emit()是否被调用。5.2 SDP 层用sdp-transform解析 offer确认编解码器是否协商成功将app.js中收到的msg.sdp字符串复制到 https://sdp-parser.netlify.app/ 在线解析。重点关注mvideo行后的artpmap:字段如artpmap:120 VP8/90000确认双方均支持 VP8Chrome 默认或 H.264Safari 默认asendrecv表示双向音视频若为asendonly则远端无法接收aextmap:中的http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01表示启用网络拥塞控制若缺失可能影响弱网表现。5.3 ICE 层在chrome://webrtc-internals中查看 candidate-pair 状态打开该页面找到当前RTCPeerConnection实例点击右侧getStats()。筛选candidate-pair观察state字段succeeded表示连接成功failed表示失败nominated字段true表示该 candidate pair 已被选中localCandidateType与remoteCandidateType若均为host说明局域网直连若一方为relay说明经过 TURN若长期为checking可能是防火墙阻断 UDP。5.4 媒体层检查getStats()中的inbound-rtp流量筛选inbound-rtp观察bytesReceived是否随时间增长。若为 0说明远端未发送媒体流——检查远端pc.addStream(localStream)是否被调用或pc.createOffer({ offerToReceiveVideo: true })是否设置了接收视频。5.5 Vue 层确认srcObject绑定是否触发在VideoView.vue的watch中添加watch(() props.srcObject, (newVal) { console.log([VIDEO] srcObject updated to, newVal?.id || null) }, { immediate: true })若日志中newVal为null说明remoteStream未正确赋值——回溯app.js中pc.onaddstream或pc.ontrack是否被触发以及addRemoteStream()是否被调用。最后技巧在app.js的pc.oniceconnectionstatechange中当pc.iceConnectionState disconnected时主动调用pc.restartIce()重试候选收集比完全重建RTCPeerConnection更轻量。本项目未实现此逻辑但你可在useWebRTC.js的createOffer()后追加pc.oniceconnectionstatechange () { if (pc.iceConnectionState disconnected) { setTimeout(() pc.restartIce(), 1000) } }本文还有配套的精品资源点击获取
