背景痛点：为什么Web语音聊天这么难？

最近想给项目加个实时语音功能，结果发现坑比想象中多得多。光是让两个浏览器直接通话（P2P），就要面对三大拦路虎：

• 浏览器兼容性：iOS Safari的WebRTC实现和Chrome差异巨大，getUserMedia权限弹窗经常莫名失败
• 音频质量问题：回声消除(AEC)处理不好会有啸叫，移动端设备还可能遇到自动增益控制(AGC)失调
• 性能消耗：持续录音让手机发烫，Chrome后台标签页会限制WebRTC流量

技术选型：MediaRecorder还是WebRTC？

刚开始我尝试用MediaRecorder API录制成Blob再传输，但实测发现两个致命问题：

1. 延迟太高：需要等待录音结束才能发送，根本不能实时对话
2. 格式混乱：不同浏览器生成的音频格式五花八门（Chrome用webm，Safari用mp4）

转用WebRTC方案后，优势立刻显现：

• 原生支持实时流传输：通过RTCPeerConnection直接传输MediaStream
• 自动适应网络状况：内置STUN/TURN服务器穿越NAT
• 编解码统一：默认使用Opus编码，各端可以协商参数

核心实现：从麦克风到扬声器的完整链路

1. 建立P2P连接（含TypeScript类型）

// 初始化PeerConnection
const pc = new RTCPeerConnection({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { 
      urls: 'turn:your-turn-server.com',
      username: 'client',
      credential: 'password'
    }
  ]
}) as RTCPeerConnection;

// ICE候选收集
pc.onicecandidate = (event: RTCPeerConnectionIceEvent) => {
  if (event.candidate) {
    // 通过信令服务器发送给对端
    signalingChannel.send({
      type: 'ice-candidate',
      candidate: event.candidate
    });
  }
};

2. 语音识别与合成

// 语音识别（需要用户授权）
const recognition = new webkitSpeechRecognition(); // 注意浏览器前缀
recognition.lang = 'zh-CN';
recognition.onresult = (event: SpeechRecognitionEvent) => {
  const transcript = event.results[0][0].transcript;
  console.log('识别结果:', transcript);
};

// 语音合成
const utterance = new SpeechSynthesisUtterance('你好世界');
speechSynthesis.speak(utterance);

性能优化实战技巧

Opus编解码调参

通过SDP协商修改编码参数，显著提升语音清晰度：

// 创建Offer时添加编码约束
pc.createOffer({
  offerToReceiveAudio: true,
  voiceActivityDetection: false  // 关闭静音检测减少延迟
}).then(offer => {
  return pc.setLocalDescription(offer);
});

Web Workers分流处理

把音频处理放到Worker线程，防止主线程卡顿：

// worker.js
self.onmessage = (e) => {
  const audioData = e.data;
  // 在这里进行音频分析/降噪处理
  postMessage(processedData);
};

避坑血泪史

1. Safari权限问题：
2. 必须在用户交互事件（如click）中触发getUserMedia

3. 需要https环境（本地开发可用localhost）

4. 动态码率调整：

   // 根据网络状况调整带宽
   pc.getStats().then(stats => {
     const packetsLost = stats.get('packetsLost');
     if (packetsLost > 5) {
       pc.setParameters({
         encodings: [{ 
           active: true,
           maxBitrate: 128000 // 降低码率
         }]
       });
     }
   });

未来扩展方向

这个基础方案还能进一步升级：

• 集成WebAssembly实现的RNNoise降噪算法
• 添加PWA离线支持，允许中断后恢复会话
• 结合WebAudio API实现实时变声效果

最后提醒：测试时一定要准备多台不同设备，我在真机上遇到的奇葩问题比模拟器多10倍！建议先用Adapter.js处理兼容性问题，等核心功能跑通再考虑优化。