火狐浏览器标签页闲置后navigator.getMediaStream无法录制音频问题

问题根因 #

火狐浏览器内置了闲置标签页功耗优化策略，当标签页进入后台/闲置状态超过阈值后，会主动暂停非活跃的MediaStream轨道采样、挂起音频上下文来降低资源占用，直接导致音频录制断流无声音。

可行解决方案 #

• 方案1：媒体轨道定时保活
  拿到音频轨道后，定时调用applyConstraints()方法触发轨道保持活跃状态，不需要修改原有约束参数即可避开火狐的闲置判定，参考代码：

  // 已获取的音频流轨道：audioTrack
  const trackKeepAliveTimer = setInterval(() => {
    if (audioTrack.readyState === 'live') {
      // 复用原有约束触发轨道保活
      audioTrack.applyConstraints(audioTrack.getConstraints())
        .catch(e => console.warn('音频轨道保活失败', e))
    } else {
      clearInterval(trackKeepAliveTimer)
    }
  }, 20 * 1000) // 20秒触发一次，可按需调整间隔
  

• 方案2：自动恢复挂起的音频上下文
  如果录制流程中用到了AudioContext处理音频，需要监听上下文状态变更，一旦被系统挂起立即恢复：

  // 已创建的音频上下文实例：audioCtx
  audioCtx.addEventListener('statechange', () => {
    if (audioCtx.state === 'suspended') {
      audioCtx.resume()
    }
  })
  

• 方案3：规避媒体资源节流判定
  页面后台运行时循环播放一段音量为0的空白音频，让火狐判定页面仍在使用媒体资源，不会触发MediaStream相关的节流逻辑。

额外优化建议 #

你当前使用的navigator.getMediaStream是已废弃的非标准API，建议替换为标准的navigator.mediaDevices.getUserMedia，避免后续浏览器版本迭代出现更多兼容问题。

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