2

I'm trying to convert mediaBlobUrl that I get after recording a video using Media Recorder to a mp4 file,

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

const myFile = new File([mediaBlobUrl], "demo.mp4", { type: 'video/mp4' });

But after logging out the file, I always get the file size as 64 Bytes and it doesn't work.

Note: However If I download the file using blob url like this,

<a href={mediaBlobUrl} download="myFile">Download file</a>

And then upload the file and check its size, it is working fine.

Is there any other way to convert the blob Url to a mp4 video file?

Shivansh Pratap
  • 21
  • 1
  • 1
  • 3
  • possible duplicate of https://stackoverflow.com/questions/26533691/how-to-create-blob-of-a-video-file – boxdox Oct 14 '21 at 08:39

1 Answers1

3

The mediaBlobUrl provided by react-media-recorder is an object URL and not a Blob. That's why the conversion to a File fails.

There is an onstop function which allows you to access the Blob directly. But you can also convert the object URL back into a Blob as described here.

const mediaBlob = await fetch(mediaBlobUrl)
    .then(response => response.blob());

const myFile = new File(
    [mediaBlob],
    "demo.mp4",
    { type: 'video/mp4' }
);

Please note that this will only produce a valid file if the MediaRecorder was actually configured to record an mp4.

chrisguttandin
  • 7,025
  • 15
  • 21