CODEWITHSUNDEEP
reactjsvideo-recordingweb-mediarecordermediadevices
Daniel Kalfa
Daniel Kalfa

Reputation: 78

Choppy sound on MediaRecorder when playing video along side the recording

I'm trying to build a website with React that let me record myself using MediaRecorder with another video running in the background, but when the other video volume is up the sound of the record is choppy and scrappy, when I turn the video volume down the sound of the record is good, at first I was thinking the problem happends when the sound of the other video is also recorded and disturbe the the actual record, but even when I'm using a microphone and headphones the problem seems to happend, I think its something in my code.

This is the function that init the recorder:

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)
  }

I've tried to change the mimeType to "video/mp4" and that didn't help.

I've upload my project to netlidy so you can see the problem: https://recorder-poc.netlify.app/

Upvotes: 0

Views: 308

Answers (1)

Daniel Kalfa
Daniel Kalfa

Reputation: 78

Turns out that by default the MediaRecorder has echo cancellation that will make problems to my recording and i was needed to add this to my constraints:

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

Upvotes: 0

Related Questions