在 React App 中录制视频并上传到 Dropbox

如何解决在 React App 中录制视频并上传到 Dropbox

这似乎是我正在做的自由职业演出的一个非常简单的要求，但出于某种原因，我无法录制视频（使用内置硬件）并使用Dropbox API。我在这个项目和另一个项目中来回奔波，并且是一个新的开发人员，所以我觉得我错过了一些愚蠢的事情，但还没有弄清楚。任何帮助都是巨大的！这是我遇到问题的文件。我正在使用 react-media-recorder 库。

const UploadView = () => {
  const {
    startRecording,stopRecording,mediaBlobUrl,} = useReactMediaRecorder({ video: true,audio: true,blobPropertyBag: {
    type: "video/mp4"
} });

  const [curStatus,setCurStatus] = useState(true);
  const [selectedFile,setSelectedFile] = useState();
  const [isFilePicked,setIsFilePicked] = useState(false);

  // Handles upload of selected file to Dropbox
  const uploadToDropbox = () => {
    // const UPLOAD_FILE_SIZE_LIMIT = 150 * 1024 * 1024;
    console.log('Selected File:',selectedFile);
    var ACCESS_TOKEN = process.env.REACT_APP_ACCESS_TOKEN;
    var dbx = new Dropbox({ accessToken: ACCESS_TOKEN });
    console.log('FILE:',selectedFile);
        dbx.filesUpload({path: '/' + selectedFile.name,contents: selectedFile})
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.error(error);
        });
    
    }

    // Starts recording of new video
    const startedRec = () => {
      startRecording();
      setCurStatus(false);
    }

    // Stops recording of new video and creates blob
    const stoppedRec = async () => {
      stopRecording();
      setCurStatus(true);
      const videoBlob = await fetch(mediaBlobUrl).then(r => r.blob());
      const url = new Blob ([videoBlob]);
      // Creates a video file with a randomized file name
      const videoFile = new File([videoBlob],`${uuidv4()}.${"mp4"}`,{ type: "video/mp4" })

      console.log('Video File:',videoFile);
      console.log('Blob:',url);
        
      
      setSelectedFile(videoFile);
      setIsFilePicked(true);
    }

    // Handles input change and assigns input value to selectedFile variable
    const changeHandler = (event) => {
      setSelectedFile(event.target.files[0]);
      setIsFilePicked(true);
    };
  

  return (
    <div>
      <img src={Logo} className="logo"></img>
      {!isFilePicked ?
      <div className='player-wrapper'>
        <img src={Photo}/>
      </div> :
      <video width="700" height="350" controls>
        <source src={URL.createObjectURL(selectedFile)}/>
      </video>
      }
      <h1
        className="icon"
      >
        <img src={Icon}/>
      </h1>
      {curStatus ?
      <span>     
        <label
          className="video-record" 
          for="video-record">
            RECORD VIDEO
        </label>
        <input 
          id="video-record"
          onClick={startedRec}
        />
      </span>  
      :
      <span>     
        <label
          className="video-record" 
          for="video-record">
            STOP RECORDING
        </label>
        <input 
          id="video-record"
          onClick={stoppedRec}
        />
      </span>  
      }
      {!isFilePicked ?
      <span>
        <label 
          className="file-upload"
          for="file-upload">
            UPLOAD VIDEO
        </label>
        <input 
          id="file-upload"
          type="file"
          onChange={changeHandler}
        /> 
      </span> :
      <span>
        <label 
          className="file-upload"
          for="confirm-upload">
            SUBMIT VIDEO
        </label>
        <input 
          id="confirm-upload"
          type="submit"
          onClick={() => uploadToDropbox()}
        /> 
      </span>}
    </div>
  );
};

export default UploadView;

文件最终被创建并上传到 dropbox，但它显示为一个空文件。无论录音的长度如何，它都显示为相同的文件大小，所以我不确定我错过了什么。如果有人第一眼看到我遗漏的东西，请告诉我！