Chrome中使用无StreamSource的AudioDestination时MediaRecorder异常问题

问题场景与方案描述 #

开发简易录屏应用时，需实现录制开始后再激活麦克风的功能，采用的实现方案如下：

• 创建未连接StreamSource的AudioDestinationNode，将其音频轨道加入待录制的MediaStream
• 启动MediaRecorder开始录制
• 后续操作中再将麦克风源连接到AudioDestinationNode

浏览器兼容性差异 #

• Firefox：该方案可正常工作，能完整录制全程视频，且麦克风激活后音频会被正常追加到录制内容中
• Chrome v116.0.5845.187：存在两处异常：
  • 若启动MediaRecorder时AudioDestinationNode未连接任何源，视频录制不完整（例如设置10秒录制，最终仅保存几秒内容）
  • 中途激活麦克风后，仅能录制麦克风激活后的部分内容，之前的视频部分丢失或不完整
• 补充：若提前将麦克风源连接到AudioDestinationNode再启动MediaRecorder，Chrome可正常完成录制

可行解决方案 #

方案1：预获取麦克风并初始静音 #

提前获取麦克风轨道并加入录制流，但设置为静音状态，录制过程中再取消静音，避免MediaRecorder启动时无有效音频轨道的情况：

// 提前请求麦克风权限并获取轨道
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
const micTrack = micStream.getAudioTracks()[0];
micTrack.enabled = false; // 初始静音，不采集音频

// 组合屏幕轨道与麦克风轨道到录制流
const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recordStream = new MediaStream([...screenStream.getVideoTracks(), micTrack]);

// 初始化并启动录制
const recorder = new MediaRecorder(recordStream);
recorder.start();

// 录制过程中激活麦克风的方法
function enableMic() {
  micTrack.enabled = true;
}

方案2：使用音频混合器替代AudioDestinationNode #

通过AudioContext创建音频混合器，提前将麦克风源接入混合器并静音，录制开始后再解除静音，确保MediaRecorder始终有有效音频轨道输入。

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