javascript - 将视频 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 是一个对象 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 时，这才会生成有效文件。