跳到主要内容

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

目录​

WebRTC 是什么​

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

在 AI 场景里，WebRTC 常用于：

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

WebRTC 三个核心概念​

  1. SDP（会话描述）：双方告诉对方“我支持什么编解码、端口等”
  2. ICE Candidate（候选网络路径）：尝试找到可达网络路径
  3. 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 推理，再回传增强结果

常见问题与排查​

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