WebRTC 协议与实时音视频实践（AI 入门版）

WebRTC 是什么

WebRTC 是浏览器原生支持的实时音视频通信技术。
简单说，它让两个终端尽量直接建立媒体通道，实现低延迟语音/视频/数据传输。

在 AI 场景里，WebRTC 常用于：

实时语音助手（边说边识别边回复）
实时面试陪练（语音 + 视频分析）
低延迟远程协作（共享流 + AI 辅助总结）

WebRTC 三个核心概念

SDP（会话描述）：双方告诉对方“我支持什么编解码、端口等”
ICE Candidate（候选网络路径）：尝试找到可达网络路径
STUN/TURN：
- STUN：帮助发现公网地址
- TURN：直连失败时中继转发（成本更高）

最小通信流程

注意：WebRTC 本身不负责“信令交换”，你需要自己提供一个信令通道（常用 WebSocket）。

前端最小示例代码

const pc = new RTCPeerConnection({
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
});

// 1) 获取本地麦克风/摄像头
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
stream.getTracks().forEach((track) => pc.addTrack(track, stream));

// 2) 监听远端流
pc.ontrack = (ev) => {
  const remoteStream = ev.streams[0];
  const remoteVideo = document.getElementById("remote") as HTMLVideoElement;
  remoteVideo.srcObject = remoteStream;
};

// 3) 创建 offer 并发给信令服务
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
sendSignal({ type: "offer", sdp: offer.sdp });

// 4) 处理远端 answer
onSignal(async (msg) => {
  if (msg.type === "answer") {
    await pc.setRemoteDescription({ type: "answer", sdp: msg.sdp });
  }
  if (msg.type === "candidate") {
    await pc.addIceCandidate(msg.candidate);
  }
});

// 5) 上报本端 candidate
pc.onicecandidate = (ev) => {
  if (ev.candidate) sendSignal({ type: "candidate", candidate: ev.candidate });
};

与 AI 结合的常见模式

模式 1：音频分流
WebRTC 负责通话，旁路把音频片段送 ASR/LLM/TTS 管线
模式 2：DataChannel 指令通道
用 DataChannel 传递结构化控制信息（如字幕、提示、情绪标签）
模式 3：服务端媒体中转
服务端接流后做 AI 推理，再回传增强结果
模式 4：直连语音大模型（2026 主流）
浏览器用 WebRTC 直接和 OpenAI Realtime API / Gemini Live 这类端到端语音模型建立连接，实现低延迟、可打断的语音对话（见下节）。

与 OpenAI Realtime API 结合：走 WebRTC

端到端语音模型（见实时语音与视觉输入）推荐用 WebRTC 接入：WebRTC 自带音频编解码、抖动缓冲、回声消除，比自己用 WebSocket 推 PCM 体验好得多。

关键工程点 —— 绝不能把 API Key 放前端，用临时密钥（ephemeral token）：

要点：

音频走媒体轨（pc.ontrack 拿到模型语音并播放），控制/事件走 DataChannel（文本转写、function calling、VAD 事件、打断信号）。
临时密钥由服务端用真实 Key 换取、短时有效，前端只拿到临时密钥；用户鉴权、限流、计费仍在你的服务端把关。
打断（barge-in）：用户开口时，服务端模型会发出“停止当前播放”的事件，前端要能即时停掉正在播放的音频。

常见问题与排查

本地能连，公网失败：通常是 NAT 问题，需要 TURN
有声音无画面：检查视频轨道和自动播放策略
首次连接慢：观察 ICE 收集与信令延迟
断续卡顿：检查编码码率与网络抖动，必要时降分辨率

目录​

WebRTC 是什么​

WebRTC 三个核心概念​

最小通信流程​

前端最小示例代码​

与 AI 结合的常见模式​

与 OpenAI Realtime API 结合：走 WebRTC​

常见问题与排查​

目录