Javascript React网络摄像头录制、回放、重新录制、存储

只需制作一个视频录制组件，您可以在以后回放，看看您是否喜欢它，如果不喜欢，您只需重新录制，最后它将存储在数据库中。我正在使用react网络摄像头来实现这一点，我在网上找到了一些功能

我有一个

handleDownload

函数，可以设置视频标签源和我刚才录制的blob。最初，它在单击按钮时下载了视频文件，但我希望在停止录制后，视频可以立即重新播放。理想情况下，我希望使用相同的react网络摄像头组件，但不确定我是否能够做到这一点，所以现在这就可以了

当我将函数设置为onClick listener到按钮时，它工作，但是，当我调用

handleStopCaptureClick中的函数时，它不工作
所以我尝试实现一个
useffect
，它会在停止捕获后运行
handleDownload
这也不起作用-有什么想法？谢谢

import React, {useEffect} from "react";
import Webcam from "react-webcam";

export const WebcamStreamCapture = () => {
    const webcamRef = React.useRef(null);
    const mediaRecorderRef = React.useRef(null);
    const [capturing, setCapturing] = React.useState(false);
    const [recordedChunks, setRecordedChunks] = React.useState([]);
    const isInitialMount = React.useRef(true);

    useEffect(() => {
      if (isInitialMount.current) {
        isInitialMount.current = false;
      } else {
        if (!capturing) {
          console.log('running handleDownload')
          handleDownload();
        }
      }
    }, [capturing])

    const handleStartCaptureClick = React.useCallback(() => {
      setCapturing(true);
      mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
        mimeType: "video/webm"
      });
      mediaRecorderRef.current.addEventListener(
        "dataavailable",
        handleDataAvailable
      );
      mediaRecorderRef.current.start();
    }, [webcamRef, setCapturing, mediaRecorderRef]);
  
    const handleDataAvailable = React.useCallback(
      ({ data }) => {
        if (data.size > 0) {
          setRecordedChunks((prev) => prev.concat(data));
        }
      },
      [setRecordedChunks]
    );
  
    const handleStopCaptureClick = React.useCallback(() => {
      mediaRecorderRef.current.stop();
      setCapturing(false);
    }, [mediaRecorderRef, webcamRef, setCapturing]);

        const handleDownload = React.useCallback(() => {
      if (recordedChunks.length) {
        const blob = new Blob(recordedChunks, {
          type: "video/webm"
        });
        const url = URL.createObjectURL(blob);
        const video = document.getElementById("video-replay");
        video.src = url
      }
    }, [recordedChunks]);
  
    return (
      <div className="d-flex flex-column align-items-center">
        <Webcam audio={false} ref={webcamRef} height={400} width={500}/>
        <video id="video-replay" height="400" width="500" controls></video>
        {capturing ? (
          <button className="btn btn-danger" onClick={handleStopCaptureClick}>Stop Capture</button>
        ) : (
          <button className="btn btn-danger" onClick={handleStartCaptureClick}>Start Capture</button>
        )}
        {recordedChunks.length > 0 && (
          <div>
            <button onClick={handleDownload}>Download</button>
          </div>
        )}
      </div>
    );
};

import React，{useffect}来自“React”；
从“react Webcam”导入网络摄像头；
导出常量WebcamStreamCapture=（）=>{
const webcamRef=React.useRef（null）；
const mediaRecorderRef=React.useRef（null）；
const[capting，setcapting]=React.useState（false）；
常量[recordedChunks，setRecordedChunks]=React.useState（[]）；
const isInitialMount=React.useRef（true）；
useffect（（）=>{
if（初始计数电流）{
isInitialMount.current=假；
}否则{
如果（！捕获）{
console.log（'running handleDownload'）
handleDownload（）；
}
}
}，[捕获]）
const handleStartCaptureClick=React.useCallback（（）=>{
设置捕捉（真）；
mediaRecorderRef.current=新的MediaRecorder（webcamRef.current.stream{
mimeType：“视频/webm”
});
mediaRecorderRef.current.addEventListener(
“数据可用”，
手数据可用
);
mediaRecorderRef.current.start（）；
}，[webcamRef、setCapturing、mediaRecorderRef]）；
const handleDataAvailable=React.useCallback(
（{data}）=>{
如果（data.size>0）{
setRecordedChunks（（prev）=>prev.concat（data））；
}
},
[setRecordedChunks]
);
const handleStopCaptureClick=React.useCallback（（）=>{
mediaRecorderRef.current.stop（）；
设置捕捉（假）；
}，[mediaRecorderRef、webcamRef、setCapturing]）；
const handleDownload=React.useCallback（（）=>{
if（recordedChunks.length）{
const blob=新blob（记录的块{
类型：“视频/webm”
});
const url=url.createObjectURL（blob）；
const video=document.getElementById（“视频回放”）；
video.src=url
}
}，[recordedChunks]）；
返回(
{捕获(
停止捕获
) : (
开始捕获
)}
{recordedChunks.length>0&&(
下载
)}
);
};

可能的解决方案
所以我突然想到，如果块在useEffect期间也没有出现/工作，那一定意味着当捕获在
handleStopCaptureClick
中停止时，状态需要一段时间才能更新，包括我认为的块。通过在useEffect中将依赖项从“捕获”更改为“录制的块”，我成功地使视频在您停止录制后立即显示。
解决方案：通过在useEffect中将依赖项从“捕获”更改为“录制的块”，我成功地使视频在您停止录制后立即显示