多Web Audio源场景下echoCancellation回声消除功能失效问题

我开发了一款可同时播放多个Web Audio源并支持用户录音的应用。当物理输入设备（如摄像头麦克风）无法拾取物理输出设备（如耳机）的声音时，功能运行正常；但当输出声音串入输入（如使用笔记本扬声器搭配内置麦克风）时，录音会捕获到其他音频源的声音。

我了解echoCancellation约束应解决此类问题，但在多音频源场景下似乎无效。

以下是用于复现问题的本地代码：

复现步骤 #

1. 点击record按钮
2. 可发出声音或直接观察，“节拍器”会发出5次蜂鸣声
3. 2秒后，<audio>元素的源将被设置为录制的音频数据
4. 播放<audio>元素——你会听到“节拍器”的蜂鸣声。理论上，通过MediaStream设置的echoCancellation约束应消除该蜂鸣声，但实际未生效。

复现代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <body>
    <button onclick="init()">record</button>
    <audio id="audio" controls="true"></audio>
    <script src="demo.js"></script>
  </body>
</html>

demo.js #

let audioContext
let stream
async function init() {
  audioContext = new AudioContext()
  stream = await navigator.mediaDevices.getUserMedia({
    audio: {
      echoCancellation: true,
    },
    video: false,
  })

  playMetronome()

  record()
}

function playMetronome(i = 0) {
  if (i > 4) {
    return
  }

  const osc = new OscillatorNode(audioContext, {
    frequency: 440,
    type: 'sine',
  })
  osc.connect(audioContext.destination)
  osc.start()
  osc.stop(audioContext.currentTime + 0.1)

  setTimeout(() => {
    playMetronome(i + 1)
  }, 500)
}

function record() {
  const recorder = new MediaRecorder(stream)
  const data = []
  recorder.addEventListener('dataavailable', (e) => {
    console.log({ event: 'dataavailable', e })
    data.push(e.data)
  })
  recorder.addEventListener('stop', (e) => {
    console.log({ event: 'stop', e })
    const blob = new Blob(data, { type: 'audio/ogg; codecs=opus' })
    const audioURL = window.URL.createObjectURL(blob)
    document.getElementById('audio').src = audioURL
  })
  recorder.start()
  setTimeout(() => {
    recorder.stop()
  }, 2000)
}

内容的提问来源于Stack Exchange，提问作者Eric Dauenhauer