React "Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'."

user_12944935 0
Viewed 2093

I want to write a small Audio Recording Website with ReactJS, but I alway get this error:

Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'.

Here's a part of the code I've written:

var [recording, setRecording] = useState(false);
var audiochunks = [];
var mrecorder;

navigator.mediaDevices.getUserMedia({audio:true}).then(stream => {

        mrecorder = new MediaRecorder(stream);
        mrecorder.addEventListener("dataavailable", event => {

            audiochunks.push(event.data);

        });

    })

function toggle_recording(){ setRecording(!recording); handle_record() }

function handle_record(){

        if(recording){
            mrecorder.stop();
        }
        else{
            mrecorder.start();
        }

    }

/**JSX Part of App.js component*/
return(

    <section>

         <button onclick=toggle_recording/>

    </section>

)

The buton toggles the recording state true or false and starts or stops the MediaRecorder.
Is it possible that the error comes up because I first declined the variable and initialized it in the getUserMedia function?
I hope you can hep me!

Thanks in advice,
Disembleergon

reactjs javascript
1 Answers

I believe that the MediaRecorder will throw an error when you try to stop the recording when the recorder is already in an inactive state. One thing you can do is to short circuit your stop action if mediaRecorder is already in an inactive state.

const stopRecording = () => {
  if (mediaRecorder.state === 'inactive') return
  mediaRecorder.stop()
}

By looking at your code, however, what I think could be the issue is that your mrecorder is a var. You should store it in useState so that when the re-render occurs on your component that your original mrecorder does not get wiped.

user_82739590
Related