Can't upload recorded video mediaBlobUrl to server using ReactJs-CodePudding

I'm creating a web app where user's recorded video will be uploaded to a server. I'm using react-media-recorder for recording video. It's giving me a mediaBlobUrl of the recorded video. The format of url is like this - blob:http://localhost:3000/5ef1cbb6-3e97-4c09-a47b-296e822b9839. I'm trying everything to send this video to a server but unable to do it. How can I do this using react and node js? Please help.

CodePudding user response：

you must put data into formData like this

var fd = new FormData();
fd.append('foo', 'bar.mp4');
fd.append('data', soundBlob);

CodePudding user response：

Check this URL https://www.npmjs.com/package/react-media-recorder

import { useReactMediaRecorder } from "react-media-recorder";

const RecordView = () => {
  const { status, startRecording, stopRecording, mediaBlobUrl } =
    useReactMediaRecorder({ video: true });

  return (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <video src={mediaBlobUrl} controls autoPlay loop />
    </div>
  );
};

And find out how to communicate with the server.

Just send the URL to the api provided by the server.