将视频 Blob URL 转换为视频 mp4 文件

Question

我正在尝试将使用 Media Recorder 录制视频后获得的 mediaBlobUrl 转换为 mp4 文件，

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

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

但是在注销文件后，我总是得到文件大小为 64 字节并且它不起作用。

注意：但是，如果我像这样使用 blob url 下载文件，

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

然后上传文件并检查其大小，它工作正常。

有没有其他方法可以将 blob Url 转换为 mp4 视频文件？

Answer 1

react-media-recorder 提供的

mediaBlobUrl

是一个object URL 而不是

Blob

。这就是转换为

File

失败的原因。

有一个

onstop

功能，可让您直接访问

Blob

。但您也可以将对象 URL 转换回

Blob

，如 here 所述。

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

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

请注意，如果

MediaRecorder

实际配置为录制 mp4，这只会生成有效文件。