javascript - Convert a Video Blob URL to Video mp4 File - Stack Overflow

admin管理员组

文章数量:1315346

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?

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?

• javascript
• reactjs
• webrtc
• blob
• mediarecorder

Share Improve this question Follow edited Oct 14, 2021 at 8:34 Shivansh Pratap asked Oct 14, 2021 at 8:14 Shivansh PratapShivansh Pratap 2111 gold badge11 silver badge33 bronze badges 1

• possible duplicate of stackoverflow./questions/26533691/… – boxdox Commented Oct 14, 2021 at 8:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

`

const playRecord = async (e) => {
    if (!recordedBlob) {
        alert('No recorded data');
        return;
    }

    try {
        // Ensure `recordedBlob` is an array of Blobs
        const recordedSuperBlob = new Blob(recordedBlob, { type: 'video/mp4' });

        // Set the source of the video element for playback
        otherVideoElement.src = URL.createObjectURL(recordedSuperBlob);
        otherVideoElement.controls = true;
        otherVideoElement.play();

        // Create a File object from the recorded Blob
        const myFile = new File([recordedSuperBlob], "demo.mp4", { type: 'video/mp4' });

        // Create a temporary download link
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(myFile);
        downloadLink.download = "demo.mp4"; // Set the file name for download
        document.body.appendChild(downloadLink); // Append the link to the document body
        downloadLink.click(); // Programmatically click the link to trigger the download
        document.body.removeChild(downloadLink); // Remove the link from the DOM after download

        console.log("File created for download:", myFile);

    } catch (error) {
        console.error('Error during playback or file creation:', error);
    }
};

`

本文标签： javascriptConvert a Video Blob URL to Video mp4 FileStack Overflow