reactjs - 无效状态错误 : Failed to execute 'stop' on 'MediaRecorder' : The MediaRecorder's state is 'inactive'

Question

const [rec, setRec] = useState({});
const [onRec, setOnRec] = useState(true);
useEffect(() => {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
        const mediaRecorder = new MediaRecorder(stream)
        setRec(mediaRecorder)
    })
}, [onRec]);

这是 useEffect。

const onRecAudio = () => {
   
            rec.start()
            console.log(rec);
            console.log("start")
            setOnRec(false)
}

这是函数的第一次点击。录音开始。

const offRecAudio = () => {
    rec.stop()
    console.log("stop")
    setOnRec(true)
}

这是第二次点击功能。录制结束。

<button onClick={onRec ? onRecAudio : offRecAudio } />

我不希望 useEffect 在组件首次呈现时运行这些语句，而是只需单击一个按钮即可运行它们。按一次开始录音，再按一次结束录音。但是当我再次按下它时，我看到了这个错误。

Answer 1

我遇到了同样的错误，但模式不同，我没有将 MediaRecorder 保存在状态中，因为我发现在保存它们和从状态中恢复它们时很难处理复杂的对象和 Web API 接口(interface)，所以我使用了一个 React ref 和两个用于启动和停止的按钮，当我忘记取消绑定(bind) stop 事件监听器时会显示错误，但是在取消绑定(bind)之后，它工作得很好.

我将与您以及 future 想要以简单方式使用 React 录制音频的人分享我的代码:

import { useRef } from 'react';
declare var MediaRecorder: any;


export function ChatsInputs() {

    const stopButtonRef = useRef<HTMLButtonElement>(null);


    function startRecording() {

        navigator
            .mediaDevices
            .getUserMedia({ audio: true, video: false })
            .then(function (stream) {
           
                const options = { mimeType: 'audio/webm' };
                const recordedChunks: any = [];
                const mediaRecorder = new MediaRecorder(stream, options);

                mediaRecorder.addEventListener('dataavailable', function (e: any) {
                    if (e.data.size > 0) recordedChunks.push(e.data);
                });

                mediaRecorder.addEventListener('stop', function () {

                    setBlobUrl(URL.createObjectURL(new Blob(recordedChunks)));

                });

                if (stopButtonRef && stopButtonRef.current)
                    stopButtonRef?.current?.addEventListener('click', function onStopClick() {
                        mediaRecorder.stop();
                        this.removeEventListener('click', onStopClick)
                    });


                mediaRecorder.start();
            });

    }

    return (
        <div>
           
           
            <button onClick={startRecording}>{'rec'}</button>
           
            <button ref={stopButtonRef}>{'stop'}</button>
           
            <a download="file.wav" href={blobUrl}>{'download audio'}</a>
            {
                blobUrl ?
                    <audio id="player" src={blobUrl} controls></audio>
                    :
                    null
            }

        </div>
    );
}

Ref Article