17370845950

WebRTC是基于JavaScript的浏览器端实时音视频通信标准，通过MediaDevices、RTCPeerConnection和RTCDataChannel三大API实现P2P音视频通话与数据传输，需信令服务器交换SDP和ICE候选以建立连接。

WebRTC（Web Real-Time Communication）是一套开源的浏览器端实时音视频通信技术标准，JavaScript 是实现它的主要编程语言。它不需要插件或安装额外软件，直接在现代浏览器中通过 JavaScript API 实现点对点（P2P）的音视频通话、数据传输。

WebRTC 的核心能力

WebRTC 提供三类关键 API：

• MediaDevices.getUserMedia()：获取本地摄像头和麦克风流（MediaStream）
• RTCPeerConnection：建立并管理 P2P 连接，处理音视频编解码、NAT 穿透、加密传输等底层逻辑
• RTCDataChannel：在已建立的连接上发送任意二进制或文本数据（如聊天消息、文件片段）

实现视频通话的关键步骤

一次基本的双人视频通话需双方协作完成信令交换与连接协商，JavaScript 主要负责以下环节：

• 调用 navigator.mediaDevices.getUserMedia({video: true, audio: true}) 获取本地媒体流，并显示在页面 元素中
• 创建 RTCPeerConnection 实例，添加本地流：pc.addTrack(track, stream)
• 生成初始 Offer（发起方）或 Answer（应答方），通过信令服务器（如 WebSocket）交换 SDP 描述和 ICE 候选地址
• 监听远程流事件：pc.ontrack 触发时，将收到的 event.streams[0] 绑定到对方的 标签
• 监听 ICE 连接状态：pc.oniceconnectionstatechange 判断是否成功连通

为什么需要信令服务器？

WebRTC 本身不负责发现对方或传递连接参数（SDP 和 ICE candidates），这些必须由开发者自行实现信令机制。常见做法是用 Node.js + WebSocket 搭建轻量信令服务，让两个客户端通过房间 ID 加入同一通道，互相转发 Offer/Answer 和候选地址。没有信令，两端无法“知道彼此在哪”，也就无法建立 P2P 连接。

实际开发中的注意事项

真实项目中不能只靠浏览器原生 API 完全跑通：

• 需处理不同浏览器的兼容写法（如旧版 Chrome 用 webkitGetUserMedia）
• 移动端需注意自动播放策略：多数浏览器要求用户手势触发 play()，否则静音或失败
• 网络不稳定时，可监听 pc.onicecandidate 动态收集 ICE 候选，并通过信令逐条发送（而非等全部生成完再发）
• 为支持多人通话或跨网络环境，常引入 SFU（Selective Forwarding Unit）服务器（如 Mediasoup、Janus）来中转媒体流

不复杂但容易忽略。核心是理解“获取流 → 建连接 → 传信令 → 绑定画面”这条主线，其余都是围绕它做健壮性补充。