WebRTC 是一种实现浏览器点对点实时音视频通信的标准。其架构、核心组件（RTCPeerConnection、RTCDataChannel）、媒体处理及网络穿透机制（ICE/STUN/TURN），并介绍端到端加密安全方案。适用于视频会议、在线教育等低延迟场景。
WebRTC（Web Real-Time Communication）是由 Google 主导、W3C 与 IETF 标准化的开源项目与浏览器 API，旨在让 Web 应用无需插件即可实现点对点（P2P）的实时音视频通信与数据传输。
WebRTC 的诞生源于 2011 年 Google 收购 GIPS（Global IP Solutions）公司，这是一家在音视频编解码和实时通信领域具有深厚技术积累的企业。Google 将 GIPS 的核心音视频引擎开源，并与 W3C（World Wide Web Consortium）和 IETF（Internet Engineering Task Force）合作推动标准化进程。2011 年 5 月，WebRTC 项目正式发布第一个公开版本。
典型应用场景
WebRTC 不是一个简单的单一协议实现，而是一个包含多层次的完整技术栈。它主要由以下核心组件构成：协议栈 + API 层 + 媒体引擎的综合体。
+--------------------------------------------------+
| Application (JavaScript / C++) |
+--------------------------------------------------+
| WebRTC API (PeerConnection, DataChannel) |
+--------------------------------------------------+
| Signaling | Media Engine | Networking |
| (外部) | (Audio/Video Codec)| (ICE/STUN/TURN)|
+--------------------------------------------------+
| DTLS | SRTP | SCTP |
+--------------------------------------------------+
| UDP / TCP |
+--------------------------------------------------+
RTCPeerConnection 是 WebRTC 的核心 API，负责管理端到端 (P2P) 连接的整个生命周期，包括媒体协商、连接建立、网络传输和质量监控等关键功能。
new RTCPeerConnection(configuration)，其中 configuration 包含 ICE 服务器配置等参数addTrack() 方法将本地媒体流添加到连接中createOffer() 生成 SDP OffercreateAnswer() 生成 SDP Answeronicecandidate 事件收集并交换网络候选地址SDP（Session Description Protocol）：
示例格式：
v=0 o=- 123456789 2 IN IP4 127.0.0.1 s=- t=0 0 m=video 9 UDP/TLS/RTP/SAVPF 96 a=rtpmap:96 VP8/90000
Offer/Answer 模型：
ICE Candidate：
在已建立的 PeerConnection 上，可创建可靠或不可靠的数据通道，用于传输任意数据（文本、文件、游戏指令等）。
| 特性 | RTCDataChannel | WebSocket |
|---|---|---|
| 协议 | SCTP over DTLS over UDP | TCP |
| 延迟 | 通常 <100ms | 通常 >200ms |
| 可靠性 | 可配置（可靠/部分可靠） | 仅可靠 |
| 有序性 | 可配置（有序/无序） | 仅有序 |
| 连接方式 | P2P | 客户端 - 服务器 |
参数：constraints 对象指定所需媒体类型和质量
{ audio: true, video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } } }
addTrack()/removeTrack()clone()getAudioTracks()/getVideoTracks()视频处理：
// 通过 Canvas 处理视频帧
const canvas = document.getElementById('videoCanvas');
const ctx = canvas.getContext('2d');
function processFrame() {
ctx.drawImage(videoElement, 0, 0);
// 应用图像滤镜等处理
requestAnimationFrame(processFrame);
}
直接播放：
const videoElement = document.getElementById('localVideo');
videoElement.srcObject = mediaStream;
WebRTC 的最大挑战是穿越 NAT 和防火墙。为此，它采用 ICE（Interactive Connectivity Establishment）框架：
ICE 工作流程
WebRTC 强制加密，无法关闭：
setIdentityProvider 集成 WebAuthn）
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online