iPhone14系列iOS16 Safari环境下WebRTC呼叫outbound音频消失求助

这个问题在iOS16的iPhone14系列Safari环境下确实存在，核心触发点是Web Audio API的AudioContext()与WebRTC麦克风流的交互冲突，导致本地音频无法正常传输。以下是经过验证的修复方案和workaround：

1. 延迟AudioContext初始化至用户交互后 #

iOS Safari对音频上下文有严格的用户交互触发要求，若在页面加载时自动初始化AudioContext，会导致麦克风流无法正确绑定。必须在用户点击、触摸等手势事件内完成初始化：

// 绑定到呼叫启动按钮的点击事件
document.querySelector('#start-call-btn').addEventListener('click', async () => {
  // 初始化AudioContext（兼容webkit前缀）
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  
  // 获取麦克风媒体流
  const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  
  // 创建媒体流源节点并连接到音频上下文输出
  const sourceNode = audioCtx.createMediaStreamSource(mediaStream);
  sourceNode.connect(audioCtx.destination);
  
  // 后续将媒体流添加到RTCPeerConnection
  const peerConnection = new RTCPeerConnection();
  mediaStream.getTracks().forEach(track => peerConnection.addTrack(track, mediaStream));
  
  // 继续WebRTC呼叫流程...
});

2. 移除不必要的AudioContext环节 #

如果你的业务逻辑不需要对麦克风音频做Web Audio处理，直接将原始MediaStream传给RTCPeerConnection，完全跳过AudioContext，可以直接规避问题：

async function startCall() {
  // 直接获取麦克风流
  const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  
  // 初始化WebRTC连接并添加音频轨道
  const peerConnection = new RTCPeerConnection();
  mediaStream.getAudioTracks().forEach(track => {
    peerConnection.addTrack(track, mediaStream);
  });
  
  // 后续信令交互、创建offer等逻辑...
}

3. 确保AudioContext处于running状态 #

若必须使用AudioContext，需检查其状态，若为suspended则调用resume()，且该操作必须在用户交互上下文内执行：

async function initAudioContext() {
  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  
  // 恢复暂停的音频上下文
  if (audioCtx.state === 'suspended') {
    await audioCtx.resume();
  }
  
  return audioCtx;
}

// 在用户点击事件中调用
document.querySelector('#init-audio-btn').addEventListener('click', async () => {
  const audioCtx = await initAudioContext();
  // 后续音频处理逻辑...
});

另外，iOS16.0~16.2版本存在该问题，iOS16.3及以上部分设备已修复，但为了兼容全版本iOS16，建议优先采用上述方案。

内容的提问来源于stack exchange，提问作者user55270