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?
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.