在录制过程中播放视频时，MediaRecorder 上的声音断断续续

Question

我正在尝试使用 React 建立一个网站，让我使用

MediaRecorder

录制自己的视频，并在后台运行另一个视频，但是当另一个视频音量调高时，录音的声音断断续续，杂乱无章，当我调低视频音量时，记录的声音很好，起初我以为问题发生在另一个视频的声音也被记录并干扰实际记录时，但即使当我使用麦克风和问题似乎发生了，我认为它在我的代码中。

这是初始化录音机的函数：

const initVideoStream = async () => {
    const stream = await navigator.mediaDevices.getUserMedia(constraints).then(async function (stream) {
      const options = {
        mimeType: 'audio/webm'

      }
      recorder.current = new MediaRecorder(stream, options)
      recorder.current.ondataavailable = e => {
        recordedChunks.current.push(e.data)
      }
      recorder.current.onstop = async e => {
        setisBlob(true)
        setVideoBlob(new Blob(recordedChunks.current, { 'type': 'video/mp4' }))
        const videoUrlObj = window.URL.createObjectURL(new Blob(recordedChunks.current, { 'type': 'video/mp4' }))
        recorderRef.current.src = videoUrlObj
        recordedChunks.current = []
      }
      return stream
    }).catch(function (error) {
      console.log(error);
      setErrorMsg('Cannot find any camera,please check if your camera is connected and try again')
      setIsPopupOpen(true)
    });
    recordedChunks.current = []


    setStream(stream)
  }

我尝试将

mimeType

更改为

"video/mp4"

但没有帮助。

我已将我的项目上传到 netlidy，以便您可以看到问题： https://recorder-poc.netlify.app/

Answer 1

事实证明，默认情况下 MediaRecorder 具有回声消除功能，这会给我的录音带来问题，我需要将其添加到我的约束中：

{
    echoCancellation: false,
    autoGainControl: false,
    noiseSuppression: false
}