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

Posted 2023-03-22

【中文标题】将视频 Blob URL 转换为视频 mp4 文件

【英文标题】：Convert a Video Blob URL to Video mp4 File

【发布时间】：2021-12-02 15:05:15

【问题描述】：

我正在尝试将使用 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 视频文件吗？

【问题讨论】：

***.com/questions/26533691/… 的可能重复项

【参考方案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 时，这才会生成有效文件。