const handleStartCaptureClick = React.useCallback(() => { setCapturing(true); // setStillRecording(true); setStillRecording(prev => (prev, true)); imgSrc.current = webcamRef.current.getScreenshot({ width: 190, height: 120 }); mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { mimeType: "video/webm" }); mediaRecorderRef.current.addEventListener( "dataavailable", handleDataAvailable ); mediaRecorderRef.current.start(); setTimeout(() => { handleStopCaptureClick(); }, 5000); }, [webcamRef, setCapturing, mediaRecorderRef]); const handleDataAvailable = React.useCallback( ({ data }) => { if (data.size > 0) { setRecordedChunks((prev) => prev.concat(data)); } }, [setRecordedChunks] ); const handleStopCaptureClick = React.useCallback(() => { setStillRecording(false); mediaRecorderRef.current.stop(); setCapturing(false); }, [mediaRecorderRef, webcamRef, capturing]); const handlePreview = React.useCallback(async () => { setShowVideo(true); setOpen(false); if (recordedChunks.length) { const blob = new Blob(recordedChunks, { type: "video/webm" }); const url = URL.createObjectURL(blob); setUrl(url); setVideoBlob(blob); } }, [recordedChunks, Url]);

Hola, he escrito el código anterior para iniciar y detener la grabación con la cámara web. Necesito codificar de manera que se detenga después de un límite de tiempo o si hago clic en el botón de detener. Puedo hacerlo por separado, pero recibo un error si se inicia y se detiene antes del límite de tiempo. "× InvalidStateError: no se pudo ejecutar 'stop' en 'MediaRecorder': el estado de MediaRecorder es 'inactivo'".