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

Question

我正试图将mediaBlobUrl转换为我使用Media Recorder录制视频后得到的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。

const mediaBlob = await fetch(mediaBlobUrl)
.then(response => response.blob());
const myFile = new File(
[mediaBlob],
"demo.mp4",
{ type: 'video/mp4' }
);

请注意，这只会产生一个有效的文件，如果MediaRecorder实际上被配置为录制mp4。