移动端Safari接收对等端Incoming MediaStream播放后短时间中断问题

问题根因 #

以下是移动端Safari播放入站WebRTC音频流时出现该现象的几个典型诱因，和你观测到的状态无异常的特征完全匹配：

• 音频静默检测逻辑误触发：移动端Safari内置了针对MediaStream的低音量/静默自动停止渲染机制，如果入站流初始阶段存在RTP包抖动、采样率不稳定导致的短暂静默，会被判定为无有效音频内容主动终止播放，且该终止操作不会修改MediaStream.active、Audio.paused等公开状态属性，外部无法直接通过状态判断。
• 音频编码格式不兼容：如果对等端发送的音频编码参数不符合Safari硬解码要求（比如自定义OPUS采样率、非标准G.711变种），Safari只会播放初始缓冲的几百毫秒数据，后续解码失败但不会抛出可捕获的错误，表现为播放一秒后无声音输出。
• 用户授权上下文丢失：Safari的音频播放授权是和单次play()调用绑定的，不是首次交互触发后永久生效，如果复用同一个Audio对象替换srcObject后没有重新调用play()，会丢失之前的授权上下文导致播放中断。

可行解决方案 #

1. 绕过Safari静默检测机制 #

通过添加空处理的AudioWorklet节点，规避Safari的静默音频判定逻辑，注意AudioContext必须在用户交互事件（点击、触摸等）的回调中初始化：

// 全局AudioContext初始化，必须绑定用户交互事件
let audioContext;
document.addEventListener('touchstart', async () => {
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    // 加载旁路用的AudioWorklet
    await audioContext.audioWorklet.addModule('silence-bypass.js');
  }
});

// 入站流处理逻辑
function handleIncomingMediaStream(stream) {
  const audioEl = new Audio();
  audioEl.srcObject = stream;
  audioEl.volume = 1; // 禁止设置为0，避免触发静默判定
  // 接入旁路Worklet
  const source = audioContext.createMediaStreamSource(stream);
  const bypassNode = new AudioWorkletNode(audioContext, 'silence-bypass-processor');
  source.connect(bypassNode);
  bypassNode.connect(audioContext.destination);
  audioEl.play().catch(err => console.error('播放错误: ', err));
}

其中silence-bypass.js的实现仅需要原样透传音频数据：

class SilenceBypassProcessor extends AudioWorkletProcessor {
  process(inputs, outputs) {
    const input = inputs[0];
    const output = outputs[0];
    for (let i = 0; i < input.length; i++) {
      output[i].set(input[i]);
    }
    return true;
  }
}
registerProcessor('silence-bypass-processor', SilenceBypassProcessor);

2. 强制协商兼容的音频编码 #

在WebRTC协商阶段修改SDP，强制将Safari支持的OPUS编码设置为最高优先级，过滤不兼容的编码格式：

peerConnection.onnegotiationneeded = async () => {
  const offer = await peerConnection.createOffer();
  // 调整SDP编码优先级
  const modifiedSDP = offer.sdp
    .replace(/(m=audio.*\r\n)/, '$1a=fmtp:111 minptime=10;useinbandfec=1\r\n')
    .replace(/a=rtpmap:(\d+) (?!opus|telephone-event)/g, 'a=rtpmap:$1 telephone-event');
  await peerConnection.setLocalDescription({
    type: 'offer',
    sdp: modifiedSDP
  });
  // 后续发送offer逻辑
};

3. 每次更新流后主动触发播放 #

不要复用Audio对象的播放状态，每次替换srcObject后都主动调用play()，如果担心重复触发可以先调用pause()再重新播放。

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