Unity WebGL游戏无弹窗录制音频方案求助

问题背景 #

已实现通过canvas.captureStream()获取游戏画面的视频流，但无法同步录制音频。使用navigator.mediaDevices.getUserMedia()会触发浏览器授权弹窗，破坏游戏体验。现有页面全局WEBAudio对象，包含audioContext、audioInstances等属性，但直接尝试从这些对象获取音频流时，录制结果仅含视频无音频。

解决方案：路由WebAudio到MediaStreamDestination #

核心思路是利用Web Audio API的createMediaStreamDestination()方法，将游戏的音频输出同时路由到扬声器和录制目标，生成可用于录制的音频流，全程无需用户授权。

1. 创建音频录制目标 #

从已有的WEBAudio.audioContext创建MediaStreamDestination对象，该对象会生成可捕获的音频流：

// 创建音频流输出目标
const audioRecordDest = WEBAudio.audioContext.createMediaStreamDestination();

2. 路由所有音频源到录制目标 #

将游戏中所有活跃的音频实例（WEBAudio.audioInstances中的对象）的输出，同时连接到默认扬声器和录制目标，确保游戏声音正常播放的同时被捕获：

// 遍历所有音频实例，分流音频到录制目标
WEBAudio.audioInstances.forEach(audioInstance => {
  // 优先连接gain节点（多数Unity音频实例通过gain控制音量）
  if (audioInstance.gain) {
    // 保留原扬声器输出
    audioInstance.gain.connect(WEBAudio.audioContext.destination);
    // 分流到录制目标
    audioInstance.gain.connect(audioRecordDest);
  }
  // 处理直接使用缓冲源的情况
  else if (audioInstance.source) {
    audioInstance.source.connect(WEBAudio.audioContext.destination);
    audioInstance.source.connect(audioRecordDest);
  }
});

3. 合并视频流与音频流 #

将捕获的视频流和音频流合并为一个完整的媒体流，即可用于后续的视频录制：

// 获取Canvas视频流
const canvasStream = canvas.captureStream();
// 获取录制目标的音频流
const audioStream = audioRecordDest.stream;
// 合并流
const combinedStream = new MediaStream([
  ...canvasStream.getTracks(),
  ...audioStream.getTracks()
]);

关键注意事项 #

• 激活AudioContext：浏览器会自动挂起未交互的AudioContext，需在用户首次交互（如点击游戏开始按钮）时调用WEBAudio.audioContext.resume()，确保音频正常捕获。
• 动态音频实例处理：如果游戏会动态创建新的audioInstances，需在实例创建后自动执行上述连接逻辑，避免遗漏新生成的音频。
• 测试验证：可先单独录制audioStream确认能捕获声音，再合并视频流，排查问题更高效。

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