React "Не удалось выполнить "stop" на "MediaRecorder": состояние MediaRecorder "неактивно". "

#javascript #reactjs

Вопрос:

Я хочу написать небольшой веб-сайт для записи звука с помощью ReactJS, но я всегда получаю эту ошибку:

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

Вот часть кода, который я написал:

 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>

)

Buton переключает состояние записи true или false и запускает или останавливает MediaRecorder.
Возможно ли, что ошибка возникает из-за того, что я сначала отклонил переменную и инициализировал ее в функции getUserMedia?
Я надеюсь, что вы можете меня услышать!

Спасибо за совет,
Disembleergon

1. Ваша проблема здесь в том, что вы пытаетесь работать вне цикла рендеринга React. При вызове setRecording компонент будет перезаписан, и все ваши данные, которые не содержатся в состоянии, будут потеряны. Вот простой диктофон , который я сделал в React, когда начал изучать Web Audio API, надеюсь, он укажет вам правильное направление — удачи!

2. Вы нашли решение? Если это так, пожалуйста, отправьте ответ

3. @EricNa нет, я не нашел решения и отменил проект

Ответ №1:

Я считаю, что MediaRecorder при попытке остановить запись, когда устройство записи уже находится в неактивном состоянии, выдается ошибка. Единственное, что вы можете сделать, это замкнуть действие остановки, если MediaRecorder уже находится в inactive состоянии an.

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

Однако, глядя на ваш код, я думаю, что проблема может быть в том, что ваш mrecorder является var . Вы должны сохранить его, useState чтобы при повторном рендеринге вашего компонента ваш оригинал mrecorder не стирался.